Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/index.html

Last active May 31, 2023 13:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d3noob/9150014 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d3noob/9150014 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. d3noob revised this gist Apr 20, 2014. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. d3noob revised this gist Feb 22, 2014. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,3 @@
    <?php ?>

    <!DOCTYPE html>
    <html>
    <head>
  3. d3noob created this gist Feb 22, 2014.
    52 changes: 52 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    <?php ?>

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link
    rel="stylesheet"
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
    </head>
    <body>

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

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

    <script>

    var planes = [
    ["7C6B07",-40.99497,174.50808],
    ["7C6B38",-41.30269,173.63696],
    ["7C6CA1",-41.49413,173.5421],
    ["7C6CA2",-40.98585,174.50659],
    ["C81D9D",-40.93163,173.81726],
    ["C82009",-41.5183,174.78081],
    ["C82081",-41.42079,173.5783],
    ["C820AB",-42.08414,173.96632],
    ["C820B6",-41.51285,173.53274]
    ];

    var map = L.map('map').setView([-41.3058, 174.82082], 8);
    mapLink =
    '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
    }).addTo(map);

    for (var i = 0; i < planes.length; i++) {
    marker = new L.marker([planes[i][1],planes[i][2]])
    .bindPopup(planes[i][0])
    .addTo(map);
    }

    </script>
    </body>
    </html>
    3 changes: 3 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    An example of a [leaflet.js](http://leafletjs.com/) map with multiple markers added.

    This is provided in conjunction with the explanation of the code given in the book "[Leaflet Tips and Tricks](https://leanpub.com/leaflet-tips-and-tricks)".