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.

Improve this question
2
  • 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
    Commented Jan 19, 2015 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
    Commented Jan 20, 2015 at 10:54

1 Answer 1

Reset to default
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>
Improve this answer
7
  • 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
    Commented Jan 25, 2015 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
    Commented Jan 25, 2015 at 18:52
  • one additional note, the console really helps troubleshoot errors like this. F12 in most browsers.
    – toms
    Commented Jan 25, 2015 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
    Commented Jan 26, 2015 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
    Commented Jan 26, 2015 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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