Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/index.html

Last active July 30, 2018 10:41
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 Dec 2, 2013. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,9 +17,11 @@

    <script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script> <script
    </script>
    <script
    src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelayer.js">
    </script> <script
    </script>
    <script
    src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeojson.js">
    </script>

  3. d3noob revised this gist Dec 2, 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
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Leaflet Map</title>
    <title>Leaflet.FileLayer Plugin</title>
    <meta charset="utf-8" />
    <link
    rel="stylesheet"
  4. d3noob created this gist Dec 2, 2013.
    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <!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"
    />
    <link
    rel="stylesheet"
    href="http://makinacorpus.github.io/Leaflet.FileLayer/Font-Awesome/css/font-awesome.min.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
    src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelayer.js">
    </script> <script
    src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeojson.js">
    </script>

    <script>
    var map = L.map('map').setView([-41.2858, 174.78682], 14);
    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);

    var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, clickable: false};
    L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';
    L.Control.fileLayerLoad({
    fitBounds: true,
    layerOptions: {style: style,
    pointToLayer: function (data, latlng) {
    return L.circleMarker(latlng, {style: style});
    }},
    }).addTo(map);

    </script>
    </body>
    </html>
    1 change: 1 addition & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    An example of a map presented with leaflet.js and the Leaflet.FileLoader plugin which will allow you to load a GPS trace in a GPX, KML or GeoJSON format.