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.

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.

Openlayers3 with custom tile server

I've got a problem with the latest openlayers3 beta. I'm trying to use custom tile server using xyz layer. The thing is the tiles are re not rendered for some reason. Using firebug I can see that the tile requests are send and the images are fetched succesfuly, though they do not show up...
Everything works in chrome however.
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xx.xx.xx.xx:33333/osm/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
]),
target: 'map',
layers: [baseLayer],
view: new ol.View2D({
center: ol.proj.transform([21.999529, 50.041682], 'EPSG:4326', 'EPSG:3857'),
zoom: 13
})
});

Can you try putting a minus before your tile url's y value?
var baseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xx.xx.xx.xx:33333/osm/{z}/{x}/{-y}.png'
})
});
EDIT: Wow... Super old question... My bad, but maybe someone can use this answer anyway....