1

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.

  • Can you be more specific? Do you want the icons to change size on zoom? This is not what icons do - they keep the same size regardless of map scale. As opposed to say a L.circleMarker which has a fixed size relative to the map that is maintained at each zoom level. – toms Jan 19 '15 at 17:08
  • Hi Tom, thanks for your help. Okay, I'll try to be more clear. I also changed the code. I use icons coming from Font-Awesome. They have this icon in different resolutions. What I want the map to react is like if zoom=13 use icon 16*16 pixel; if zoom=10 use icon 24*24 and so on. Is that possible? – hoge6b01 Jan 20 '15 at 10:54
2

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>
  • Well, I cannot get the map up with the code above. As I am not a developer, I cannot tell you what's going wrong. But the map stops working when adding the map.on part to the script. Any suggestion? – hoge6b01 Jan 25 '15 at 10:18
  • Apologies - there was a syntax error in that part of the code (missing closing parentheses). I've included code for the entire working page. Just save locally as index.html and navigate to the file in your browser. – toms Jan 25 '15 at 18:52
  • one additional note, the console really helps troubleshoot errors like this. F12 in most browsers. – toms Jan 25 '15 at 18:54
  • thanks. The example is working now. But I still recognize a problem. The icons only change once and are not changing back, e.g. when zoom is < 14. Or sometimes it shows bigger and smaller icons on the map at the same time. But, I guess your example is a workaround that will not work in my specific case. The code I posted above is just an example code. – hoge6b01 Jan 26 '15 at 9:00
  • My real code is a bit bigger. I am using a L.control.layers with three overLayers. Now your workaround is to dublicate the var icons and depending on zoom level active one or the other. But that's not very usefull in combination with L.control.layers. Wouldn't it be possible to change the icon's size via CSS or something? BR – hoge6b01 Jan 26 '15 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.