I use OSM to display boundaries of the county. It works most of the time just fine, but in some cases the counties are larger and don't fit in the map.
How do I adjust zoom level before start the rendering?
var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);
map.attributionControl.setPrefix();
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: \'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors\'
}).addTo(map);
function drawCountyBoundary(county, state) {
url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
fetch(url).then(function(response) {
return response.json();
})
.then(function(json) {
map.flyTo([json[0].lat, json[0].lon], 9);
setTimeout(function(){
geojsonFeature = json[0].geojson;
L.geoJSON(geojsonFeature).addTo(map);
}, 1900);
});
}
drawCountyBoundary("Cibola", "NM");
Zoom level can be calculated by _getBoundsCenterZoom()
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
</head>
<body>
<div id="mapCnty" style="width:500px;height:500px;"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);
map.attributionControl.setPrefix();
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function drawCountyBoundary(county, state) {
url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
fetch(url).then(function(response) {
return response.json();
})
.then(function(json) {
let geojsonFeature = json[0].geojson;
let layer = L.geoJSON(geojsonFeature);
// calc the zoom level
let z = map._getBoundsCenterZoom(layer.getBounds());
// fly duration, unit: second
let flyDuration = 1.5;
map.flyTo([json[0].lat, json[0].lon], z.zoom, {duration:flyDuration});
setTimeout(function(){
layer.addTo(map);
}, flyDuration*1000);
});
}
drawCountyBoundary("Cibola", "NM");
</script>
</body>
</html>