Skip to content

Instantly share code, notes, and snippets.

@gonatan

gonatan/openstreetmap.html

Last active May 2, 2022 21:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gonatan/7e5b1ab79c436da0a1eb79dcdac0d502 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gonatan/7e5b1ab79c436da0a1eb79dcdac0d502 to your computer and use it in GitHub Desktop.
Download ZIP
Openstreetmap example
Raw
openstreetmap.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%234b485a%22></rect><path fill=%22%23fff%22 d=%22M37.70 49.98L37.70 49.98Q37.70 52.71 36.87 54.81Q36.05 56.91 34.58 58.33Q33.11 59.75 31.12 60.48Q29.12 61.22 26.78 61.22L26.78 61.22Q24.43 61.22 22.44 60.48Q20.44 59.75 18.99 58.33Q17.54 56.91 16.71 54.81Q15.89 52.71 15.89 49.98L15.89 49.98Q15.89 47.25 16.73 45.17Q17.57 43.09 19.04 41.67Q20.51 40.25 22.49 39.52Q24.47 38.78 26.78 38.78L26.78 38.78Q29.09 38.78 31.08 39.52Q33.08 40.25 34.55 41.67Q36.02 43.09 36.86 45.17Q37.70 47.25 37.70 49.98ZM32.03 49.98L32.03 49.98Q32.03 46.62 30.61 44.92Q29.19 43.23 26.78 43.23L26.78 43.23Q24.40 43.23 22.96 44.92Q21.53 46.62 21.53 49.98L21.53 49.98Q21.53 53.38 22.94 55.08Q24.36 56.77 26.78 56.77L26.78 56.77Q29.19 56.77 30.61 55.08Q32.03 53.38 32.03 49.98ZM47.85 56.74L47.85 56.74Q49.70 56.74 50.49 56.09Q51.28 55.44 51.28 54.53L51.28 54.53Q51.28 53.69 50.66 53.19Q50.05 52.68 48.83 52.29L48.83 52.29L47.04 51.73Q45.57 51.28 44.38 50.73Q43.19 50.19 42.35 49.44Q41.51 48.69 41.04 47.66Q40.57 46.62 40.57 45.15L40.57 45.15Q40.57 42.21 42.79 40.50Q45.01 38.78 48.97 38.78L48.97 38.78Q50.47 38.78 51.75 38.99Q53.03 39.20 53.94 39.64Q54.85 40.08 55.37 40.71Q55.90 41.34 55.90 42.18L55.90 42.18Q55.90 42.98 55.49 43.59Q55.09 44.21 54.57 44.63L54.57 44.63Q53.76 44.07 52.43 43.68Q51.10 43.30 49.53 43.30L49.53 43.30Q47.85 43.30 47.04 43.82Q46.24 44.35 46.24 45.15L46.24 45.15Q46.24 45.85 46.76 46.22Q47.29 46.59 48.41 46.97L48.41 46.97L50.30 47.60Q51.94 48.16 53.18 48.81Q54.43 49.46 55.27 50.28Q56.11 51.10 56.53 52.17Q56.95 53.24 56.95 54.60L56.95 54.60Q56.95 56.07 56.37 57.28Q55.79 58.49 54.66 59.36Q53.52 60.24 51.85 60.73Q50.19 61.22 48.02 61.22L48.02 61.22Q46.41 61.22 45.05 60.96Q43.68 60.69 42.68 60.20Q41.69 59.71 41.11 59.00Q40.53 58.28 40.53 57.37L40.53 57.37Q40.53 56.42 41.07 55.79Q41.62 55.16 42.28 54.78L42.28 54.78Q43.23 55.55 44.64 56.14Q46.06 56.74 47.85 56.74ZM74.76 55.34L74.76 55.34Q74.34 55.69 73.68 55.90Q73.01 56.11 72.17 56.11L72.17 56.11Q71.05 56.11 70.30 55.83Q69.55 55.55 69.30 54.85L69.30 54.85Q68.18 51.59 67.40 49.44Q66.61 47.29 66.15 45.71L66.15 45.71L66.01 45.71Q65.91 47.88 65.84 49.69Q65.77 51.49 65.72 53.20Q65.66 54.92 65.59 56.67Q65.52 58.42 65.42 60.52L65.42 60.52Q65.03 60.66 64.39 60.78Q63.74 60.90 63.04 60.90L63.04 60.90Q61.67 60.90 60.90 60.43Q60.13 59.96 60.13 58.80L60.13 58.80Q60.13 58.14 60.19 56.97Q60.24 55.79 60.33 54.27Q60.41 52.75 60.54 51.00Q60.66 49.25 60.78 47.45Q60.90 45.64 61.01 43.88Q61.11 42.11 61.22 40.60L61.22 40.60Q61.50 40.22 62.36 39.75Q63.21 39.27 64.75 39.27L64.75 39.27Q66.40 39.27 67.34 39.80Q68.29 40.32 68.78 41.51L68.78 41.51Q69.16 42.46 69.58 43.63Q70.00 44.80 70.42 46.03Q70.84 47.25 71.25 48.46Q71.65 49.67 72.00 50.68L72.00 50.68L72.17 50.68Q73.15 47.60 74.13 44.72Q75.11 41.83 75.85 39.87L75.85 39.87Q76.34 39.62 77.09 39.45Q77.84 39.27 78.75 39.27L78.75 39.27Q80.33 39.27 81.27 39.73Q82.22 40.18 82.39 41.06L82.39 41.06Q82.53 41.76 82.71 43.19Q82.88 44.63 83.06 46.48Q83.23 48.34 83.41 50.39Q83.58 52.43 83.72 54.34Q83.86 56.25 83.97 57.82Q84.07 59.40 84.11 60.27L84.11 60.27Q83.58 60.59 82.99 60.75Q82.39 60.90 81.48 60.90L81.48 60.90Q80.33 60.90 79.51 60.48Q78.68 60.06 78.61 58.84L78.61 58.84Q78.37 54.78 78.28 51.40Q78.19 48.02 78.09 45.85L78.09 45.85L77.91 45.85Q77.49 47.32 76.71 49.56Q75.92 51.80 74.76 55.34Z%22></path></svg>"/>
<meta charset="utf-8">
<title>OSM Test</title>
<meta name="description" content="OSM Test">
<meta name="author" content="gonatan">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
crossorigin=""/>
<style>
body {margin: 0;}
#map {height: 1100px;}
</style>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
crossorigin=""></script>
</head>
<body>
<div id="map"></div>
<script>
// tiles
var tileUrl = 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
// tileUrl = 'https://a.tile.opentopomap.org/{z}/{x}/{y}.png';
var tileOptions = {
attribution: '',
minZoom: 7,
maxZoom: 10,
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
};
var tileLayer = L.tileLayer(tileUrl, tileOptions);
// marker cluster
var markerClusterGroup = L.markerClusterGroup({maxClusterRadius: 150});
for (var i = 0; i < 1000; i++) {
markerClusterGroup.addLayer(function {
var lon = Number.parseFloat(Math.random() * 7 + 47).toFixed(3); // 47..54
var lat = Number.parseFloat(Math.random() * 9 + 6).toFixed(3); // 6..15
return L.marker([lon, lat]);
}());
}
// map
var centerLng = Number.parseFloat(51 + (8 / 60)).toFixed(3);
var centerLat = Number.parseFloat(10 + (25 / 60)).toFixed(3);
var zoom = 7;
var map = L.map('map').setView([centerLng, centerLat], zoom);
map.addLayer(tileLayer);
map.addLayer(markerClusterGroup);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment