Skip to content

Instantly share code, notes, and snippets.

@viannaandreBR

viannaandreBR/countries.geojson

Forked from ThomasG77/countries.geojson
Created April 24, 2022 00:26
Show Gist options
  • Save viannaandreBR/a0b28e68ef2f4178d302ebd7ba0b6f22 to your computer and use it in GitHub Desktop.
Save viannaandreBR/a0b28e68ef2f4178d302ebd7ba0b6f22 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Leaflet with GeoJSON
Display the source blob
Display the rendered blob
Raw
countries.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment