OL3 switch: first work

4 files changed, 101 insertions, 74 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 809e734..cab170a 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -17,19 +17,9 @@ See the file COPYING for details.
 */
 
 /* Add OpenLayers MapQuest layer management */
-OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
-    name: "MapQuestOSM",
-    sphericalMercator: true,
-    url: ' http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png',
-    clone: function(obj) {
-        if (obj == null) {
-            obj = new OpenLayers.Layer.OSM(
-            this.name, this.url, this.getOptions());
-        }
-        obj = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);
-        return obj;
-    },
-    CLASS_NAME: "OpenLayers.Layer.MapQuestOSM"
+mapquest_layer = new ol.layer.Tile({
+    style: 'Road',
+    source: new ol.source.MapQuest({layer: 'osm'})
 });
 
 /*
@@ -130,6 +120,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         */
         init: function ( options ) {
             /* Manage parameters */
+            /* OL3-deprecated-cluster
             // not staticaly in default because of STATIC_URL init
             if (defaults.cluster_icon == null && typeof STATIC_URL != 'undefined'){
                 defaults.cluster_icon = new OpenLayers.Icon(
@@ -137,6 +128,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     new OpenLayers.Size(36, 39),
                     new OpenLayers.Pixel(-(36/2), -(39/2)));
             }
+            */
+            /* OL3-deprecated-routing
             if (defaults.icon_start == null && typeof STATIC_URL != 'undefined'){
                 defaults.icon_start = new OpenLayers.Icon(
                     STATIC_URL + "chimere/img/flag-start.png",
@@ -155,9 +148,13 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     new OpenLayers.Size(32, 32),
                     new OpenLayers.Pixel(0, -32));
             }
+            */
             settings = $.extend({}, defaults);
             if ( options ) $.extend(settings, options);
+
+
             if (settings.controls == null){
+                /* OL3-deprecated-mobile
                 if (settings.mobile){
                     settings.controls = [new OpenLayers.Control.TouchNavigation({
                         dragPanOptions: {
@@ -166,33 +163,49 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     }),
                     new OpenLayers.Control.Zoom()];
                 } else {
-                    settings.controls = [new OpenLayers.Control.Navigation(),
-                      new OpenLayers.Control.SimplePanZoom(),
-                      new OpenLayers.Control.ScaleLine()];
-                }
+                */
+                settings.controls = [
+                    new ol.control.Attribution(),
+                    new ol.control.OverviewMap({
+                        collapsed: false
+                    }),
+                    new ol.control.ScaleLine(),
+                    new ol.control.Zoom(),
+                    new ol.control.FullScreen()
+                ];
+                //}
             }
             var map_element = $(this).get(0);
-            var map_options = {
-                controls: settings.controls,
+
+            var view_options = {
                 maxResolution: settings.maxResolution,
-                units: settings.units,
-                projection: settings.projection,
-                theme: settings.theme
+                // OL3-deprecated: units: settings.units,
+                projection: settings.projection
             };
+            /* OL3-deprecated
             if (settings.restricted_extent){
                 settings.restricted_extent.transform(EPSG_DISPLAY_PROJECTION,
                                                      EPSG_PROJECTION);
                 map_options['restrictedExtent'] = settings.restricted_extent;
-            }
+            }*/
+            settings.view = new ol.View(view_options);
+            var map_options = {
+                controls: settings.controls,
+                view: settings.view,
+                target: map_element,
+                layers: settings.map_layers
+                // OL3-deprecated: theme: settings.theme
+            };
 
             settings.current_position = null;
 
             /* Create map object */
-            settings.map = map = new OpenLayers.Map(map_element, map_options);
+            settings.map = map = new ol.Map(map_options);
 
-            map.addControl(new OpenLayers.Control.Attribution());
+            // OL3-deprecated:  map.addControl(new OpenLayers.Control.Attribution());
 
             /* Manage permalink */
+            /* OL3-deprecated permalink
             if (!settings.edition){
                 if (settings.permalink == null && !settings.edition) {
                     var permalink_options = {};
@@ -203,8 +216,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     settings.permalink = new OpenLayers.Control.Permalink(
                                                          permalink_options);
                 }
-                /* HACK new permalink createParams method
-                   FIXME when facilities are given to personalize the permalink */
+                // HACK new permalink createParams method
+                // FIXME when facilities are given to personalize the permalink
                 var oldCreateParams = settings.permalink.createParams
                 var  _createParams = function(center, zoom, layers) {
                     // Call normal method
@@ -251,24 +264,28 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     settings.permalink.div.childNodes[0].textContent = settings.permalink_label;
                 }
             }
-            /* Add Layers */
-            settings.map.addLayers(settings.map_layers);
+            */
+            /* OL3-deprecated
             if (settings.map_layers.length > 1){
                 settings.map.addControl(new OpenLayers.Control.LayerSwitcher(
                                         {roundedCorner:false}));
             }
-            /* select the default map layer */
+            // select the default map layer
             if (!settings.selected_map_layer){
                 settings.selected_map_layer = 0;
             }
             settings.map.setBaseLayer(
                             settings.map_layers[settings.selected_map_layer]);
+            */
 
-            /* manage the context menu  */
+            /* OL3-deprecated context menu
+            // manage the context menu
             $('#map_menu_zoomin').bind("click", methods.zoomIn);
             $('#map_menu_zoomout').bind("click", methods.zoomOut);
             $('#map_menu_center').bind("click", methods.mapCenter);
-            /* manage the routing */
+            */
+            /* OL3-deprecated routing
+            // manage the routing
             if (settings.routing){
                 settings.routing_start = null;
                 settings.routing_steps = new Array();
@@ -283,17 +300,22 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                                                                'Route markers');
                 settings.map.addLayer(settings.layerRouteMarker);
             }
+            */
             /* Vectors layer */
-            settings.layerVectors = new OpenLayers.Layer.Vector("Vector Layer");
+            settings.layerVectors = new ol.layer.Vector();{
+
             settings.map.addLayer(settings.layerVectors);
-            settings.layerVectors.setOpacity(0.8);
+            // OL3-deprecated settings.layerVectors.setOpacity(0.8);
+            /* OL3-deprecated-routing
             if (settings.edition_type_is_route){
                 settings.map.addControl(new OpenLayers.Control.DrawFeature(
                                settings.layerVectors, OpenLayers.Handler.Path));
                 settings.map.addControl(new OpenLayers.Control.ModifyFeature(
                         settings.layerVectors, {clickout:false, toggle:false}));
             }
+            */
 
+            /* OL3-deprecated-cluster
             if (settings.enable_clustering){
                 var style = new OpenLayers.Style({
                        graphicTitle: "${name}",
@@ -341,7 +363,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                      }});
 
 
-                /* Cluster layer */
+                // Cluster layer
                 settings.clustering = new OpenLayers.Strategy.Cluster({
                                                                 distance: 10,
                                                                 threshold: 2});
@@ -377,32 +399,50 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 highlightCtrl.activate();
                 selectCtrl.activate();
             }
+            */
 
             /* Markers layer */
-            settings.layerMarkers = new OpenLayers.Layer.Markers('POIs');
+            settings.icons = [];
+            settings.layerIcons = new ol.source.Vector({
+                features: settings.icons
+            });
+            settings.layerMarkers = new ol.layer.Vector({
+                source: settings.layerIcons
+            });
+
             settings.map.addLayer(settings.layerMarkers);
 
+            /* OL3-deprecated
             if (settings.dynamic_categories){
                 settings.map.events.register('moveend', settings.map,
                                              methods.loadCategories);
             }
-            /* TODO make a function */
+            */
+
+            /* OL3-deprecated
+            // TODO make a function
             if (settings.display_submited) {
                 document.getElementById('display_submited_check').checked = true;
             }
+            */
+
             /* if we have some zoom and lon/lat from the init options */
             if (settings.zoom && settings.lon && settings.lat) {
-                var centerLonLat = new OpenLayers.LonLat(settings.lon,
-                                                         settings.lat);
-                settings.map.setCenter(centerLonLat, settings.zoom);
+                var centerLonLat = [settings.lon, settings.lat];
+                settings.map.setCenter(centerLonLat);
+                settings.map.setZoom(settings.zoom);
             }
             /* if not zoom to the extent in cookies */
             else if (!methods.zoomToCurrentExtent(settings.map)){
                 /* if no extent in cookies zoom to default */
                 if(CENTER_LONLAT && DEFAULT_ZOOM){
                     settings.map.setCenter(CENTER_LONLAT, DEFAULT_ZOOM);
+                    settings.map.setCenter(CENTER_LONLAT);
+                    settings.map.setZoom(DEFAULT_ZOOM);
                 }
             }
+            return;
+            /// OL3-To be continued
 
             if (!settings.edition){
                 if (settings.enable_clustering){
@@ -1524,6 +1564,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             /* zoom to current extent */
             var current_extent = helpers.getSavedExtent();
             var extent;
+            return;
+            //////// OL3-deprecated
             if (OpenLayers && current_extent && current_extent.length == 4){
                 extent = new OpenLayers.Bounds(
                                 current_extent[0], current_extent[1],
diff --git a/chimere/templates/chimere/blocks/head_chimere.html b/chimere/templates/chimere/blocks/head_chimere.html
index 7ed2b54..f0e214e 100644
--- a/chimere/templates/chimere/blocks/head_chimere.html
+++ b/chimere/templates/chimere/blocks/head_chimere.html
@@ -1,6 +1,6 @@
-{% for css_url in OSM_CSS_URLS %}
+{% for css_url in MAP_CSS_URLS %}
 <link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
-{% for js_url in OSM_JS_URLS %}
+{% for js_url in MAP_JS_URLS %}
 <script src="{{ js_url }}" type="text/javascript"></script>{% endfor %}
 {% if routing %}<script src="{{ STATIC_URL }}chimere/js/routing-widget.js" type="text/javascript"></script>{% endif %}
 {% if enable_clustering %}<script src="{{ STATIC_URL }}chimere/js/clustering.js" type="text/javascript"></script>{% endif %}
@@ -15,27 +15,12 @@
 <script src="{{ STATIC_URL }}chimere/js/base.js" type="text/javascript"></script>
 <script type="text/javascript">
     var DEFAULT_ZOOM = {{ DEFAULT_ZOOM }};
-    var EPSG_DISPLAY_PROJECTION = epsg_display_projection = new OpenLayers.Projection('EPSG:{{ EPSG_DISPLAY_PROJECTION }}');
-    OpenLayers.ImgPath = '{{ STATIC_URL }}chimere/img/';
-    var EPSG_PROJECTION = epsg_projection = new OpenLayers.Projection('EPSG:{{ EPSG_PROJECTION }}');
-    var CENTER_LONLAT = centerLonLat = new OpenLayers.LonLat{{ DEFAULT_CENTER }}.transform(epsg_display_projection, epsg_projection);
-    /*var map_layer = {{ MAP_LAYER|safe }};*/
+    var EPSG_DISPLAY_PROJECTION = '{{ EPSG_DISPLAY_PROJECTION }}';
+    //OL3-deprecated: OpenLayers.ImgPath = '{{ STATIC_URL }}chimere/img/';
+    var EPSG_PROJECTION = epsg_projection = '{{ EPSG_PROJECTION }}';
+    var CENTER_LONLAT = centerLonLat = ol.proj.transform(
+        [{{DEFAULT_CENTER}}], epsg_display_projection, epsg_projection);
     var restricted_extent;
-    {% if area_name %}
-    var area_name = '{{ area_name }}';{% endif %}
-
-    $(function() {$( ".draggable" ).draggable({handle:"h2"});});
+    {% if area_name %}var area_name = '{{ area_name }}';{% endif %}
     var get_share_url = '{% url chimere:get-share-url %}';
 </script>
-<style type="text/css">
-.olControlPanPanel div {
-    background-image: url({{STATIC_URL}}chimere/img/pan-panel.png);
-}
-
-.olControlZoomPanel div {
-    background-image: url({{STATIC_URL}}chimere/img/zoom-panel.png);
-}
-</style>
-
-
-
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index 61a1ab9..c6fe569 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -154,15 +154,15 @@ def head_chimere(context):
             "DEFAULT_CENTER": settings.CHIMERE_DEFAULT_CENTER,
             "DEFAULT_ZOOM": settings.CHIMERE_DEFAULT_ZOOM,
             "MAP_LAYER": settings.CHIMERE_DEFAULT_MAP_LAYER,
-            "OSM_CSS_URLS": settings.OSM_CSS_URLS,
+            "MAP_CSS_URLS": settings.MAP_CSS_URLS,
             'MOBILE':context['MOBILE'],
             'routing': settings.CHIMERE_ENABLE_ROUTING \
                       if hasattr(settings, 'CHIMERE_ENABLE_ROUTING') else False,
             'enable_clustering':settings.CHIMERE_ENABLE_CLUSTERING,
             }
-    context_data['OSM_JS_URLS'] = settings.OSM_JS_URLS
+    context_data['MAP_JS_URLS'] = settings.MAP_JS_URLS
     if context['MOBILE']:
-        context_data['OSM_JS_URLS'] = settings.OSM_MOBILE_JS_URLS
+        context_data['MAP_JS_URLS'] = settings.MAP_MOBILE_JS_URLS
     return context_data
 
 @register.inclusion_tag('chimere/blocks/head_form.html')
diff --git a/chimere/widgets.py b/chimere/widgets.py
index e7d104a..ea3fe16 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -249,10 +249,10 @@ class PointChooserWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": settings.OSM_CSS_URLS + \
+            "all": settings.MAP_CSS_URLS + \
                    ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = settings.OSM_JS_URLS + list(settings.JQUERY_JS_URLS) + \
+        js = settings.MAP_JS_URLS + list(settings.JQUERY_JS_URLS) + \
              ["%schimere/js/jquery.chimere.js" % settings.STATIC_URL]
 
     def render(self, name, value, attrs=None, area_name='', initialized=True):
@@ -331,10 +331,10 @@ class RouteChooserWidget(forms.TextInput):
     Manage the edition of route on a map
     """
     class Media:
-        css = {"all": settings.OSM_CSS_URLS + \
+        css = {"all": settings.MAP_CSS_URLS + \
                       ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = settings.OSM_JS_URLS + list(settings.JQUERY_JS_URLS) + \
+        js = settings.MAP_JS_URLS + list(settings.JQUERY_JS_URLS) + \
              ["%schimere/js/jquery.chimere.js" % settings.STATIC_URL,
               "%schimere/js/edit_route_map.js" % settings.STATIC_URL,
               "%schimere/js/base.js" % settings.STATIC_URL,]
@@ -468,10 +468,10 @@ class AreaWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": settings.OSM_CSS_URLS + \
+            "all": settings.MAP_CSS_URLS + \
                    ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = settings.OSM_JS_URLS + [
+        js = settings.MAP_JS_URLS + [
               "%schimere/js/edit_area.js" % settings.STATIC_URL,
               "%schimere/js/base.js" % settings.STATIC_URL,]
 
@@ -567,10 +567,10 @@ class ImportFiltrWidget(AreaWidget):
     """
     class Media:
         css = {
-            "all": settings.OSM_CSS_URLS + \
+            "all": settings.MAP_CSS_URLS + \
                    ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = settings.OSM_JS_URLS + [
+        js = settings.MAP_JS_URLS + [
               "%schimere/js/edit_area.js" % settings.STATIC_URL,
               "%schimere/js/base.js" % settings.STATIC_URL,]