cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new example: custom icons!

Browse Source
This commit is contained in:
Mourner 2011-05-18 14:54:58 +03:00
parent c8c18fc779
commit 83b6e0dad4
9 changed files with 208 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/css/screen.css
View File

@ -234,4 +234,9 @@ h3 span {
.example-img {
float: left;
margin: 0 18px 18px 0;
padding: 1px;
}
.bordered-img {
padding: 0;
border: 1px solid #ddd;
}

BIN
docs/images/custom-icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/images/leaf-green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
docs/images/leaf-orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
docs/images/leaf-red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
docs/images/leaf-shadow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

7
examples.html
View File

@ -50,7 +50,7 @@
<hr />
<a href="examples/quick-start.html"><img src="docs/images/quick-start.png" class="example-img" /></a>
<a href="examples/quick-start.html"><img src="docs/images/quick-start.png" class="example-img bordered-img" /></a>
<h3><a href="examples/quick-start.html">Leaflet Quick Start Guide</a></h3>
<p>A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with CloudMade tiles) on your page, working with markers, polylines and popups, and dealing with events.</p>
@ -61,8 +61,9 @@
<p>In this example, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p>
<hr />
<h3><a class="noimpl" href="#">Markers With Custom Icons</a></h3>
<p>This example will show you how to create customized markers for your map.</p>
<a href="examples/custom-icons.html"><img src="docs/images/custom-icons.png" class="example-img bordered-img" /></a>
<h3><a href="examples/custom-icons.html">Markers With Custom Icons</a></h3>
<p>In this pretty example, you'll learn how to easily define your own icons for use by the markers you put on the map.</p>
<hr />
<h3><a class="noimpl" href="#">Custom Controls</a></h3>

47
examples/custom-icons-example.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="../dist/leaflet.js"></script>
<script>
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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>
</body>
</html>

152
examples/custom-icons.html Normal file
View File

@ -0,0 +1,152 @@
<!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." />
<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">&larr; 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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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 &rarr;</a></p>
<h3>Preparing the images</h3>
<p>To make a custom icon, we usually need two images &mdash; 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 &mdash; 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 &mdash; 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 &mdash; the iconUrl. Because it's a frequent case, the <code>L.Icon</code> constructor has an optional argument &mdash; 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">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 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>
</body>
</html>