How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?

Question

I'm trying to find some hints where I should search for this topic but I've nothing found - and I spent many hours on this.

I'm also trying to get the current coordinates out of the current displayed viewport from the OpenLayers map to add only these vectors that are in the current bounding box of the current viewport.

For ol3 see http://stackoverflow.com/questions/22206570/how-do-bounds-work-in-openlayers-3 — Christophe Roussy, May 12 '16 at 11:35

the_skua · Accepted Answer · 2016-07-29T13:32:54.603

27

For OpenLayers 2:

Map.getExtent()

...will return a Bounds, which you can then use to get the lat/long coordinates in any number of ways: http://dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html#OpenLayers.Bounds

Ideally, you'd turn the vectors into Geometry objects and check them against Map.getExtent() using Bounds.intersectBounds() to see if they're in the current viewport.

For OpenLayers 3:

ol.Map.getView().calculateExtent(map.getSize())

...will return an array of coordinates, representing the bounding box of the extent.

edited Jul 29 '16 at 13:32

answered Jan 24 '12 at 16:43

the_skua

1,230
17
30

3

Thanks! That works great. I use it now like this: `this.map.getExtent().toGeometry().toString()` which returns something like `POLYGON((-8852235.9398912 -2760000,11337764.060109 -2760000,11337764.060109 11370000,-8852235.9398912 11370000,-8852235.9398912 -2760000))` – Patrick Hillert Jan 25 '12 at 08:54
I'm a little unfamiliar with GIS, but the numbers -8852235 -2760000,... don't seem like lat/long values? I get similar results when i get the extent of the map. Do the lat/long values come in the ranges of -90/90 and -180/180? – j will Feb 11 '14 at 20:56
This answer helped me solve that problem: http://stackoverflow.com/a/2607145/1359765 – j will Feb 11 '14 at 21:07
Thanks, I think there's a slight typo for openlayers 3, this works for me `map.getView().calculateExtent(map.getSize())` From [this answer](https://gis.stackexchange.com/a/216924) – Davey Jun 11 '17 at 10:07
Use the `transformExtent` function from the original example here: https://openlayers.org/en/latest/examples/layer-extent.html – hyperknot Jul 17 '18 at 20:41

swatchai · Answer 2 · 2022-09-05T20:46:08.397

For openlayers 5.3.

olmap.getView().calculateExtent(olmap.getSize());

Runnable code for openlayers 5.3 follows:

(V6.5.0 has the same API document concerning the use of getView and getSize, the code above should also work with it.)

// import modules
const Map = ol.Map;
const View = ol.View;
const TileLayer = ol.layer.Tile;
const VectorLayer = ol.layer.Vector;
const fromLonLat = ol.proj.fromLonLat;
const OSM = ol.source.OSM;
const VectorSource = ol.source.Vector;
const Overlay = ol.Overlay;
const Style = ol.style.Style;
const Fill = ol.style.Fill;
const Text = ol.style.Text;

// basic base layer: raster
var rasterLayer = new TileLayer({
  source: new OSM()
});

// create main map with a base map
var mapcenter = [100.5330981, 13.7364029];
var olmap = new Map({
  layers: [rasterLayer] /* more layers can be added here, or later steps */ ,
  target: document.getElementById("map1"),
  view: new View({
    center: fromLonLat(mapcenter),
    zoom: 17
  })
});

// add eng-chula marker
const engchula = [100.5330981, 13.7364029];
var marker1 = new Overlay({
  position: fromLonLat(engchula),
  positioning: "center-center",
  element: document.getElementById("marker1"),
  stopEvent: false
});
// 'Eng-chula' label
var engchula1 = new Overlay({
  position: fromLonLat(engchula),
  element: document.getElementById("engchula1")
});
// add overlay(s) to 'olmap'
olmap.addOverlay(marker1);
olmap.addOverlay(engchula1);

// Demo the use of .getSize()
var sizes = olmap.getSize(); //units:pixels; columns x rows
console.log("getSize (pixels): " + sizes); //2 numbers

// get `extent` through getView()
var extent = olmap.getView().calculateExtent(olmap.getSize());
console.log("Extent, LL_x: " + extent[0]); //left
console.log("Extent, LL_y: " + extent[1]); //bottom
console.log("Extent, UR_x: " + extent[2]); //right
console.log("Extent, UR_y: " + extent[3]); //top
/*
Status:ok
*/

#map1 {
  width: 70%;
  height: 500px;
}

#marker1 {
  width: 25px;
  height: 25px;
  border: 2px solid #088;
  border-radius: 10px;
  background-color: firebrick;
  opacity: 0.75;
}

<head>
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>

<body>
  <H3>Openlayers v5.3.0 Web Map with Geojson Data</H3>
  <div id="map1" class="map"></div>
  <i>:</i>
  <p id="p1">Find &quot;<b>Eng_Chula</b>&quot;, then click it.</p>

  <div style="display: none;">
    <!-- Clickable label for Eng-Chula -->
    <a class="overlay" id="engchula1" target="_blank" href="https://www.eng.chula.ac.th/th/">Eng_Chula</a>
    <div id="marker1" title="Marker1"></div>
  </div>

</body>

score 1 · Answer 3 · answered Jul 08 '21 at 07:58

1

Based on the answers here, but if you'd like your results to be in longitude-latitude coordinates.

function getBounds() {
  const extent = olMap.getView().calculateExtent(olMap.getSize())
  return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}

answered Jul 08 '21 at 07:58

hyperknot

13,454
24
98
153

How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?

3 Answers3