TransWikia.com

OpenLayers zoom on a collection of points

Geographic Information Systems Asked by jnewman on June 14, 2021

I’m new to OpenLayers, but I have a working map with 5 points based on GPS coords working. however, it’s not zooming to the extents of the points. Wondering what I’ve done wrong (could very well be a typo, JavaScript is not my forte…). the "adjust_map_zoom" function is where my problem lies, i believe.

The map is generated, the points are all there and the map is initially set to the mapDefaultZoom setting. If I change that initialize setting, the zoom changes. however, as the points spread apart and then come back together, the zoom doesn’t change to fit their new boundaries.

var map;
var mapLat = <?php echo $xcenter; ?>;
var mapLng = <?php echo $ycenter; ?>;
var mapDefaultZoom = 12;

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
        new ol.layer.Tile({
            target: "tile",
            source: new ol.source.OSM({
                  url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
            })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([mapLng, mapLat]),
        zoom: mapDefaultZoom
    })
  });
}

function add_map_point(lat, lng) {
  var vectorLayer = new ol.layer.Vector({
    target: "points",
    source:new ol.source.Vector({
      features: [new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
        })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
      })
    })
  });

  map.addLayer(vectorLayer);
}


function adjust_map_zoom(x1, y1, x2, y2) {
  map.getView().fit(ol.proj.transformExtent([ x1, y1, x2, y2 ], 'EPSG:COORDS', 'EPSG:MAP'), {size:map.getSize(), maxZoom:18});
}

if i change the adjust_map_zoom code to

map.getView().fit(source.getExtent(), {size:map.getSize(), maxZoom:16});

or even

map.getView().fit(source.getExtent(), map.getSize());

the zoom does not change at all.

Could someone point out my mistake please? the bulk of the code was copied from online examples.

One Answer

If you reference some variable, it has to be defined in the scope you are referencing it. Solution here would be to define vectorLayer as a global variable so that you can later reference it anywhere.

Also you have to define/create vector layer only once, and then add features to this layer, otherwise each point will have it's own layer.

So code could then look something like this:

var vectorLayer = new ol.layer.Vector({
  target: "points",
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: "fraction",
      anchorYUnits: "fraction",
      src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
    })
  })
});

map.addLayer(vectorLayer);

function add_map_point(lat, lng) {
  var source = vectorLayer.getSource();
  var pointFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
  });
  source.addFeature(pointFeature);
}

You can then zoom to the layer extent with:

map.getView().fit(vectorLayer.getSource().getExtent(), {
  size: map.getSize(),
  maxZoom: 16
});

Correct answer by TomazicM on June 14, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP