Updating to OpenLayers 3

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?

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'>