Leaflet zoom onto location using link and map.setView

Question

I've run into a little problem regarding the awesome leaflet map. I want to display a map with a couple of markers on it. Below this map I want to place some content, including a link once in a while that, when clicked, will move and zoom to one of those markers. I found some code on Stack Overflow that supposedly should do the trick, but it doesn't work for me and I cannot figure out where I've taken a wrong turn.

This is the code I'm using for the map and zooming onclick:

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
    var map = L.map('map').setView([48.45653, 8.90068], 8);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-i86knfo3'
    }).addTo(map);



    var circle = L.circle([48.06591, 7.67221], 80, {
        color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.3
    }).addTo(map)
        .bindPopup("Popup").openPopup();

    L.marker([48.06633, 7.67268]).addTo(map)
        .bindPopup("<b>Popup</b><br />Text");
    L.marker([48.8098, 9.44223]).addTo(map)
        .bindPopup("<b>Popup</b><br />Text");

    document.getElementById('map-navigation').onclick = function(abc) {
        var pos = abc.target.getAttribute('data-position');
        var zoom = abc.target.getAttribute('data-zoom');
        if (pos && zoom) {
            var locat = pos.split(',');
            var zoo = parseInt(zoom);
            map.setView(locat, zoo, {animation: true});
            return false;
        }
    }       

    var popup = L.popup();

</script>

This is the html I'm using as a link:

<div id="map">
    <div id="map-navigation" class="map-navigation">
        <a href="#" data-zoom="12" data-position="48.06633,7.67268">
            Link
        </a>
    </div>
</div>

YaFred · Accepted Answer · 2014-08-16T13:59:12.820

5

You have to put your div containing the links outside the div for the map, like so

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

<div id="map-navigation" class="map-navigation">
    <a href="#" data-zoom="12" data-position="48.06633,7.67268">
     Link
     </a>
</div>

Then it works fine: http://jsfiddle.net/FranceImage/ejty9tu9/

edited Aug 16 '14 at 13:59

answered Aug 16 '14 at 12:55

YaFred

9,698
3
28
40

This solved the issue. Thanks a lot! On another note - is there a way to tag the popups and open a specific popup upon zooming in on clicking the link? – Felipe Chodid Aug 16 '14 at 13:56
You can keep the markers or the popups in a javascript array. http://stackoverflow.com/questions/24728245/leaflet-open-specific-marker-popup-on-button-click – YaFred Aug 16 '14 at 14:04
Thanks a lot again. I had it running in JSFiddle and on the server with one example. Now that I included more than one marker the script crashed and the map doesn't show up anymore. I can't find the reason, even if I comment out all the extra bits and only leave the map parts in it doesn't work. Would you mind having a quick look at it, maybe you are able to see the mistake. http://jsfiddle.net/znofp4q9/1/ – Felipe Chodid Aug 16 '14 at 16:10

Leaflet zoom onto location using link and map.setView

1 Answers1