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

switch to OSM tiles on the front page

Browse Source
This commit is contained in:
Vladimir Agafonkin 2013-01-15 17:01:36 +02:00
parent 1a1fb5af44
commit 17e3caf661
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_layouts/default.html
View File

@ -46,6 +46,9 @@
'Imagery © <a href="http://cloudmade.com">CloudMade</a>';
CM_URL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
OSM_ATTRIB = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
</script>
</head>
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
@ -137,7 +140,7 @@
<div class="footer">
<hr />
<p class="quiet">&copy; 2011&ndash;2012 <a href="http://cloudmade.com">CloudMade</a>, <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
<p class="quiet">&copy; 2010&ndash;2013 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010&ndash;2011 <a href="http://cloudmade.com">CloudMade</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
</div>
</div>

41
index.md
View File

@ -5,7 +5,7 @@ layout: default
<!--<p class="notice">October 25, 2012 &mdash; Leaflet 0.4.5 bugfix release and plans for 0.5 &mdash; <a href="2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5.html">Read More in the Blog</a></p>-->
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.
It is developed by [Vladimir Agafonkin][] of [CloudMade][] with a&nbsp;team of dedicated [contributors][].
It is developed by [Vladimir Agafonkin][] with a&nbsp;team of dedicated [contributors][].
Weighing just about <abbr title="27KB gzipped &mdash; that's 102 KB minified and 176 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 10 KB of images.">27 KB of JS code</abbr>,
it has all the [features][] most developers ever need for online maps.
@ -34,20 +34,20 @@ Used by:
<div id="map" class="map" style="height: 300px"></div>
In this basic example, we create a map with <abbr title="Here we use the beautiful CloudMade tiles which require an API key (get one for free!), but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
In this basic example, we create a map with <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
<!--- manually colored to support raw HTML inside the code -->
<pre><code class="javascript"><span class="comment">// create a map in the "map" div, set the view to a given place and zoom</span>
<span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">51.505</span>, -<span class="number">0.09</span>], <span class="number">13</span>);
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
<span class="comment">// add a CloudMade tile layer with style #997</span>
L.tileLayer(<span class="string">'http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">[API-key]</a>/997/256/{z}/{x}/{y}.png'</span>, {
attribution: <span class="string">'Map data <span class="text-cut" data-cut="[&hellip;]">&amp;copy; &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 © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>'</span>
}).addTo(map);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<span class="comment">// add a marker in the given location, attach some popup content to it and open the popup</span>
L.marker([<span class="number">51.5</span>, -<span class="number">0.09</span>]).addTo(map)
.bindPopup(<span class="string">'A pretty CSS3 popup. &lt;br&gt; Easily customizable.'</span>).openPopup();</code></pre>
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
Learn more with the [quick start guide](examples/quick-start.html), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html).
@ -84,15 +84,14 @@ Check out the [contribution guide][contribute] for more information on getting i
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
L.marker([51.504, -0.159])
.addTo(map)
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
.openPopup();
</script>