Leaflet – Creating a Map with Coordinates Included in the URL Path

coordinatesjavascriptleafleturl

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

Best Answer

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>
Related Question