I want to create a panTo -function. When I click a link the map pans to the coordinates. But im not sure how to pass the value to the function. I'm starting with giving the link the Pointfield (pt) value like this:

<a href="#" class="marker" value="{{ mymodel.pt }}">Link</a>

Then I've been trying this:

$("#dialog").on("click", ".marker", function(e) {
    e.preventDefault();
    map.panTo($(this).attr("value"));
    });

That didn't work. I think it's a scope-issue where the function cant read the 'map' variable because it's not under the initial map script.

So my next idea is to create a "panTo"- function and place it under the inital map script (which would be the right scope) and call that function from the click event instead. Not sure it would work but Im wondering how to pass it the "value" from the link?

Thanks for your answers!

I want to create a panTo -function. When I click a link the map pans to the coordinates. But im not sure how to pass the value to the function. I'm starting with giving the link the Pointfield (pt) value like this:

<a href="#" class="marker" value="{{ mymodel.pt }}">Link</a>

Then I've been trying this:

$("#dialog").on("click", ".marker", function(e) {
    e.preventDefault();
    map.panTo($(this).attr("value"));
    });

That didn't work. I think it's a scope-issue where the function cant read the 'map' variable because it's not under the initial map script.

So my next idea is to create a "panTo"- function and place it under the inital map script (which would be the right scope) and call that function from the click event instead. Not sure it would work but Im wondering how to pass it the "value" from the link?

Thanks for your answers!

• javascript
• jquery
• django
• dictionary
• leaflet

• Asking for clarification: do you want your map to have an animated pan to the location or to simply view a location based on a button? The former hasn't been a supported feature since the early versions of leaflet, but the latter is definitely doable. – geraldarthur Commented Feb 13, 2014 at 16:50
• hey thanks for your answer! It's not so important which one. What i want is to be able to list some objects from my database in a dialog box with the map in the background. Each object has a link and when you click it the map goes to the coordinates. Something like that. – user3199840 Commented Feb 13, 2014 at 16:56

1 Answer 1

You can add navigation to your map by utilizing data attributes in your HTML. Save the latitude,longitude and zoom to something like data-position and then call those values with some JavaScript when the user clicks on the anchor tag. Here's some code to illustrate.

<div id="map">
    <div id="map-navigation" class="map-navigation">
        <a href="#" data-zoom="12" data-position="37.7733,-122.4367">
            San Francisco
        </a>
    </div>
</div>

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.cloudmade./BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.">CloudMade</a>'
            }).addTo(map);

document.getElementById('map-navigation').onclick = function(e) {
    var pos = e.target.getAttribute('data-position');
    var zoom = e.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var loc = pos.split(',');
        var z = parseInt(zoom);
        map.setView(loc, z, {animation: true});
        return false;
    }
}
</script>