Updating to OpenLayers 3 [closed]

Question

I'm looking to update my application from OpenLayers 2 to OpenLayers 3.

Is anyone aware of a Migration Guide (or something similar) that would help with this?

Warfarin

The code base is totally different and much has been moved to Google closure, event handlers, etc. Afaik it is regarded as a breaking upgrade, so migration pretty much means rewrite, as I understand it. – Luger

Thanks @JohnBarça I have a similar sense of the difference in new code base from the old. I was still hoping someone might have put together some sort of guide to help with the upgrade... – Warfarin

Answer 1

FWIW - We'd like to contribute as we migrate our simple-minded page at http://www.nufosmatic.com from ol2 to ol3. The problem looks formidible, but a lot of it is that ol3 looks to be so much better than ol2, and the examples look to be much improved, and the docs are so much better BUT THEY ARE DIFFERENT and they are confusing if you've finally gotten used to ol2 docs.

Namespaces have changed, and some of the order of API calls must change as a result of some semantical differences. Here is a simple-minded, first-order map migration. This simple-minded exercise took about an hour mostly due to the new doc confusion mentioned above:

/*                                                                                         
  Very simple OpenLayers2 map                                                              
 */
var map, layer, center;

function init() {
    map = new OpenLayers.Map('map');
    layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(layer); // this must come before the following                            
    center = new OpenLayers.LonLat(-71.147, 42.472)
        .transform(
                   new OpenLayers.Projection("EPSG:4326"),
                   map.getProjectionObject()
                   );
    map.setCenter(center, 5);
}

---

/*                                                                                         
  Very simple OpenLayers3 map                                                              
 */                                                                                        
var map, layer, center;                                                                    

function init(){                                                                           
    map = new ol.Map({                                                                     
            target:'map',                                                                  
            renderer:'canvas',                                                             
            view: new ol.View({                                                            
                    projection: 'EPSG:900913',                                             
                })                                                                         
        });                                                                                
    layer = new ol.layer.Tile({                                                            
            source: new ol.source.OSM()                                                    
        });                                                                                
    map.addLayer(layer); // this can actually come up last                                 
    center = new ol.proj.transform([-71.147, 42.472],                                      
                                   'EPSG:4326', // essentially LonLat                      
                                   map.getView().getProjection());                         
    map.getView().setCenter(center);                                                       
    map.getView().setZoom(5);                                                              
}

The top-layer html changes a bit in the tags from with some wrapper changes (where the above are in the js/main.js file):

> diff -btw ../*[23]/index.html
7c7
<         <script src='OpenLayers-2.13.1/OpenLayers.js'></script>
---
> <script src='v3.10.1/build/ol.js'></script>
11c11
<         <link rel='stylesheet' href='OpenLayers-2.13.1/theme/default/style.css'>
---
> <link rel='stylesheet' href='v3.10.1/css/ol.css'>

Slipon

We've now completed our upgrade from ol2 to ol6. The site is active. – Slipon

Using Matt Walker's ol-layerswitcher and my emulation of the ol2 point-of-interest example using ol.Features. github.com/walkermatt – Slipon

Answer 2

OpenLayers3 has a new design and concepts and modelled different, so there is no direct translation.

I think the best option is starting reading the current available books so you can learn it and evaluate yourself:

• The book of OpenLayers3 (https://leanpub.com/thebookofopenlayers3), with samples (http://acanimal.github.io/thebookofopenlayers3/).
• OpenLayers 3: Beginner's Guide (https://www.packtpub.com/web-development/openlayers-3-beginner%E2%80%99s-guide)

Take into account OL3 has many improvements over OL2 but not all the features of OL2 are implemented in OL3 yet.

Briscoe