172 lines
8.5 KiB
HTML
172 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Markers With Custom Icons Example</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
|
<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." />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<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>
|
|
|
|
<ul class="nav clearfix">
|
|
<li><a href="../index.html">Overview</a></li>
|
|
<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>
|
|
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
|
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
|
</ul>
|
|
|
|
<p><a href="../examples.html">← Back to the list of examples</a></p>
|
|
<h3>Markers With Custom Icons</h3>
|
|
|
|
<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>
|
|
|
|
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
|
|
|
|
<script>
|
|
var map = new L.Map('map');
|
|
|
|
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});
|
|
|
|
map.setView(new L.LatLng(51.5, -0.09), 13).addLayer(cloudmade);
|
|
|
|
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)
|
|
});
|
|
|
|
var greenIcon = new LeafIcon(),
|
|
redIcon = new LeafIcon('../docs/images/leaf-red.png'),
|
|
orangeIcon = new LeafIcon('../docs/images/leaf-orange.png');
|
|
|
|
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);
|
|
</script>
|
|
|
|
<p><a target="_blank" href="custom-icons-example.html">View example on a separate page →</a></p>
|
|
|
|
<h3>Preparing the images</h3>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<h3>Defining an icon class</h3>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<pre><code class="javascript">var greenIcon = new LeafIcon(),
|
|
marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});</code></pre>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<p>Now we can use all the three icons:</p>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<hr />
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
hljs.tabReplace = ' ';
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
|
|
<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>
|
|
</body>
|
|
</html>
|