[GIS] Pan Panel for ol3

openlayerspan

I've created an ol3 map for a web application. Now, I am trying to create a Pan Panel for this map. I've disabled the dragPan and touchPan (because of external circumstances) and now I want a clickable Pan Bar/Panel like in OpenLayers 2 maps (example: http://dev.openlayers.org/examples/pan-zoom-panels.html). Is there any feature making this possible?

Best Answer

You could add a custom control

http://openlayers.org/en/v3.10.0/examples/custom-controls.html

or even just some simple buttons to realize that.

You can calculcate the bounds and the center and take these coordinates to pan the map to the left,right,top,bottom.

Here is a jsfiddle:

http://jsfiddle.net/expedio/hLzm22um/

Related Solutions

[GIS] Problem in displaying tile images using OpenLayers 3

I've found problem by myself at the end. The reason why it didn't work is because my tiles were created using gdal2tiles and they were created using TMS scheme while examples at http://tileserver.maptiler.com/#nasa/ol3 works only for tiles generated using MapTiler which renders tiles following XYZ schema. Difference between those 2 types is well explained here http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

However, this is code with correct layer definition for TMS tiles

var tms_layer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileUrlFunction: function(coordinate) {
          if(coordinate == null){
            return "";
          } 
          var z = coordinate.a;
          var x = coordinate.x;
          var y = (1 << z) - coordinate.y - 1;
          return 'static/website/NE1_HR_LC/NE1_HR_LC/' + z + '/' + x + '/' + y + '.png';
        },
        extent: extent,
        minZoom: 0,
        maxZoom: 5,
        wrapx: false
      })
})

[GIS] How to dynamically restrict pan extents on an image layer in OpenLayers 3

I save my center when start the map.
Then if user try to move the map on Zoom 0 i reset the view.
In your case if detect a zoom change you could change the extent

//Init the first extent 
    var extent = [-79.608, -1.1, -53.106, 13.721];
    extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:4326", "EPSG:3857"));
    map.getView().fitExtent(extent, map.getSize());

//zoom 0
    var centerZoom = view.getCenter();  

    view.on('change:center', function (evt) {
        var zoom = view.getZoom();
        var center = view.getCenter();

        txtCenter = '' + center;
        txtCenterZoom = '' + centerZoom;            

//reset the center if user move it
        if (zoom == 0 && txtCenter != txtCenterZoom) {                                
            map.getView().fitExtent(extent, map.getSize());
        }            
    });

Best Answer

Related Solutions

[GIS] Problem in displaying tile images using OpenLayers 3

[GIS] How to dynamically restrict pan extents on an image layer in OpenLayers 3

Related Question