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

update custom icons example, minor fixes

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-25 19:50:59 +03:00
parent 404c6963f5
commit 522c831010
7 changed files with 91 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_layouts/default.html
View File

@ -35,6 +35,14 @@
<link rel="stylesheet" href="{{ root }}dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
<script src="{{ root }}dist/leaflet.js"></script>
<script>
CM_ATTR = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://cloudmade.com">CloudMade</a>';
CM_URL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
</script>
</head>
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
<div class="container">

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

8
examples.md
View File

@ -5,7 +5,7 @@ title: Tutorials
## Leaflet Tutorials
Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
Every tutorial here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
***
[<img src="docs/images/quick-start.png" class="example-img bordered-img" />][1]
@ -19,21 +19,21 @@ A simple step-by-step guide that will quickly get you started with Leaflet basic
### [Leaflet on Mobile][2]
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.
In this tutorial, 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.
***
[<img src="docs/images/custom-icons.png" class="example-img bordered-img" />][3]
### [Markers With Custom Icons][3]
In this pretty example, you'll learn how to easily define your own icons for use by the markers you put on the map.
In this pretty tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map.
***
[<img src="docs/images/geojson.png" class="example-img bordered-img" />][4]
### [Using GeoJSON with Leaflet][4]
In this example, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
In this tutorial, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
***
[<img src="docs/images/layers-control.png" class="example-img bordered-img" />][6]

12
examples/custom-icons-example.html
View File

