Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate OpenLayers3 map via javascript - onload and via function

I have created an open layers 3 maps that can be rotated.

How can I change the map's angle on load or via javascript? In some cases I would like the map to load with South up (180) or change the map's angle via a javascript function.

Current work to initialize the map is below or at this fiddle

var map = new ol.Map({
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()]),
layers: [
new ol.layer.Tile({
    source: new ol.source.TileJSON({
        url: 'http://api.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul.jsonp',
        crossOrigin: 'anonymous'
    })
})],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
    center: ol.proj.transform([-120.0469, 45.6782], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
})

});

like image 307
jotamon Avatar asked Apr 24 '26 10:04

jotamon


1 Answers

I figured it out by using setRotation()

On load you could update the map rotation with

var view2D = map.getView().getView2D(); 
//get the current radians of the map's angle
var currentRadians=map.getView().getView2D().getRotation();     
//add .5 radians to the map's current getRotation() value
view2D.setRotation(currentRad.+1.5);
like image 93
jotamon Avatar answered Apr 26 '26 01:04

jotamon



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!