CODEWITHSUNDEEP
javascriptopenstreetmap
santa
santa

Reputation: 12512

Fit boundaries within map

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");

Upvotes: 2

Views: 219

Answers (1)

emptyhua
emptyhua

Reputation: 6692

Zoom level can be calculated by _getBoundsCenterZoom()

<html>
<head>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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>

Upvotes: 5

Related Questions