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

partially convert custom icons example to markdown

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-17 18:26:08 +03:00
parent f3f67a267a
commit b8c40ee93a
3 changed files with 126 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/css/screen.css
View File

@ -13,9 +13,9 @@ body {
border: 1px solid #dfdfdf;
border-top: 0;
box-shadow: 0 0 40px #e0e0e0;
-moz-box-shadow: 0 0 40px #e0e0e0;
-webkit-box-shadow: 0 0 40px #e0e0e0;
box-shadow: 0 0 50px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.1);
}
h1 {
margin-bottom: 10px;
@ -154,6 +154,9 @@ td {
.nav a {
text-decoration: none;
color: #000;
background-color: rgba(0,0,0,0);
background-repeat: no-repeat;
-webkit-transition: 0.08s all;
}
.nav li span {
color: #000;
@ -169,24 +172,23 @@ td {
.nav li a:hover {
color: black;
background-color: #eff0f1;
background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8));
background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8);
background-image: linear-gradient(top, #eff0f1, #f6f7f8);
background-color: rgba(0,0,0,0.03);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
}
.nav li a.github-link {
background: url(https://github.com/favicon.png) 8px 12px no-repeat;
background-image: url(https://github.com/favicon.png);
background-position: 8px 12px;
}
.nav li a.twitter-link {
padding-left: 26px;
background: url(http://twitter.com/phoenix/favicon.ico) 7px 13px no-repeat;
background-image: url(http://twitter.com/phoenix/favicon.ico);
background-position: 7px 13px;
}
.nav li a.forum-link {
padding-right: 10px;
background: url(https://groups.google.com/forum/favicon.ico) 8px 12px no-repeat;
background-image: url(https://groups.google.com/forum/favicon.ico);
background-position: 8px 12px;
}
.nav li a.github-link,
.nav li a.twitter-link,
@ -346,7 +348,7 @@ table.factory-table td, table.factory-table th {
.social-buttons {
margin: 18px 0;
padding: 6px 0 2px 8px;
background: #f7f7f7;
background: #f3f3f3;
position: absolute;
top: 10px;
right: 40px;

184
examples/custom-icons.html
View File

@ -1,184 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a JavaScript library for mobile-friendly 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">An Open-Source JavaScript Library for Mobile-Friendly 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">Tutorials</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">Twitter</a></li>
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</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({
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)
}
});
var greenIcon = new LeafIcon(),
redIcon = new LeafIcon({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../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({
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)
}
});</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({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../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>
<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>
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ygv5CFpu3yBQFTFPOAdFg.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
</body>
</html>

111
examples/custom-icons.md Normal file
View File

@ -0,0 +1,111 @@
---
layout: default
title: Custom Icons
root: ../
---
[&larr; Back to the list of examples](../examples.html)
### 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.
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
[View example on a separate page &rarr;](custom-icons-example.html)
### 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:
<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>
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.
### 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:
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)
}
});
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.
### Using icons in markers
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:
var greenIcon = new LeafIcon(),
marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});
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:
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>.
<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({
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)
}
});
var greenIcon = new LeafIcon(),
redIcon = new LeafIcon({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../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>