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>
It looks like I found a solution:
An example is based here:
https://stackoverflow.com/questions/19658564/leaflet-control-geojson-layers-by-zoom-level
and also here
Load or display differents geojson data on zoom level for leaflet maps
which leads to the live example here:
http://jsfiddle.net/expedio/kuovyw8m/
regarding to my code I would like to display the snippet below:
map.on('zoomend', function (e) {
zoom_based_layerchange();
});
function clean_map() {
map.eachLayer(function (layer) {
if (layer instanceof L.GeoJSON)
{
map.removeLayer(layer);
}
//console.log(layer);
});
}
function zoom_based_layerchange() {
//console.log(map.getZoom());
var currentZoom = map.getZoom();
switch (currentZoom) {
case 8: //refers to the zoom level: 8
clean_map();
sitis.addTo(map); //show "sitis" geoJSON layer
break;
case 12:
//clean_map(); - removed, as I don't need to remove the layer visible at lower zoom level
church.addTo(map); //show "church" geoJSON layer
break;
default:
// do nothing
break;
}
}
Best Answer
This looks to be a known bug (#1) of Leaflet.PolylineOffset plugin.
It is triggered by closely positioned vertices in your polyline, so the effect is more obvious at low zoom when vertices get displayed even closer one to each other.
For example, it is easy to make the "working" example buggy by introducing an extra point in the middle, close to an existing one. If you zoom in, the bug disappears.
https://jsfiddle.net/rrq81rw9/29/
You can also make your "non working" example even buggier by simply zooming out a lot (since you do not have minZoom, you can zoom out far enough).
We can suspect the root cause being pixel rounding of vertices position, which makes the plugin having difficulty in guessing the correct line segment orientation.
As for solving this issue, there is a PR submitted (#13), but not merged yet unfortunately. Feel free to heads up on that PR page or on the issue to get it noticed again.
In the meantime, you can use the PR author fork:
https://github.com/BartWaardenburg/Leaflet.PolylineOffset
Updated JSFiddle of "non working" example, now much better with the fork:
https://jsfiddle.net/rrq81rw9/30/