leaflet-overpass-layer
Version:
This is an simple way to bring OSM data as POI overlay on your leaflet Map
83 lines (65 loc) • 3.02 kB
HTML
<html>
<head>
<title>Leaflet OverPass Layer demo page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.5.1/dist/MarkerCluster.css"
integrity="sha512-mQ77VzAakzdpWdgfL/lM1ksNy89uFgibRQANsNneSTMD/bj0Y/8+94XMwYhnbzx8eki2hrbPpDm0vD0CiT2lcg=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css"
integrity="sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA=="
crossorigin=""/>
<link rel="stylesheet" href="../dist/OverPassLayer.css" />
<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.5.1/dist/leaflet.markercluster.js"
integrity="sha512-+Zr0llcuE/Ho6wXRYtlWypMyWSEMxrWJxrYgeAMDRSf1FF46gQ3PAVOVp5RHdxdzikZXuHZ0soHpqRkkPkI3KA=="
crossorigin=""></script>
<script src="../dist/OverPassLayer.bundle.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var attr_osm = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
attr_overpass = 'POI via <a href="https://www.overpass-api.de">Overpass API</a>';
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: [attr_osm, attr_overpass].join(', ')
});
var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(44.82921, -0.5834), 15);
var opl = new L.OverPassLayer({
debug: true,
endPoint: 'https://lz4.overpass-api.de/api/',
query: 'node({{bbox}})["amenity"="post_box"];out;',
minZoomIndicatorOptions: {
position: 'topright',
minZoomMessage: 'Current zoom level: CURRENTZOOM - All data at level: MINZOOMLEVEL'
},
onSuccess: function (data) {
var markerClusterGroup = L.markerClusterGroup();
data.elements.forEach(function (overpassResult) {
markerClusterGroup.addLayer(L.marker([ overpassResult.lat, overpassResult.lon ]));
});
map.addLayer(markerClusterGroup);
},
});
map.addLayer(opl);
</script>
</body>
</html>