Uso OSM para mostrar los límites del condado. Funciona bien la mayor parte del tiempo, pero en algunos casos los condados son más grandes y no caben en el mapa.
¿Cómo ajusto el nivel de zoom antes de iniciar el renderizado?
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");El nivel de zoom se puede calcular mediante _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>