I have a little problem with OpenLayers 3. I have the following script:
var map = new ol.Map({
view : new ol.View({
center : [5.611155, 52.238879],
projection : 'EPSG:4326',
zoom : 8.5,
minZoom : 8.5,
maxZoom : 12.5
}),
layers : [
new ol.layer.Tile({
source : new ol.source.OSM()
}),
],
target : 'map'
});
This should, if I am not mistaken, show a map centred on a place in The Netherlands. But instead of showing a map, I only see blue. Even if I set the zoom to 1, there is no world to see.
The problem doesn't seem to be there if I remove the projection attribute from the view. But then of course I should give all coordinates in another coordinate system, which is not possible because I depend on other systems as well.
When I removed the projection attribute from the view attribute and loaded a GeoJSON file like this:
new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:4326',
url: 'data/map.geojson'
})
})
It should place a layer on top of The Netherlands, but instead the GeoJSON was shown somewhere in Africa.
Can someone help me?
Openstreetmap has a different projection than OL3. OSM uses EPSG:900913 and when you uses it as background you have to use it as your main projection.
This will work for the first part of your problem:
var centerpos = [5.611155, 52.238879]; // Your original position in LatLon
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
var map = new ol.Map({
view : new ol.View({
projection : 'EPSG:900913', // OSM projection
center : newpos,
zoom : 8.5,
minZoom : 8.5,
maxZoom : 12.5
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target : 'map'
});
For your last problem about GeoJson I think it will work because you set the projection (eventually set the projection in the source), but I haven't tested it.
Related
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.
I followed the example from the openlayers book to add a static image on top of an osf layer. It works, but my image (256x256) is displayed as a rectangle. I tried around with the coordinates for the projection and checked out other posts here on, but I can't get my head around it why the image is not displayed as a square:
// Create map
var map = new ol.Map({
target: 'map', // The DOM element that will contains the map
renderer: 'canvas', // Force the renderer to be used
layers: [
// Add a new Tile layer getting tiles from OpenStreetMap source
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
// Create a view centered on the specified location and zoom level
view: new ol.View({
center: ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
// Create an image layer
var imageLayer = new ol.layer.Image({
opacity: 0.75,
source: new ol.source.ImageStatic({
attributions: [
new ol.Attribution({
html: ''
})
],
url: 'https://placebear.com/256/256',
imageSize: [256, 256],
projection: map.getView().getProjection(),
imageExtent: ol.extent.applyTransform(
[0, 0, 16.3725, 48.208889], ol.proj.getTransform("EPSG:4326", "EPSG:3857"))
})
});
map.addLayer(imageLayer);
ol.source.ImageStatic was made to put a georeferenced image (e.g. a scan of a historic map) on a map. Is this what you have in mind? If you just want to display an image and anchor it to a location on the map, you'd better use ol.Overlay or an ol.layer.Vector with a feature with an ol.style.Icon.
That said, your image will only be displayed as square if the imageExtent set on your ol.source.ImageStatic results in a square on the projected map view.
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());
});
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.
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....