Skip to content

Instantly share code, notes, and snippets.

@geospatialem

geospatialem/LeafletPointSymbologyExample.html

Last active October 7, 2021 08:28
Show Gist options
  • Save geospatialem/0e81d4f82aa5021613a5 to your computer and use it in GitHub Desktop.
Save geospatialem/0e81d4f82aa5021613a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. geospatialem revised this gist Jul 26, 2015. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion LeafletPointSymbologyExample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,10 @@
    ]
    };

    var map = L.map('map').setView([46.7830, -92.1005], 15);
    var map = L.map('map', {
    center: [46.7830, -92.1005],
    zoom: 15
    });

    var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
  2. geospatialem revised this gist Jul 26, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions LeafletPointSymbologyExample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,8 @@
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

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

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script>
    var geojson = {
    "type": "FeatureCollection",
  3. geospatialem revised this gist Jul 26, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion LeafletPointSymbologyExample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    var geojson = {
    "type": "FeatureCollection",
    "features": [
    { "type": "Feature", "id": 3, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
    { "type": "Feature", "id": 0, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
    ]
    };

  4. geospatialem revised this gist Jul 26, 2015. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions LeafletPointSymbologyExample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,10 +22,15 @@

    geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
    return {color: "green"};
    return {
    color: "green"
    };
    },
    pointToLayer: function(feature, latlng) {
    return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.85});
    return new L.CircleMarker(latlng, {
    radius: 10,
    fillOpacity: 0.85
    });
    },
    onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.NAME);
  5. geospatialem revised this gist Jul 26, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion LeafletPointSymbologyExample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@

    geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
    return {color: feature.properties.GPSUserColor};
    return {color: "green"};
    },
    pointToLayer: function(feature, latlng) {
    return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.85});
  6. geospatialem renamed this gist Jul 26, 2015. 1 changed file with 0 additions and 0 deletions.
    0 LeafletPointSymbology.html → LeafletPointSymbologyExample.html
    View file
    File renamed without changes.
  7. geospatialem revised this gist Jul 26, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion LeafletPointSymbology.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    var geojson = {
    "type": "FeatureCollection",
    "features": [
    { "type": "Feature", "id": 3, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)", "ADDRESS": "350 Harbor Drive", "HOURS": "10:00 am - 5:00 pm", "WEBSITE": "http://www.decc.org" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
    { "type": "Feature", "id": 3, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
    ]
    };

  8. geospatialem created this gist Jul 26, 2015.
    36 changes: 36 additions & 0 deletions LeafletPointSymbology.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">

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

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script>
    var geojson = {
    "type": "FeatureCollection",
    "features": [
    { "type": "Feature", "id": 3, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)", "ADDRESS": "350 Harbor Drive", "HOURS": "10:00 am - 5:00 pm", "WEBSITE": "http://www.decc.org" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
    ]
    };

    var map = L.map('map').setView([46.7830, -92.1005], 15);

    var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
    return {color: feature.properties.GPSUserColor};
    },
    pointToLayer: function(feature, latlng) {
    return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.85});
    },
    onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.NAME);
    }
    });

    map.addLayer(geojsonLayer);
    </script>