leaflet-overpass-layer icon indicating copy to clipboard operation
leaflet-overpass-layer copied to clipboard

Published 20 hours ago • verified publisher icon GuillaumeAmat

Leaflet bad performance with OverPassLayer Markers

Open ezzcodeezzlife opened this issue 4 years ago • 0 comments

Im currently encountering bad performance with my Leaflet Map while using the Overpass Library, especially when moving around on the Map although there are not a lot of Markers (less than 100). This is still a problem with limited Zoom Level to 13.

This is a simple example

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="">
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <script src="OverPassLayer.bundle.js"></script> 
    </head>
    <body>
        <div id="map" style="width: 100%; height: 90%; position: relative; outline: none;"></div>

        <script>
            var tiles = L.tileLayer('https://a.tile.openstreetmap.de/{z}/{x}/{y}.png', {
            minZoom: 15,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),
            latlng = L.latLng(52.5207,13.4093);

            var map = L.map('map',{center: latlng, 
                        zoom: 17, 
                        layers: [tiles],
                        maxZoom: 18,
                        preferCanvas: false,
                        });

            var icon = new L.Icon({
                iconUrl: 'leaf-green.png', //https://leafletjs.com/examples/custom-icons/leaf-green.png
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

            var opl = new L.OverPassLayer({
                query: 'node["amenity"="bench"]({{bbox}});out;', //show all Benches on Map
                markerIcon: icon,
                minZoom: 13,
            });

            map.addLayer(opl);
        </script>
    </body>
</html>

Maybe markercluster can be a solution to this, but how do I add Positions from Overpass to a markercluster Layer?

Are there other solutions to this?

ezzcodeezzlife avatar Feb 06 '21 21:02 ezzcodeezzlife