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

In our previous tutorial, we created a Leaflet map with a GeoJSON layer<\/a>.<\/p>\n\n\n\n

In this tutorial, we’ll use jQuery to add add pop-up feature information to our map.<\/p>\n\n\n\n

As with the previous tutorial, 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 basic Leaflet map with GeoJSON layer that we created earlier:<\/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
We now want to make our layer display feature data on click.<\/p>\n\n\n\n
First, we need to add the jQuery library to the <head> section of our file.<\/p>\n\n\n\n
:<\/p>\n\n\n\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.js\" integrity=\"sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=\" crossorigin=\"anonymous\"><\/script>\n<\/pre>\n\n\n\n
Next, we need to add some jQuery to get our data.<\/p>\n\n\n\n
Each section is commented below.<\/p>\n\n\n\n
\n\/\/Loop through JSON file for features information -->\n\tfunction forEachFeature(feature, layer) {\n    \n\t\/\/ Print all feature information\n    var mypopupContent = '<pre>'+JSON.stringify(feature.properties,null,' ').replace(\/[\\{\\}\"]\/g,'')+'<\/pre>';\n    \n\t\/\/ above Bind to popup content\n    layer.bindPopup(mypopupContent);\n            \n\t\t}\n\t\n    \/\/ Null var that will hold layer\n\tvar myLayer = L.geoJson(null, {onEachFeature: forEachFeature});\n\n    \/\/ Add mylayer above to map\n\t$.getJSON(url, function(data) {\n   \tmyLayer.addData(data);\n\t});\n\tmyLayer.addTo(map);<\/pre>\n\n\n\n
With our jQuery in place, our html code now 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\t\n\t<script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.js\" integrity=\"sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=\" crossorigin=\"anonymous\"><\/script>\n\n    <!-- Inline map styling -->\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    \n<\/head>\n<body>\n\n    <div id=\"map\"><\/div>\n\n\n<script>\n\t\n\n\tvar map = L.map('map').setView([47.7541, -107.05078], 3); \n\n\tvar osm = new L.tileLayer('https:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png',{ \n\t\t\t\tattribution: '&copy; <a href=\"http:\/\/osm.org\/copyright\">OpenStreetMap<\/a> contributors'}).addTo(map);\n\t\n\tvar url = 'states.json';  \/\/ GeoJSON data source. Can be file or GeoServer url.\n\t\t\n\t\/\/Loop through JSON file for features information -->\n\tfunction forEachFeature(feature, layer) {\n    \n\t\/\/ Print all feature information\n    var mypopupContent = '<pre>'+JSON.stringify(feature.properties,null,' ').replace(\/[\\{\\}\"]\/g,'')+'<\/pre>';\n    \n\t\/\/ above Bind to popup content\n    layer.bindPopup(mypopupContent);\n            \n\t\t}\n\t\n    \/\/ Null var that will hold layer\n\tvar myLayer = L.geoJson(null, {onEachFeature: forEachFeature});\n\n    \/\/ Add mylayer above to map\n\t$.getJSON(url, function(data) {\n   \tmyLayer.addData(data);\n\t});\n\tmyLayer.addTo(map);\n\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Now, when we click on our map, the data for the feature is returned.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
In the code above, we are looping through all of the features and displaying them.<\/p>\n\n\n\n
You can limit this by substituting individual features.<\/p>\n\n\n\n
We can replace line below:<\/p>\n\n\n\n
var popupContent = '<pre>'+JSON.stringify(feature.properties,null,' ').replace(\/[\\{\\}\"]\/g,'')+'<\/pre>';<\/pre>\n\n\n\n
With this, which returns only the State name:<\/p>\n\n\n\n
var popupContent = \"State Name: \" + feature.properties.STATE_NAME;\n<\/pre>\n\n\n\n
<\/p>\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
<\/p>\n","protected":false},"excerpt":{"rendered":"
In our previous tutorial, we created a Leaflet map with a GeoJSON layer. In this tutorial, we’ll use jQuery to add add pop-up feature information to our map. As with the previous tutorial, we’ll cover using both a GeoJSON file as well as GeoJSON from a GeoServer url. Let’s start with our basic Leaflet map … <\/p>\n
Continue reading “Leaflet with GeoJSON Layer and Features”<\/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-195","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/195","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=195"}],"version-history":[{"count":9,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/195\/revisions"}],"predecessor-version":[{"id":205,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/195\/revisions\/205"}],"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=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}