Fit boundaries within map

user_434218 0
Viewed 175

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: \'&copy; <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");
openstreetmap javascript
1 Answers

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: '&copy; <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>

user_51898990
Related