Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active January 4, 2024 19:54
Show Gist options
  • Save ThomasG77/c38e6b0ecfd014342aad to your computer and use it in GitHub Desktop.
Save ThomasG77/c38e6b0ecfd014342aad to your computer and use it in GitHub Desktop.
Sample Leaflet with GeoJSON
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 3);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
fetch("countries.geojson").then(res => res.json()).then(data => {
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
@ThomasG77
Copy link
Author

@jivthesh
Copy link

jivthesh commented Aug 17, 2021 via email

@hugonbgg
Copy link

Thanks!

@amauryBM
Copy link

amauryBM commented Jan 8, 2022

Excellent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment