Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Leaflet with GeoJSON
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/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/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>
@loorlab
Copy link

loorlab commented Apr 14, 2021

💎

@jivthesh
Copy link

jivthesh commented Aug 15, 2021

from where do u get these geojson data any link you could share

@ThomasG77
Copy link
Author

ThomasG77 commented Aug 15, 2021

@jivthesh
Copy link

jivthesh commented Aug 17, 2021

@hugonbgg
Copy link

hugonbgg commented Nov 17, 2021

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