Skip to content

Instantly share code, notes, and snippets.

@jfirebaugh

jfirebaugh/index.html

Forked from And-How/index.html
Last active December 27, 2015 02:39
Download ZIP

Revisions

  1. jfirebaugh revised this gist Oct 31, 2013. 1 changed file with 10 additions and 4 deletions.
    14 changes: 10 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,10 +3,10 @@
    <head>
    <meta charset=utf-8 />
    <title></title>
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.uncompressed.js'></script>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
    <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet'>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
    <![endif]-->
    <style>
    body { margin:0; padding:0; }
    @@ -64,7 +64,7 @@
    <ul id='map-ui'></ul>
    <div id='map'></div>
    <script type='text/javascript'>
    var map = L.map('map').setView([37.7869, -122.2121], 12);
    var map = L.mapbox.map('map').setView([37.7869, -122.2121], 12);
    var ui = document.getElementById('map-ui');

    addLayer(L.mapbox.tileLayer('ofurhe.map-448xuuy9'), 'Voter Turnout', 1);
    @@ -76,6 +76,10 @@
    .setZIndex(zIndex)
    .addTo(map);

    layer.on('ready', function() {
    map.legendControl.addLegend(layer.getTileJSON().legend);
    });

    // Create a simple layer switcher that toggles layers on
    // and off.
    var item = document.createElement('li');
    @@ -91,9 +95,11 @@

    if (map.hasLayer(layer)) {
    map.removeLayer(layer);
    map.legendControl.removeLegend(layer.getTileJSON().legend);
    this.className = '';
    } else {
    map.addLayer(layer);
    map.legendControl.addLegend(layer.getTileJSON().legend);
    this.className = 'active';
    }
    };
  2. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -67,9 +67,9 @@
    var map = L.map('map').setView([37.7869, -122.2121], 12);
    var ui = document.getElementById('map-ui');

    addLayer(L.mapbox.tileLayer('ofurhe.map-448xuuy9'), 'Base Map', 1);
    addLayer(L.mapbox.tileLayer('ofurhe.map-448xuuy9'), 'Voter Turnout', 1);
    addLayer(L.mapbox.tileLayer('ofurhe.MayoralCandidateVotes'), 'Mayoral Candidates', 2);
    addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 3);
    addLayer(L.mapbox.tileLayer('ofurhe.Votes_for_Quan'), 'Votes for Quan', 3);

    function addLayer(layer, name, zIndex) {
    layer
  3. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 87 additions and 4 deletions.
    91 changes: 87 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,8 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
    <!--[if lte IE 8]>
    @@ -15,9 +14,93 @@
    </style>
    </head>
    <body>
    <style>
    #map-ui {
    position: absolute;
    top: 75px;
    left: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 100;
    }

    #map-ui a {
    font: normal 13px/18px 'Helvetica Neue', Helvetica, sans-serif;
    background: #FFF;
    color: #3C4E5A;
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid #BBB;
    border-bottom-width: 0;
    min-width: 138px;
    padding: 10px;
    text-decoration: none;
    }

    #map-ui a:hover {
    background: #ECF5FA;
    }

    #map-ui li:last-child a {
    border-bottom-width: 1px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }

    #map-ui li:first-child a {
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    }

    #map-ui a.active {
    background: #3887BE;
    border-color: #3887BE;
    border-top-color: #FFF;
    color: #FFF;
    }
    </style>
    <ul id='map-ui'></ul>
    <div id='map'></div>
    <script>
    L.mapbox.map('map', 'ofurhe.map-448xuuy9');
    <script type='text/javascript'>
    var map = L.map('map').setView([37.7869, -122.2121], 12);
    var ui = document.getElementById('map-ui');

    addLayer(L.mapbox.tileLayer('ofurhe.map-448xuuy9'), 'Base Map', 1);
    addLayer(L.mapbox.tileLayer('ofurhe.MayoralCandidateVotes'), 'Mayoral Candidates', 2);
    addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 3);

    function addLayer(layer, name, zIndex) {
    layer
    .setZIndex(zIndex)
    .addTo(map);

    // Create a simple layer switcher that toggles layers on
    // and off.
    var item = document.createElement('li');
    var link = document.createElement('a');

    link.href = '#';
    link.className = 'active';
    link.innerHTML = name;

    link.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (map.hasLayer(layer)) {
    map.removeLayer(layer);
    this.className = '';
    } else {
    map.addLayer(layer);
    this.className = 'active';
    }
    };

    item.appendChild(link);
    ui.appendChild(item);
    }
    </script>
    </body>
    </html>
  4. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 16 additions and 52 deletions.
    68 changes: 16 additions & 52 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +1,23 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="leaflet.css" />
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
    <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet'>
    <![endif]-->
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <div id='map'></div>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);

    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");
    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");
    var popup = L.popup();
    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }
    map.on('click', onMapClick);
    */
    </script>
    L.mapbox.map('map', 'ofurhe.map-448xuuy9');
    </script>
    </body>
    </html>
  5. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 51 additions and 23 deletions.
    74 changes: 51 additions & 23 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,59 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Leaflet Map1</title>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="leaflet.css" />
    <script type="text/javascript" src="js/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="leaflet-openweathermap.css" />
    <script type="text/javascript" src="js/leaflet-openweathermap.js"></script>
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    </head>

    <body>
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>

    <script type='text/javascript'>

    <!-- Set map center to Metro Manila at zoom level 10 using OSM Default tile -->
    var map = new L.Map('map', {center: new L.LatLng(14.6146, 121.0081), zoom: 10});
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

    map.addLayer(osm);

    <!-- Add precipitation layer from OpenWeatherMap, and set the opacity to 50% -->
    var precipitation = L.OWM.precipitation({showLegend: false, opacity: 0.5});

    map.addLayer(precipitation);
    </script>

    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);

    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");
    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");
    var popup = L.popup();
    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }
    map.on('click', onMapClick);
    */
    </script>
    </body>
    </html>
  6. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 24 additions and 52 deletions.
    76 changes: 24 additions & 52 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +1,31 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="leaflet.css" />
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Leaflet Map1</title>
    <link rel="stylesheet" href="leaflet.css" />
    <script type="text/javascript" src="js/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="leaflet-openweathermap.css" />
    <script type="text/javascript" src="js/leaflet-openweathermap.js"></script>
    </head>

    <body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>

    <script type='text/javascript'>

    <!-- Set map center to Metro Manila at zoom level 10 using OSM Default tile -->
    var map = new L.Map('map', {center: new L.LatLng(14.6146, 121.0081), zoom: 10});
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

    map.addLayer(osm);

    <!-- Add precipitation layer from OpenWeatherMap, and set the opacity to 50% -->
    var precipitation = L.OWM.precipitation({showLegend: false, opacity: 0.5});

    map.addLayer(precipitation);
    </script>


    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);

    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");
    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");
    var popup = L.popup();
    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }
    map.on('click', onMapClick);
    */
    </script>
    </body>
    </html>
  7. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <link rel="stylesheet" href="leaflet.css" />
    <style>
    #map {
    width: 640px;
  8. @And-How And-How revised this gist Oct 10, 2013. No changes.
  9. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 52 additions and 20 deletions.
    72 changes: 52 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,59 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Leaflet Map2</title>
    <link rel="stylesheet" href="leaflet.css" />
    <script type="text/javascript" src="js/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="leaflet-openweathermap.css" />
    <script type="text/javascript" src="js/leaflet-openweathermap.js"></script>
    <link rel="stylesheet" type="text/css" href="mapbox.css" />
    <script type="text/javascript" src="js/mapbox.js"></script>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    </head>

    <body>
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>

    <script type='text/javascript'>

    <!-- Use your MapBox layer-->
    var map = L.mapbox.map('map','ofurhe.map-448xuuy9');

    map.addLayer(map);

    </script>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);

    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");
    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");
    var popup = L.popup();
    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }
    map.on('click', onMapClick);
    */
    </script>
    </body>
    </html>
  10. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 18 additions and 50 deletions.
    68 changes: 18 additions & 50 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +1,27 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Leaflet Map2</title>
    <link rel="stylesheet" href="leaflet.css" />
    <script type="text/javascript" src="js/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="leaflet-openweathermap.css" />
    <script type="text/javascript" src="js/leaflet-openweathermap.js"></script>
    <link rel="stylesheet" type="text/css" href="mapbox.css" />
    <script type="text/javascript" src="js/mapbox.js"></script>
    </head>
    <body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);

    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");
    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");
    <body>
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>

    <script type='text/javascript'>

    var popup = L.popup();
    <!-- Use your MapBox layer-->
    var map = L.mapbox.map('map','ofurhe.map-448xuuy9');

    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }
    map.addLayer(map);

    map.on('click', onMapClick);
    */
    </script>
    </script>

    </body>
    </html>
    </html>
  11. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@
    attribution: '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>'
    }).addTo(map);


    /*
    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    @@ -53,7 +53,7 @@
    }
    map.on('click', onMapClick);

    */
    </script>
    </body>
    </html>
  12. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([37.7867, -122.2119], 13);
    var map = L.map('map').setView([37.7867, -122.2119], 12);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
  13. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([51.505, -0.09], 13);
    var map = L.map('map').setView([37.7867, -122.2119], 13);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
  14. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 8 additions and 6 deletions.
    14 changes: 8 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,18 +3,20 @@
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <style>
    #map {
    width: 640px;
    height: 480px;
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <!--[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 src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

    var map = L.map('map').setView([51.505, -0.09], 13);
  15. @And-How And-How revised this gist Oct 10, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,9 @@

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../dist/leaflet.css" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
    </head>
    <body>
  16. @And-How And-How renamed this gist Oct 10, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.html → index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!DOCTYPE html>
    <html>
    <head>
  17. @And-How And-How created this gist Oct 10, 2013.
    56 changes: 56 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@

    <!DOCTYPE html>
    <html>
    <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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 = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '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>'
    }).addTo(map);


    L.marker([51.5, -0.09]).addTo(map)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");

    L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
    ]).addTo(map).bindPopup("I am a polygon.");


    var popup = L.popup();

    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
    }

    map.on('click', onMapClick);

    </script>
    </body>
    </html>