Develop Reference

Why is my openlayers map disappearing when I add an extent constraint?

I am new to openlayers, and have tried to teach myself what I can through the tutorials.
My map works fine until I add an extent to the view. As soon as I do that, the map disappears. (zoom controls remain).
I have searched the documentation for help with this but no luck.
Here is my code:
<div id="map" class="map"></div>
<script type="text/javascript">
const extentNESW = [ 4422340.708467, -10578604.167351, 3169996.437043, -9735019.922400 ]
const extentWSEN = [-9735019.922400, 3169996.437043, -10578604.167351, 4422340.708467 ]
const centerLonLat = [ -10160621.295892, 3903791.908581 ]
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: (centerLonLat),
zoom: 10,
extent: extentWSEN,
})
});
</script>
If i remove the line with extent, the map works again. What gives?

It seems that your extent array has wrong order of coordinates. The order has to be:
[minX, minY, maxX, maxY]
More specifically, in your case, you have swapped minX and maxX. Replace your array with the following:
const extentWSEN = [-10578604.167351, 3169996.437043, -9735019.922400, 4422340.708467 ];

How do I automate view.animate in OpenLayers5?

I have a list of coordinates I want my code to pan through. I can place view.animate and do it once to pan from my current center to the first coordinate but not to keep cycling through the list. Any ideas? I got the idea from this https://openlayers.org/en/latest/examples/animation.html.
var coordinates = [london, moscow, istanbul, rome, bern]; (they have their coordinates)
var view = new ol.View({
center: istanbul,
zoom: 4
})
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
loadTilesWhileAnimating: true,
view: view
});
coordinates.forEach(function(element) {
setTimeout(view.animate({
center: element,
duration: 2000,
}), 10000);
});

You have a basic error in that setTimeout will be called repeatedly in quick succession, with each one calling view.animate after a 10000 ms delay - the map will become overloaded with animate requests.
Here is a working example using setInterval which ensures that panToNextlocation is called only once per 3000ms
https://stackblitz.com/edit/ol-animation-between-points

Layers wont show above basemap using OpenLayers 5 + OpenWeatherMap

I am using OpenLayers and OpenWeatherMap Api to load layers above the openlayers basemap. The basemap loads correctly but layers such as Precipitation and Temperature wont show above the basemap. I have checked that the values are passing correctly through the url
I have tried setting the opacity of the layers and changing the visible attribute to true for the layers but the issue remains
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([lon,lat]), // i am getting lon and lat from json
zoom: 5
})
});
var temp_over = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://tile.openweathermap.org/map/temp_new/5/' + lat +'/'+lon+'.png?appid='+appid,
}),
});
map.updateSize();
map.addLayer(temp_over);
The layer of temperature should have loaded above the basemap but it doesn't load.

OpenLayers 3.13: issue with bindTo by linking two views

I'm new in using OpenLayers. I'm trying to do some exercises with version 3.0 and 3.13.
I have to link two views: the second map respond to changes in the first map, but zoomed out three times; when the first map is panned or zoomed, the second map should center on the same location and stay zoomed out in three levels.
I'm using the following code that works quite well on version 3.0, but not on v3.13: the console prints Uncaught TypeError: view2.bindTo is not a function.
In another example I use map2.bindTo('view', map); on v3.13, without any issue. What is the difference?
EDIT
I'm wrong, I obtain the same issue.
There is no bindTo anymore (see the comment by Jonatas Walker for details).
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6,
});
var view2 = new ol.View({
center: london,
zoom: 3,
});
var map = new ol.Map({
target: 'map1',
layers: [layer],
view: view,
//renderer: 'dom'
});
var map2 = new ol.Map({
target: 'map2',
layers: [layer],
controls: new ol.Collection(),
interactions: new ol.Collection(),
view: view2
});
view2.bindTo('center', view);
view.on('change:resolution', function(){
var zoom = this.getZoom();
if (zoom >= 3 && zoom <= 18)
view2.setZoom(this.getZoom()-3);
else view2.setZoom(this.getZoom());
});

Since PR #3472 there's no bindTo method and you can achieve this center binding with something like:
view.on('change:center', function(evt){
view2.setCenter(view.getCenter());
});

Open Layer 3 blank fields when dragging map, how to restrict it

I don't want that the users see the blank field when dragging the map. I want restrict it. I didn't find any great resolution.
my map code:
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'osm' }) }), vectorLayer],
target: document.getElementById('map'),
controls: ol.control.defaults().extend([
new ol.control.ScaleLine(),
new ol.control.ZoomSlider()
]),
view: new ol.View({
center: [-6217890.205764902, -1910870.6048274133],
zoom: 3,
maxZoom: 20
})
});
Problem:

There are a couple of things that you could do:
Set a background color or image on your map container like in the examples to make the white gaps look nicer.
.map {
...
background: url(map-background.jpg) repeat;
}
Set the minZoom property on the view to prevent the map from being zoomed out too far. But on large screens users might still see gaps.
view: new ol.View({
...
minZoom: 4
})
Or restrict the view extent to the tile boundaries (ol.proj.get('EPSG:3857').getExtent()). This is not yet included in OpenLayers, but you'll find a work-around in this question.