2011-05-18 19:54:58 +08:00
<!DOCTYPE html>
< html >
< head >
< title > Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Markers With Custom Icons Example< / title >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< meta charset = "utf-8" / >
2012-02-14 23:02:29 +08:00
< meta property = "og:title" content = "Leaflet — an open-source JavaScript library for interactive maps" / >
2011-05-18 19:54:58 +08:00
< meta property = "og:description" content = "Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." / >
2012-02-14 23:02:29 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-05-18 19:54:58 +08:00
< link rel = "icon" type = "image/png" href = "../docs/images/favicon.png" / >
<!-- Blueprint -->
< link rel = "stylesheet" href = "../docs/css/blueprint/screen.css" media = "screen, projection" >
< link rel = "stylesheet" href = "../docs/css/blueprint/print.css" media = "print" >
<!-- [if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif] -->
< link rel = "stylesheet" href = "../docs/css/screen.css" media = "screen, projection" / >
< script src = "../docs/highlight/highlight.pack.js" > < / script >
< link rel = "stylesheet" href = "../docs/highlight/styles/github.css" / >
<!-- Leaflet -->
< link rel = "stylesheet" href = "../dist/leaflet.css" / >
<!-- [if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif] -->
< script src = "../dist/leaflet.js" > < / script >
< / head >
< body >
< div class = "container" >
< h1 > Leaflet< / h1 >
< h3 class = "alt" > A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by < a href = "http://cloudmade.com" > CloudMade< / a > < / h3 >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< ul class = "nav clearfix" >
< li > < a href = "../index.html" > Overview< / a > < / li >
2012-02-14 23:02:29 +08:00
< li > < a href = "../features.html" > Features< / a > < / li >
< li > < a href = "../examples.html" > Examples< / a > < / li >
< li > < a href = "../reference.html" > Documentation< / a > < / li >
< li > < a href = "../download.html" > Download< / a > < / li >
2011-05-18 19:54:58 +08:00
< li > < a class = "twitter-link" href = "http://twitter.com/LeafletJS" > @LeafletJS< / a > < / li >
2012-02-14 23:02:29 +08:00
< li > < a class = "github-link" href = "http://github.com/CloudMade/Leaflet" > GitHub Repo< / a > < / li >
2011-05-18 19:54:58 +08:00
< / ul >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > < a href = "../examples.html" > ← Back to the list of examples< / a > < / p >
< h3 > Markers With Custom Icons< / h3 >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > In this example, you'll learn how to easily define your own icons for use by the markers you put on the map.< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< div id = "map" style = "height: 220px; margin-bottom: 18px" > < / div >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< script >
var map = new L.Map('map');
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
map.setView(new L.LatLng(51.5, -0.09), 13).addLayer(cloudmade);
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
var LeafIcon = L.Icon.extend({
iconUrl: '../docs/images/leaf-green.png',
shadowUrl: '../docs/images/leaf-shadow.png',
iconSize: new L.Point(38, 95),
shadowSize: new L.Point(68, 95),
iconAnchor: new L.Point(22, 94),
popupAnchor: new L.Point(-3, -76)
});
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
var greenIcon = new LeafIcon(),
redIcon = new LeafIcon('../docs/images/leaf-red.png'),
orangeIcon = new LeafIcon('../docs/images/leaf-orange.png');
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
var marker1 = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon}),
marker2 = new L.Marker(new L.LatLng(51.495, -0.083), {icon: redIcon}),
marker3 = new L.Marker(new L.LatLng(51.49, -0.1), {icon: orangeIcon});
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
marker1.bindPopup("I am a green leaf.");
marker2.bindPopup("I am a red leaf.");
marker3.bindPopup("I am an orange leaf.");
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
map.addLayer(marker1).addLayer(marker2).addLayer(marker3);
< / script >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > < a target = "_blank" href = "custom-icons-example.html" > View example on a separate page → < / a > < / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< h3 > Preparing the images< / h3 >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this example, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three:< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p >
< img style = "border: 1px solid #ccc" src = "../docs/images/leaf-green.png" / >
< img style = "border: 1px solid #ccc" src = "../docs/images/leaf-red.png" / >
< img style = "border: 1px solid #ccc" src = "../docs/images/leaf-orange.png" / >
< img style = "border: 1px solid #ccc" src = "../docs/images/leaf-shadow.png" / >
< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > The white area in the images is actually transparent, and they are saved in the PNG24 format. Notice there's some excessive area on the left of the shadow image — its cropped in such way that if you align the icon and the shadow images on top of each other, the top left corners are in the same spot.< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< h3 > Defining an icon class< / h3 >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > The default marker icons in Leaflet are defined by the < a href = "../reference.html#icon" > L.Icon< / a > class. Its instance (< code > new L.Icon()< / code > ) is then set by default in the < code > L.Marker< / code > options. So how do we define our own icon class? Inherit from < code > L.Icon< / code > ! It's really easy in Leaflet:< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< pre > < code class = "javascript" > var LeafIcon = L.Icon.extend({
iconUrl: '../docs/images/leaf-green.png',
shadowUrl: '../docs/images/leaf-shadow.png',
iconSize: new L.Point(38, 95),
shadowSize: new L.Point(68, 95),
iconAnchor: new L.Point(22, 94),
popupAnchor: new L.Point(-3, -76)
});< / code > < / pre >
< p > Now we've defined a green leaf icon class. The < code > iconSize< / code > and < code > shadowSize< / code > properties are the sizes of the corresponding images in pixels, the < code > iconAnchor< / code > property is the coordinates of the "tip" of our icon, and the < code > popupAnchor< / code > property points to a point from which a marker popup would open relative to the < code > iconAnchor< / code > point.< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< h3 > Using icons in markers< / h3 >
< p > To use our newly created icon class in a marker, we need to create an instance of that class and pass it to the marker constructor in the options:< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< pre > < code class = "javascript" > var greenIcon = new LeafIcon(),
marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});< / code > < / pre >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > Awesome, it works! But what about the orange and the red ones? You could repeat the whole process above for each of them, but there's a much easier way. Notice that these icons would have the same properties except for one — the iconUrl. Because it's a frequent case, the < code > L.Icon< / code > constructor has an optional argument — an iconUrl to replace the defined one. Let's see:< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< pre > < code class = "javascript" > var greenIcon = new LeafIcon(),
redIcon = new LeafIcon('../docs/images/leaf-red.png'),
orangeIcon = new LeafIcon('../docs/images/leaf-orange.png');
< / code > < / pre >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > Now we can use all the three icons:< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< pre > < code class = "javascript" > var marker1 = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon}),
marker2 = new L.Marker(new L.LatLng(51.495, -0.083), {icon: redIcon}),
marker3 = new L.Marker(new L.LatLng(51.49, -0.1), {icon: orangeIcon});
marker1.bindPopup("I am a green leaf.");
marker2.bindPopup("I am a red leaf.");
marker3.bindPopup("I am an orange leaf.");
map.addLayer(marker1).addLayer(marker2).addLayer(marker3);< / code > < / pre >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p > That's all. Now take a look at the < a target = "_blank" href = "custom-icons-example.html" > full example< / a > , the < a href = "../reference.html#icon" > L.Icon docs< / a > , or browse < a href = "../examples.html" > other examples< / a > .< / p >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< hr / >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< p class = "quiet" > © 2011 < a href = "http://cloudmade.com" > CloudMade< / a > . Map data © 2011 < a href = "http://openstreetmap.org" > OpenStreetMap< / a > contributors, < a href = "http://creativecommons.org/licenses/by-sa/2.0/" > CC-BY-SA< / a > .< / p >
< / div >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< a href = "http://github.com/CloudMade/Leaflet" > < img id = "forkme" src = "http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt = "Fork me on GitHub" / > < / a >
2012-02-14 23:02:29 +08:00
2011-05-18 19:54:58 +08:00
< script >
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
2012-02-14 23:02:29 +08:00
< / script >
2011-06-17 06:56:11 +08:00
< script type = "text/javascript" >
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
< / script >
2011-05-18 19:54:58 +08:00
< / body >
2012-02-14 23:02:29 +08:00
< / html >
