Add usage example with Leaflet.markercluster (#40)

GuillaumeAmat · Oct 16, 2021 · 8368092 · 8368092
1 parent 8252787
commit 8368092
Showing 1 changed file with 82 additions and 0 deletions.
diff --git a/demo/example-with-leaflet-markercluster.html b/demo/example-with-leaflet-markercluster.html
@@ -0,0 +1,82 @@
+<!DOCTYPE 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 &copy; <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>