This content originally appeared on Raymond Camden and was authored by Raymond Camden
Last week I shared my initial experiences with Leaflet and I thought I'd share a small demo I built with it - a general purpose GeoJSON viewer.
GeoJSON and Leaflet
As I mentioned at the end of my last post, GeoJSON is a specification for encoding ad hoc geographic data. Here's an example:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": { "Code": "FRLA", "Name": "Frederick Law Olmsted National Historic Site" }, "geometry": { "type": "Point", "coordinates": [ -71.13112956925647, 42.32550867371509 ] } }, { "type": "Feature", "id": 1, "properties": { "Code": "GLDE", "Name": "Gloria Dei Church National Historic Site" }, "geometry": { "type": "Point", "coordinates": [ -75.14358360598474, 39.93437740957208 ] } }, ]}GeoJSON can encode points, lines, polygons, and more, and support a properties section that can have anything in it. Leaflet makes it easy to use GeoJSON. Here's the example I used in that last post:
let dataReq = await fetch('https://assets.codepen.io/74045/national-parks.geojson');let data = await dataReq.json();L.geoJSON(data).bindPopup(function (layer) { return layer.feature.properties.Name;}).addTo(map);That's literally it. Given how easy this, I thought I'd build a demo where the data was provided by the user.
The Application
My application is built with simple vanilla JavaScript, no Alpine even, and lets you drop a file into the browser to load the information.
My code waits for DOMContentLoaded and then registers event handlers for dragdrop support:
document.addEventListener('dragover', e => e.preventDefault());document.addEventListener('drop', handleDrop);When you drop a file, I then use a bit of code to read it in.
function handleDrop(e) { e.preventDefault(); let droppedFiles = e.dataTransfer.files; if(!droppedFiles) return; let myFile = droppedFiles[0]; let ext = myFile.name.split('.').pop(); if(ext !== 'geojson') { alert('Drag/drop a .geojson file only.'); return; } let reader = new FileReader(); reader.onload = e => { loadGeoJSON(JSON.parse(e.target.result)); }; updateStatus('Reading .geojson'); reader.readAsText(myFile); }The loadGeoJSON function handles adding the data to Leaflet:
async function loadGeoJSON(data) { updateStatus(`.geojson loaded with ${data.features.length} features. Adding to map now.`); L.geoJSON(data, { }).bindPopup(function (layer) { return ` <p> <b>Properties:</b><br> <pre style='white-space:pre-wrap'><code>${JSON.stringify(layer.feature.properties,null,' ')} </code></pre> </p> `; },{minWidth:450}).addTo(map);}This is pretty much the same code as before, except that my popup uses a basic dump (stringify) of the properties key. Note that this will not work for all files, especially if there's a lot of data there. I could get fancier with my output there and perhaps add a max height with overflow. That being said, here is how it looks after adding America's parks to it (and clicking one feature):
You can test it out here (full screen): https://codepen.io/cfjedimaster/full/GRbxVVR
And here's the full code:
See the Pen Leaflet geojson viewer (v2) by Raymond Camden (@cfjedimaster) on CodePen.
This content originally appeared on Raymond Camden and was authored by Raymond Camden
Raymond Camden | Sciencx (2024-08-30T18:00:00+00:00) Building a General Purpose GeoJSON Viewer with Leaflet. Retrieved from https://www.scien.cx/2024/08/30/building-a-general-purpose-geojson-viewer-with-leaflet/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.