Skip to content

Instantly share code, notes, and snippets.

@twopoint718

twopoint718/osm.html

Created March 29, 2024 22:18
Show Gist options
  • Save twopoint718/3315fbcca93704375626b69477eea131 to your computer and use it in GitHub Desktop.
Save twopoint718/3315fbcca93704375626b69477eea131 to your computer and use it in GitHub Desktop.
Download ZIP
Short example of using OpenStreetMap with Leaflet.js
Raw
osm.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>OpenStreetMap with Leaflet.js</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
</head>
<body>
<style>
#map { height: 600px; width: 600px; }
</style>
<center>
<h1>Map</h1>
<div id="map"></div>
</center>
<script>
var map = L.map('map').setView([43.073051, -89.401230], 11);
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);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment