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

Improve this question
3
  • You have a lot of break lines in your code that breaks it ...
    – Léo M
    Commented Oct 10, 2019 at 14:09
  • 4
    And what you're looking for is called a permalink, here's a plugin for leaflet: github.com/MarcChasse/leaflet.Permalink
    – Léo M
    Commented Oct 10, 2019 at 14:44
  • Thanks, that was a key word
    – Geographos
    Commented Oct 10, 2019 at 15:36

2 Answers 2

Reset to default
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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/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>
Improve this answer
2
  • You used localhost, to which I have no access
    – Geographos
    Commented Oct 10, 2019 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
    Commented Oct 10, 2019 at 15:38
1

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];
Improve this answer

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.