Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/starter.html

Created October 7, 2023 20:47
Show Gist options
  • Save nfreear/acd036674d7ec82043f0c8593bfe52eb to your computer and use it in GitHub Desktop.
Save nfreear/acd036674d7ec82043f0c8593bfe52eb to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet starter example
Raw
starter.html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Add the Leaflet stylesheet. -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- 2. Set a map height. -->
<style>
#map { min-height: 220px; }
</style>
<title> Leaflet Starter </title>
<h1> Leaflet Starter </h1>
<p>Based on the <a href="https://leafletjs.com/examples/quick-start/">Leaflet quick start</a>.</p>
<!-- 3. Add a container DIV element. -->
<div id="map"></div>
<!-- 4. Add the Leaflet Javascript. -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
// 5. Create a map centered on Central London: [51.505, -0.09].
var map = L.map('map').setView([51.505, -0.09], 13);
// 6. Add some map tiles to the map.
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// 7. Add a marker, with a popup.
var marker = L.marker([51.5, -0.09], { alt: 'Marker name' })
.addTo(map)
.bindPopup('Hello! I’m a popup');
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment