{"id":154,"date":"2024-02-25T08:09:08","date_gmt":"2024-02-25T08:09:08","guid":{"rendered":"https:\/\/www.acugis.com\/gis-tutorials\/?page_id=154"},"modified":"2024-02-25T08:09:08","modified_gmt":"2024-02-25T08:09:08","slug":"leaflet-with-geojson-layer","status":"publish","type":"page","link":"https:\/\/www.acugis.com\/gis-tutorials\/web-mapping-with-leafletjs\/leaflet-with-geojson-layer\/","title":{"rendered":"Leaflet with GeoJSON Layer"},"content":{"rendered":"\n

This post will cover creating a basic Leaflet map using a GeoJSON data source.<\/p>\n\n\n\n

We’ll cover using both a GeoJSON file as well as GeoJSON from a GeoServer url.<\/p>\n\n\n\n

Let’s start with our Leaflet map skeleton:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<base target=\"_top\">\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\n\t<title>Leafletjs Map<\/title>\n\t\n\t<!-- Leafletjs and CSS -->    \n\t<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n\t\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n\n\t\n\t\n\t<style>\n\t\thtml, body {\n\t\t\theight: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.leaflet-container {\n\t\t\theight: 80%;\n\t\t\twidth: 80%;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t}\n\t<\/style>\n\n\t\n<\/head>\n<body>\n\n\t<div id=\"map\"><\/div>\n\n\n\t\n\t<script>\n\t\t\n\t\/\/ Add OpenStreetMap basemap\n\t\tconst map = L.map('map').setView([41.8916, -87.7219], 4);\n\n\t\tconst osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\tmaxZoom: 19,\n\t\t\tattribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n\t\t}).addTo(map);\n\n\t\n\t\n\n\n\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
We have a local file, states.json.  <\/p>\n\n\n\n
We now add some javascript to fetch our json data and add it to the map<\/p>\n\n\n\n
The first section sets the data location and the second adds the data to our map.<\/p>\n\n\n\n
Add the code below just above the closing <\/script> tag<\/p>\n\n\n\n
Note: this code is intended for use on a server, if run locally you will get a CORS exception.<\/p>\n\n\n\n
:<\/p>\n\n\n\n
\n\/*Add JSON location or url*\/\n       var url = 'states.json';  \/\/ path to json file\n       \n\/*fetch JSON data and to mao*\/\n       fetch(url)\n       .then(function(response) {\n          return response.json()\n       })\n       .then(function(data) {\n         L.geoJson(data).addTo(map);\n       })  <\/pre>\n\n\n\n
So our final code looks like below:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <base target=\"_top\">\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \n    <title>Leaflet GeoJSON Example<\/title>\n    \n    <!-- Leafletjs and CSS -->    \n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n    \n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n\n    <style>\n        html, body {\n            height: 100%;\n            margin: 0;\n        }\n        .leaflet-container {\n            height: 80%;\n            width: 80%;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    <\/style>\n\n    <\/head>\n<body>\n\n    <div id=\"map\"><\/div>\n   \n    <script>\n\n    \/\/ Add OpenStreetMap basemap\n        var map = L.map('map').setView([41.8916, -87.7219], 4);\n\n        var osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n        }).addTo(map);\n\n     \n       \/*Add JSON location or url*\/\n\n       var url = 'states.json';  \/\/ path to json file\n\n    \t\/*fetch JSON data and to map*\/\n\n       fetch(url)\n       .then(function(response) {\n          return response.json()\n       })\n       .then(function(data) {\n         L.geoJson(data).addTo(map);\n       })  \n\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
If we open the map in our browser, it now looks like below:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Using a GeoServer url for JSON data.<\/p>\n\n\n\n
If we wish to, we can use a GeoServer JSON url for our JSON data source.<\/p>\n\n\n\n
In order to do so, we will need to enable CORS for our GeoServer instance.<\/p>\n\n\n\n
To get our GeoJSON url from GeoServer, go to Layer Preview page and select GeoJSON from the Formats dropdown for the layer you would like to use.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Note the url that is generated:<\/p>\n\n\n\n
https:\/\/yourdomain.com\/geoserver\/topp\/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application\/json<\/pre>\n\n\n\n
Now, paste the url in place of ‘states.json’ in your code as below:<\/p>\n\n\n\n
 var url = 'https:\/\/yourdomain.com\/geoserver\/topp\/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application\/json';  \/\/ path to json file<\/pre>\n\n\n\n
Refresh the page and your map should look the same as previous, but is now using your GeoServer GeoJSON url.<\/p>\n","protected":false},"excerpt":{"rendered":"
This post will cover creating a basic Leaflet map using a GeoJSON data source. We’ll cover using both a GeoJSON file as well as GeoJSON from a GeoServer url. Let’s start with our Leaflet map skeleton: We have a local file, states.json. We now add some javascript to fetch our json data and add it … <\/p>\n
Continue reading “Leaflet with GeoJSON Layer”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":9,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/154\/revisions\/165"}],"up":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/media?parent=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}