Skip to content

Instantly share code, notes, and snippets.

@simon04
Created June 9, 2021 11:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save simon04/21ae8e3d07ec7f6b62ba5dcad403cc4a to your computer and use it in GitHub Desktop.
Save simon04/21ae8e3d07ec7f6b62ba5dcad403cc4a to your computer and use it in GitHub Desktop.
Leaflet example using JavaScript modules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
/>
</head>
<body>
<div id="map" style="height: 600px"></div>
<script type="module">
import { Map } from "https://unpkg.com/leaflet@1.7.1/src/map";
import { TileLayer } from "https://unpkg.com/leaflet@1.7.1/src/layer/tile/TileLayer";
import "https://unpkg.com/leaflet@1.7.1/src/layer/vector/Renderer.getRenderer";
import "https://unpkg.com/leaflet@1.7.1/src/control/Control.Attribution";
import "https://unpkg.com/leaflet@1.7.1/src/control/Control.Zoom";
const map = new Map("map").setView([51.505, -0.09], 13);
new TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
</script>
</body>
</html>
@ueredeveloper
Copy link

Hey. Thanks.

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