Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

54
Vistas
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");
7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos