0

I am trying to implement the dynamic coordinates in the URL path in the leaflet map as per the Google Maps example.

I found some examples:

https://stackoverflow.com/questions/15919227/get-latitude-longitude-as-per-address-given-for-leaflet

Dynamically set mapview based on the overlay feature of L.geoJson coordinates in Leaflet

from where I tried:

    $.when(counties).done(function(){
    var map = L.map('mapid')
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? 
    access_token={accessToken}', {
attribution: 'Map data &copy; <a 
  href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a   
  href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a     href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 21,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);

but my map dissapeared.

Console says:

Uncaught SyntaxError: Unexpected end of input

Is there a way to make my URL dynamic likewise in the BBox case?

http://bboxfinder.com/#0.000000,0.000000,0.000000,0.000000 https://github.com/aaronr/bboxfinder.com

enter image description here

1

You're looking for a simple query string, here is a working example. I took the code below and called it querystring.html, and passes it coordinates in the url. The maps first view is from N. Adams, MA, and the query string zooms the map to London.

Only issue you have to consider is if the query string is not used, null.

http://localhost/querystring.html?51.5263,-0.0384,51.4836,-0.1414

<!DOCTYPE html>
<html>
<head>
    <title>query string</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

</head>
<body>

<div id="mapdiv" style="width: 600px; height: 400px;"></div>
<script>

    var map = L.map('mapdiv').setView([42.697765, -73.108005], 14); //N Adams< Mass
    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    var queryString = window.location.search;

        queryString = queryString.substring(1);
        var coords = queryString.split(",");
        map.fitBounds([[coords[0],coords[1]],[coords[2],coords[3]]]); //London

</script>
</body>
</html>
  • You used localhost, to which I have no access – Mariusz Krukar Oct 10 at 15:35
  • 1
    That's just the "server" I put the page on. On a windows PC, start IIS, then put the page in c:\inetpub\wwwroot which "is" localhost. – Bill Chappell Oct 10 at 15:38
0

It works!

var mappos = L.Permalink.getMapLocation();
var map = L.map('mapid', {
center: mappos.center,
zoom: mappos.zoom
});
L.Permalink.setup(map);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a   href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a   href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 21,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);

Once you enter to the js file leaflet.permalink.js, you can change your default coordinates at the very top (lines 3-6):

  getMapLocation: function (zoom, center) {
    'use strict';
    zoom = (zoom || zoom === 0) ? zoom : 16;
    center = (center) ? center : [52.26869, 0.11034];

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.