@ -23,16 +23,16 @@
var LeafIcon = L.Icon.extend({
options: {
iconUrl: '../docs/images/leaf-green.png',
shadowUrl: '../docs/images/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [68, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon(),
var greenIcon = new LeafIcon({iconUrl: '../docs/images/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../docs/images/leaf-orange.png'});

112
examples/custom-icons.md
View File

@ -5,7 +5,7 @@ title: Markers With Custom Icons
### Markers With Custom Icons
In this example, you'll learn how to easily define your own icons for use by the markers you put on the map.
In this tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map.
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
@ -14,7 +14,7 @@ In this example, you'll learn how to easily define your own icons for use by the
### Preparing the images
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:
To make a custom icon, we usually need two images --- the actual icon image and the image of its shadow. For this tutorial, 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>
<img style="border: 1px solid #ccc" src="../docs/images/leaf-green.png" />
@ -23,71 +23,78 @@ To make a custom icon, we usually need two images --- the actual icon image and
<img style="border: 1px solid #ccc" src="../docs/images/leaf-shadow.png" />
</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.
Note that the white area in the images is actually transparent.
### Creating an icon
Marker icons in Leaflet are defined by [L.Icon](../reference.html#icon) objects, which are passed as an option when creating markers. Let's create a green leaf icon:
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
Now putting a marker with this icon on a map is easy:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
<div id="map2" style="height: 220px; margin-bottom: 18px"></div>
### Defining an icon class
The default marker icons in Leaflet are defined by the [L.Icon](../reference.html#icon) class. Its instance (`new L.Icon()`) is then set by default in the `L.Marker` options. So how do we define our own icon class? Inherit from `L.Icon`! It's really easy in Leaflet:
What if we need to create several icons that have lots in common? Lets define our own icon class containing the shared options, inheriting from `L.Icon`! It's really easy in Leaflet:
var LeafIcon = L.Icon.extend({
options: {
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)
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
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.
Now we can create all three of our leaf icons from this class and use them:
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
### Using icons in markers
You may have noticed that we used the `new` keyword for creating LeafIcon instances. So why do all Leaflet classes get created without it? The answer is simple: the real Leaflet classes are named with a capital letter (e.g. `L.Icon`), and they also need to be created with `new`, but there are also shortcuts with lowercase names (`L.icon`), created for convenience like this:
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:
L.icon = function (options) {
return new L.Icon(options);
};
var greenIcon = new LeafIcon(),
marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});
You can do the same with your classes too. OK, lets finally put some markers with these icons on the map:
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:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
var greenIcon = new LeafIcon(),
redIcon = new LeafIcon({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../docs/images/leaf-orange.png'});
Now we can use all the three icons:
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);
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>.
That's it. Now take a look at the [full example](custom-icons-example.html), the [L.Icon docs](../reference.html#icon), or browse [other examples](../examples.html).
<script>
var map = new L.Map('map');
var map = L.map('map').setView([51.5, -0.09], 13);
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);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 22677}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
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)
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
@ -104,4 +111,23 @@ That's all. Now take a look at the <a target="_blank" href="custom-icons-example
marker3.bindPopup("I am an orange leaf.");
map.addLayer(marker1).addLayer(marker2).addLayer(marker3);
var map2 = L.map('map2').setView([51.505, -0.09], 13);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 22677}).addTo(map2);
var greenIcon2 = L.icon({
iconUrl: '../docs/images/leaf-green.png',
shadowUrl: '../docs/images/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
});
L.marker([51.5, -0.09], {icon: greenIcon2}).addTo(map2);
</script>

72
examples/mobile.html
View File

@ -1,72 +0,0 @@
---
layout: tutorial
title: Leaflet on Mobile
---
<h3>Leaflet on Mobile</h3>
<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>
<p><a href="mobile-example.html">View example in fullscreen &rarr;</a></p>
<h3>Preparing the page</h3>
<p>First we'll take a look at the HTML &amp; CSS code of the page. To make our map <code>div</code> element stretch to all available space (fullscreen), we can use the following CSS code:</p>
<pre><code class="css">body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}</code></pre>
<p>Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the <code>head</code> section or our HTML page:</p>
<pre><code class="html">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;</code></pre>
<h3>Initializing the map</h3>
<p>We'll now initialize the map in the JavaScript code exactly like we did in the <a href="quick-start">quick start guide</a>, but won't set the map view yet:</p>
<pre><code class="javascript">var map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">API-key</a>/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &amp;copy; <span class="text-cut" data-cut="[&hellip;]">&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery &copy; &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>',
maxZoom: 18
}).addTo(map);</code></pre>
<h3>Geolocation</h3>
<p>Leaflet has a very handy shortcut for zooming the map view to the detected location &mdash; <code>locate</code> method with the <code>setView</code> option, replacing the usual <code>setView</code> method in the code:</p>
<pre><code class="javascript">map.locate({setView: true, maxZoom: 16});</code></pre>
<p>Here we specify 16 as the maximum zoom when setting the map view automatically. As soon as the user agrees to share its location and it's detected by the browser, the map will set the view to it. Now we have a working fullscreen mobile map! But what if we need to do something after the geolocation completed? Here's what the <code>locationfound</code> and <code>locationerror</code> events are for. Let's for example add a marker in the detected location, showing accuracy in a popup, by adding an event listener to <code>locationfound</code> event before the <code>locateAndSetView</code> call:</p>
<pre><code class="javascript">function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
</code></pre>
<p>Excellent! But it would also be nice to show an error message if the geolocation failed:</p>
<pre><code class="javascript">function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
</code></pre>
<p>If you have <code>setView</code> option set to true and the geolocation failed, it will set the view to the whole world.</p>
<p>Now the example is complete &mdash; try it on your mobile phone: <a target="_blank" href="mobile-example.html">View the full example &rarr;</a></p>
<p>Next steps would be to take a look at the detailed <a href="../reference.html">documentation</a> and browse <a href="../examples.html">other examples</a>.</p>

12
examples/quick-start.md
View File

@ -142,13 +142,9 @@ Now you've learned Leaflet basics and can start building map apps straight away!
<script>
var tilesAttrib = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
tilesUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png';
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer(tilesUrl, {attribution: tilesAttrib}).addTo(map);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 997}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
@ -180,12 +176,12 @@ Now you've learned Leaflet basics and can start building map apps straight away!
var map1 = L.map('map1').setView([51.505, -0.09], 13);
L.tileLayer(tilesUrl, {attribution: tilesAttrib}).addTo(map1);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 997}).addTo(map1);
var map2 = L.map('map2').setView([51.505, -0.09], 13);
L.tileLayer(tilesUrl, {attribution: tilesAttrib}).addTo(map2);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 997}).addTo(map2);
L.marker([51.5, -0.09]).addTo(map2);
@ -204,7 +200,7 @@ Now you've learned Leaflet basics and can start building map apps straight away!
var map3 = L.map('map3').setView([51.505, -0.09], 13);
L.tileLayer(tilesUrl, {attribution: tilesAttrib}).addTo(map3);
L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 997}).addTo(map3);
L.marker([51.5, -0.09]).addTo(map3)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();