Here’s a complete, runnable HTML example that loads OpenStreetMap tiles and displays GeoJSON data using Leaflet.js.
This works entirely in the browser without a backend.
HTML + JavaScript
Html
OpenStreetMap with GeoJSON
How it works
Leaflet.js loads OpenStreetMap tiles.
A GeoJSON object is defined inline (you can also load it from a .geojson file via fetch()).
L.geoJSON() renders the features with custom styles and popups.
Supports points, lines, and polygons.
✅ Tip:
If you have a .geojson file, replace the inline geojsonData with:
Javascriptfetch('data.geojson')
.then(res => res.json())
.then(data => L.geoJSON(data).addTo(map));
If you want, I can extend this example to load live GeoJSON data directly from OpenStreetMap using Overpass API so you can query real map features dynamically.
Do you want me to prepare that version?