Simple map to demonstrate the visualisation of polygons with Leaflet
Last active
April 20, 2021 03:44
-
-
Save milkbread/7114600 to your computer and use it in GitHub Desktop.
JavaScript: Leaflet Polygon Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple polygon visualisation</title> | |
| <meta charset="utf-8" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css); | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 960px; height: 500px"></div> | |
| <script> | |
| var map = L.map('map').setView([53, 20], 5); | |
| var data_attrib = " | Data: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers | <a href='http://d3js.org/'>D3.js</a>" | |
| var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers" + data_attrib}); | |
| var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', {attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>" + data_attrib}); | |
| var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib}).addTo(map); | |
| var baseLayers = {"stamen": stamen, "OpenStreetMap":osm, "World Physical Map":esri}; | |
| var overlays = {}; | |
| d3.json("result.geojson", function(error, json) { | |
| var polygons1 = []; | |
| json.features.map(function(poly,i){ | |
| if(poly.geometry.type=='MultiPolygon') | |
| var polygon = L.multiPolygon(poly.geometry.coordinates.map(function(d){return mapPolygon(d)}), {color: '#f00', weight:'2px'}).addTo(map); | |
| else if(poly.geometry.type=='Polygon') | |
| var polygon = L.polygon(mapPolygon(poly.geometry.coordinates), {color: '#f00', weight:'2px'}).addTo(map); | |
| //overlays["Polygon ("+poly.properties.GEN+")"] = polygon; | |
| polygons1.push(polygon) | |
| }) | |
| overlays["Original Polygons"]=polygons1; | |
| function mapPolygon(poly){ | |
| return poly.map(function(line){return mapLineString(line)}) | |
| } | |
| function mapLineString(line){ | |
| return line.map(function(d){return [d[1],d[0]]}) | |
| } | |
| }); | |
| d3.json("result_smooth_0.1.geojson", function(error, json) { | |
| var polygons2 = []; | |
| json.features.map(function(poly,i){ | |
| if(poly.geometry.type=='MultiPolygon') | |
| var polygon = L.multiPolygon(poly.geometry.coordinates.map(function(d){return mapPolygon(d)}), {color: '#0f0', weight:'1px'}).addTo(map); | |
| else if(poly.geometry.type=='Polygon') | |
| var polygon = L.polygon(mapPolygon(poly.geometry.coordinates), {color: '#0f0', weight:'1px'}).addTo(map); | |
| //overlays["Polygon ("+poly.properties.GEN+")"] = polygon; | |
| polygons2.push(polygon) | |
| }) | |
| overlays["Smoothed Polygons"]=polygons2; | |
| L.control.layers(baseLayers, overlays).addTo(map); | |
| function mapPolygon(poly){ | |
| return poly.map(function(line){return mapLineString(line)}) | |
| } | |
| function mapLineString(line){ | |
| return line.map(function(d){return [d[1],d[0]]}) | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment