leaflet-overpass-layer
Version:
This is an simple way to bring OSM data as POI overlay on your leaflet Map
60 lines (49 loc) • 1.92 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="../dist/OverPassLayer.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
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'
}
});
map.addLayer(opl);
</script>
</body>
</html>