[GIS] Changing marker size by zoom in Leaflet

arcgis-serveresri-leafletleaflet

I get stuck with changing my marker's size when zoom changes in my Leaflet code.
It's a simple map with a metro stations overlay coming from an ArcGIS Server. The markers are coming from that same source.

The code is as follow:

<html>

<head>
    <meta charset=utf-8 />
    <title>Simple FeatureLayer</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.5/esri-leaflet.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>
        var map = L.map('map').setView([51, 7], 13);

        L.esri.basemapLayer('Streets').addTo(map);

        var iconFs = L.icon({
            iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
            iconSize: [48, 48],
            iconAnchor: [20, 20]
        });



        L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
            useCors: false,
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                    icon: iconFs
                });
            }
        }).addTo(map);
    </script>

</body>

</html>

I would be very glad if someone's got an idea to solve it.

Best Answer

you can add a zoom listener to your map to change the icons at different zoom levels. Here is a simplified example. You can change the conditions and icons to fit your project:

<html>
<head>
    <meta charset=utf-8 />
    <title>Simple FeatureLayer</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.5/esri-leaflet.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>   

        var map = L.map('map').setView([51, 7], 13);

        L.esri.basemapLayer('Streets').addTo(map);

        var iconFs = L.icon({
            iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
            iconSize: [48, 48],
            iconAnchor: [20, 20]
        });

        var iconFs2 = L.icon({
            iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
            iconSize: [25, 25],
            iconAnchor: [10, 10]
        });

        var icons = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
            useCors: false,
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                    icon: iconFs
                });
            }
        }).addTo(map);

        var icons2 = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
            useCors: false,
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                    icon: iconFs2
                });
            }
        });

        map.on('zoomend', function() {
            var currentZoom = map.getZoom(); 
            if (currentZoom > 15) { 
                map.removeLayer(icons);
                map.addLayer(icons2);
            }
        })

    </script>
</body></html>
Related Question