CODEWITHSUNDEEP
javascriptopenlayerslatitude-longitude
Patrick Hillert
Patrick Hillert

Reputation: 2439

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

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.

Upvotes: 16

Views: 34318

Answers (3)

the_skua
the_skua

Reputation: 1291

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:

map.getView().calculateExtent(map.getSize())

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

Upvotes: 29

swatchai
swatchai

Reputation: 18772

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>

Upvotes: 10

hyperknot
hyperknot

Reputation: 13976

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')
}

Upvotes: 1

Related Questions