Wrok on OL3 transition

6 files changed, 150 insertions, 71 deletions

diff --git a/chimere/fixtures/initial_data.json b/chimere/fixtures/initial_data.json
index c44eb63..bd13fa4 100644
--- a/chimere/fixtures/initial_data.json
+++ b/chimere/fixtures/initial_data.json
@@ -194,7 +194,7 @@
         "pk": 1,
         "model": "chimere.layer",
         "fields": {
-            "layer_code": "new OpenLayers.Layer.OSM.Mapnik(\"Mapnik OSM\",\r\n{attribution:\"\", keyid:\"mapnik\", displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"M\"})",
+            "layer_code": "new ol.layer.Tile({\r\n    source: new ol.source.OSM()\r\n}),",
             "name": "OSM - Mapnik"
         }
     },
@@ -202,23 +202,7 @@
         "pk": 2,
         "model": "chimere.layer",
         "fields": {
-            "layer_code": "new OpenLayers.Layer.OSM.CycleMap(\"Cycle map\",\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"cyclemap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"C\"})",
-            "name": "OSM - CycleMap"
-        }
-    },
-    {
-        "pk": 3,
-        "model": "chimere.layer",
-        "fields": {
-            "layer_code": "new OpenLayers.Layer.OSM.TransportMap(\"Transport map\",\r\n{attribution:\"Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>\",\r\nkeyid:\"transportmap\",displayOutsideMaxExtent:!0,wrapDateLine:!0,layerCode:\"T\"})",
-            "name": "OSM - TransportMap"
-        }
-    },
-    {
-        "pk": 4,
-        "model": "chimere.layer",
-        "fields": {
-            "layer_code": "new OpenLayers.Layer.MapQuestOSM()",
+            "layer_code": "new ol.layer.Tile({\r\n    source: new ol.source.MapQuest({layer: 'osm'})\r\n})",
             "name": "OSM - MapQuest"
         }
     }
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 13547f4..9a0e4fb 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -58,8 +58,7 @@ fieldset, .action li, #content,
 #welcome, #detail, .detail_footer a,
 #content .olControlLayerSwitcher .layersDiv,
 #content .olControlLayerSwitcher span,
-#chimere_total_label td.l,
-#main-map, .window{
+#chimere_total_label td.l, .window{
     background-color:#FFF;
 }
 
@@ -1205,3 +1204,27 @@ div.pp_default .pp_expand{
     left:6px;
     bottom:5px;
 }
+
+
+/* ol3 */
+
+.ol-zoom{
+    right: .5em;
+    left: auto;
+    top: 3em;
+}
+
+.ol-attribution{
+    right: 12em;
+    bottom: 2.5em;
+}
+
+.ol-overviewmap{
+    right: .5em;
+    left: auto;
+}
+
+.ol-scale-line{
+    right: 12em;
+    left: auto;
+}
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index cab170a..2ee0ad4 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -16,11 +16,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 See the file COPYING for details.
 */
 
-/* Add OpenLayers MapQuest layer management */
-mapquest_layer = new ol.layer.Tile({
-    style: 'Road',
-    source: new ol.source.MapQuest({layer: 'osm'})
-});
+function transform(extent) {
+  return ol.proj.transformExtent(
+    extent, EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
+}
 
 /*
 * Little hasattr helper
@@ -75,12 +74,13 @@ mapquest_layer = new ol.layer.Tile({
             // if leave to false every click on the map hide the pop-up
             explicit_popup_hide: false,
             controls:null,
-            popupClass: OpenLayers.Popup.FramedCloud,
+            // OL3-deprecated popupClass: OpenLayers.Popup.FramedCloud,
+            popupClass: null,
             popupContentFull: false, // if true the detail is inside the popup
             category_accordion: true, // category opening behave like an accordion
             maxResolution: 156543.0399,
             units: 'm',
-            projection: new OpenLayers.Projection('EPSG:4326'),
+            projection: new ol.proj.get('EPSG:900913'),
             theme: null,
             enable_clustering: false,
             routing: false, // enable routing management
@@ -93,13 +93,17 @@ mapquest_layer = new ol.layer.Tile({
             current_category: null, // To store the current category clicked in list
             current_routes_features: [], // To store the current routes find by routing
             itinerary_step_number:0, // current step number
-            icon_offset: new OpenLayers.Pixel(0, 0),
+            // icon_offset: new OpenLayers.Pixel(0, 0),
+            icon_offset: (0, 0),
             edition: false, // edition mode
             edition_type_is_route: false, // route or POI edition
-            default_icon: new OpenLayers.Icon(
+            //default_icon: new OpenLayers.Icon(
+            //        'http://www.openlayers.org/dev/img/marker-green.png',
+            //        new OpenLayers.Size(21, 25),
+            //        new OpenLayers.Pixel(-(21/2), -25)),
+            default_icon: (
                     'http://www.openlayers.org/dev/img/marker-green.png',
-                    new OpenLayers.Size(21, 25),
-                    new OpenLayers.Pixel(-(21/2), -25)),
+                    (21, 25), (-(21/2), -25)),
             cluster_icon: null,
             marker_hover_id:'marker_hover',
             marker_hover_content_id:'marker_hover_content',
@@ -175,12 +179,14 @@ mapquest_layer = new ol.layer.Tile({
                 ];
                 //}
             }
-            var map_element = $(this).get(0);
+            var map_element = $(this).attr('id');
 
             var view_options = {
                 maxResolution: settings.maxResolution,
                 // OL3-deprecated: units: settings.units,
-                projection: settings.projection
+                projection: settings.projection,
+                center: CENTER_LONLAT,
+                zoom: DEFAULT_ZOOM
             };
             /* OL3-deprecated
             if (settings.restricted_extent){
@@ -188,6 +194,7 @@ mapquest_layer = new ol.layer.Tile({
                                                      EPSG_PROJECTION);
                 map_options['restrictedExtent'] = settings.restricted_extent;
             }*/
+
             settings.view = new ol.View(view_options);
             var map_options = {
                 controls: settings.controls,
@@ -302,7 +309,16 @@ mapquest_layer = new ol.layer.Tile({
             }
             */
             /* Vectors layer */
-            settings.layerVectors = new ol.layer.Vector();{
+            settings.iconStyles = new Object();
+            settings.markers = new ol.Collection();
+            settings.sourceMarkers = new ol.source.Vector({
+                features: settings.markers
+            });
+
+            settings.layerMarkers = new ol.layer.Vector({
+                source: settings.sourceMarkers
+            });
+            settings.layerVectors = new ol.layer.Vector();
 
             settings.map.addLayer(settings.layerVectors);
             // OL3-deprecated settings.layerVectors.setOpacity(0.8);
@@ -429,49 +445,54 @@ mapquest_layer = new ol.layer.Tile({
             /* if we have some zoom and lon/lat from the init options */
             if (settings.zoom && settings.lon && settings.lat) {
                 var centerLonLat = [settings.lon, settings.lat];
-                settings.map.setCenter(centerLonLat);
-                settings.map.setZoom(settings.zoom);
+                settings.view.setCenter(centerLonLat);
+                settings.view.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);
+                    settings.view.setCenter(CENTER_LONLAT);
+                    settings.view.setZoom(DEFAULT_ZOOM);
                 }
             }
-            return;
-            /// OL3-To be continued
+            /// OL3-TODO
 
             if (!settings.edition){
                 if (settings.enable_clustering){
+                    /// OL3-TODO
                     settings.map.events.register('zoomend', null,
                                               methods.cleanCluster);
                 }
                 methods.loadCategories();
                 methods.loadGeoObjects();
-                methods.activateContextMenu()
+                /// OL3-TODO
+                // methods.activateContextMenu()
             } else {
+                /// OL3-TODO
                 if (!settings.edition_type_is_route){
                     methods.activateMarkerEdit();
                 } else {
                     methods.activateRouteEdit();
                 }
             }
+            return;
             if (settings.routing_start_lon && settings.routing_start_lat){
+                /// OL3-TODO
                 settings.current_position = new OpenLayers.LonLat(
                         settings.routing_start_lon, settings.routing_start_lat
                         ).transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
                 methods.routingFrom();
             }
             if (settings.routing_end_lon && settings.routing_end_lat){
+                /// OL3-TODO
                 settings.current_position = new OpenLayers.LonLat(
                         settings.routing_end_lon, settings.routing_end_lat
                         ).transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
                 methods.routingTo();
             }
             if (settings.routing_steps_lonlat){
+                /// OL3-TODO
                 for (var i = 0; i < settings.routing_steps_lonlat.length/2; i++) {
                     lon = settings.routing_steps_lonlat[i*2];
                     lat = settings.routing_steps_lonlat[i*2+1];
@@ -483,6 +504,7 @@ mapquest_layer = new ol.layer.Tile({
 
             // verify that the initial display_feature is displayed
             if (settings.display_feature){
+                /// OL3-TODO
                 var is_displayed = false;
                 for(j=0; j<settings.layerMarkers.markers.length;j++){
                     var c_marker = settings.layerMarkers.markers[j];
@@ -494,7 +516,8 @@ mapquest_layer = new ol.layer.Tile({
                     methods.loadMarker(settings.display_feature);
                 }
             }
-            methods.update_permalink_activation();
+            /// OL3-TODO
+            //methods.update_permalink_activation();
 
             methods.preload_images();
         }, // end of init
@@ -671,12 +694,14 @@ mapquest_layer = new ol.layer.Tile({
             $.ajax({url: uri,
                     dataType: "json",
                     success: function (data) {
-                        settings.layerMarkers.clearMarkers();
-                        settings.layerVectors.removeAllFeatures();
+                        /// OL3-TODO
+                        // settings.layerMarkers.clearMarkers();
+                        // settings.layerVectors.removeAllFeatures();
                         if (settings.enable_clustering){
                             settings.cluster_array = [];
                             settings.layerCluster.removeAllFeatures();
                         }
+                        if (!data.features) return;
                         for (var i = 0; i < data.features.length; i++) {
                             var feature = data.features[i];
                             if (feature.geometry.type == 'Point'){
@@ -692,14 +717,18 @@ mapquest_layer = new ol.layer.Tile({
                                                         settings.cluster_array);
                             methods.cleanCluster();
                         }
-                        settings.map.resetLayersZIndex();
+                        // settings.map.resetLayersZIndex();
                     },
                     error: function (data, textStatus, errorThrown) {
-                        settings.layerMarkers.clearMarkers();
-                        settings.layerVectors.removeAllFeatures();
-                        if (settings.enable_clustering){
-                            settings.layerCluster.removeAllFeatures();
-                        }
+                        alert(data);
+                        alert(textStatus);
+                        alert(errorThrown);
+                        /// OL3-TODO
+                        //settings.layerMarkers.clearMarkers();
+                        //settings.layerVectors.removeAllFeatures();
+                        //if (settings.enable_clustering){
+                        //    settings.layerCluster.removeAllFeatures();
+                        //}
                     },
                     complete: function () {
                         if($('#waiting').length){$('#waiting').hide();}
@@ -723,10 +752,13 @@ mapquest_layer = new ol.layer.Tile({
         * Update the categories div in ajax
         */
         loadCategories: function () {
-            var current_extent = settings.map.getExtent().transform(
-                                            settings.map.getProjectionObject(),
+            var current_extent = settings.view.calculateExtent(
+                settings.map.getSize());
+            current_extent = ol.proj.transformExtent(
+                                            current_extent,
+                                            EPSG_PROJECTION,
                                             EPSG_DISPLAY_PROJECTION);
-            current_extent = current_extent.toArray().join('_')
+            current_extent = current_extent.join('_')
             current_extent = current_extent.replace(/\./g, 'D');
             current_extent = current_extent.replace(/-/g, 'M');
             var uri = extra_url
@@ -805,7 +837,8 @@ mapquest_layer = new ol.layer.Tile({
                     }
                     methods.loadGeoObjects();
                     _toggle_categories($(this));
-                    settings.permalink.updateLink();
+                    // OL-3 permalink
+                    // settings.permalink.updateLink();
                     if ($('#layer_cat_'+c_name).length){
                         $('#layer_cat_'+c_name).prop("checked",
                                                      this.checked);
@@ -904,9 +937,38 @@ mapquest_layer = new ol.layer.Tile({
             */
             var lat = mark.geometry.coordinates[1];
             var lon = mark.geometry.coordinates[0];
-            var size = new OpenLayers.Size(mark.properties.icon_width,
-                                           mark.properties.icon_height);
-            var icon_url = MEDIA_URL + mark.properties.icon_path;
+
+            var iconFeature = new ol.Feature({
+                geometry: new ol.geom.Point(transform([lon, lat])),
+                name: mark.properties.name
+            });
+
+            var iconStyle;
+            for (var i in settings.iconStyles){
+                if (i == mark.properties.icon_path){
+                    iconStyle = settings.iconStyles[i];
+                }
+            }
+            if (!iconStyle){
+                var icon_url = MEDIA_URL + mark.properties.icon_path;
+                var size = [mark.properties.icon_width, mark.properties.icon_height];
+                iconStyle = new ol.style.Style({
+                    image: new ol.style.Icon({
+                        anchor: settings.icon_offset,
+                        anchorXUnits: 'pixels',
+                        anchorYUnits: 'pixels',
+                        src: icon_url,
+                        size: size
+                    })
+                });
+                settings.iconStyles[mark.properties.icon_path] = iconStyle;
+            }
+
+            iconFeature.setStyle(iconStyle);
+            settings.markers.push(iconFeature);
+
+
+            return;
             var icon_hover_url = '';
             if (mark.properties.icon_hover_path){
                 var icon_hover_url = MEDIA_URL + mark.properties.icon_hover_path;
@@ -1827,13 +1889,17 @@ mapquest_layer = new ol.layer.Tile({
         },
         zoom_to_area: function (coords) {
             /* zoom to an area */
-            var left = coords[0];
-            var bottom = coords[1];
-            var right = coords[2];
-            var top = coords[3];
-            var bounds = new OpenLayers.Bounds(left, bottom, right, top);
-            bounds.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
-            settings.map.zoomToExtent(bounds, true);
+            var left = Math.round(coords[0] * 1000) / 1000;
+            var bottom = Math.round(coords[1] * 1000) / 1000;
+            var right = Math.round(coords[2] * 1000) / 1000;
+            var top = Math.round(coords[3] * 1000) / 1000;
+            //var bounds = new OpenLayers.Bounds(left, bottom, right, top);
+            // bounds.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
+            // var bounds = new ol.proj.transformExtent(
+            //    [], EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
+            //settings.map.zoomToExtent(bounds, true);
+            settings.view.fit(transform([left, top, right, bottom]),
+                              settings.map.getSize());
             if (settings.dynamic_categories) {
                 methods.loadCategories();
             }
diff --git a/chimere/templates/chimere/blocks/head_chimere.html b/chimere/templates/chimere/blocks/head_chimere.html
index f0e214e..0554f4c 100644
--- a/chimere/templates/chimere/blocks/head_chimere.html
+++ b/chimere/templates/chimere/blocks/head_chimere.html
@@ -1,7 +1,8 @@
-{% for css_url in MAP_CSS_URLS %}
+{% if not is_edit %}{% for css_url in MAP_CSS_URLS %}
 <link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
 {% for js_url in MAP_JS_URLS %}
 <script src="{{ js_url }}" type="text/javascript"></script>{% endfor %}
+{% endif %}
 {% 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 %}
 <script src="{{ STATIC_URL }}chimere/js/jquery.chimere.js" type="text/javascript"></script>
@@ -15,11 +16,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 }}';
+    var EPSG_DISPLAY_PROJECTION = 'EPSG:{{ EPSG_DISPLAY_PROJECTION }}';
     //OL3-deprecated: OpenLayers.ImgPath = '{{ STATIC_URL }}chimere/img/';
-    var EPSG_PROJECTION = epsg_projection = '{{ EPSG_PROJECTION }}';
+    var EPSG_PROJECTION = epsg_projection = 'EPSG:{{ EPSG_PROJECTION }}';
     var CENTER_LONLAT = centerLonLat = ol.proj.transform(
-        [{{DEFAULT_CENTER}}], epsg_display_projection, epsg_projection);
+        [{{DEFAULT_CENTER.0|safe}}, {{DEFAULT_CENTER.1|safe}}],
+        EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
     var restricted_extent;
     {% if area_name %}var area_name = '{{ area_name }}';{% endif %}
     var get_share_url = '{% url chimere:get-share-url %}';
diff --git a/chimere/templates/chimere/blocks/head_jme.html b/chimere/templates/chimere/blocks/head_jme.html
index bf31e6f..47bda85 100644
--- a/chimere/templates/chimere/blocks/head_jme.html
+++ b/chimere/templates/chimere/blocks/head_jme.html
@@ -1,3 +1,5 @@
+
+{% comment %}
 <script class="jwPlayer" type="application/swf" src="{{STATIC_URL}}jme/packages/player.swf"></script>
 <script src="{{STATIC_URL}}jme/packages/mm.full.min.js" type="text/javascript"></script>
 <script src="{{STATIC_URL}}jme/utils/jmeEmbedControls.js" type="text/javascript"></script>
@@ -11,6 +13,7 @@
 <script src="{{STATIC_URL}}jme/plugins/fullwindow.js" type="text/javascript"></script>
 <!-- useractivity -->
 <script src="{{STATIC_URL}}jme/utils/useractivity.js" type="text/javascript"></script>
+{% endcomment %}
 
 <!-- prettyPhoto not jme but media -->
 <link rel="stylesheet" href="{{STATIC_URL}}prettyPhoto/css/prettyPhoto.css" />
diff --git a/chimere/templates/chimere/blocks/map.html b/chimere/templates/chimere/blocks/map.html
index 764d07b..065fc34 100644
--- a/chimere/templates/chimere/blocks/map.html
+++ b/chimere/templates/chimere/blocks/map.html
@@ -46,8 +46,9 @@ $(function(){
     {% if p_routing_steps %}chimere_init_options["routing_steps_lonlat"] = [{{ p_routing_steps }}];{% endif %}
     {% if p_routing_transport %}chimere_init_options["routing_transport"] = "{{ p_routing_transport }}";{% endif %}
     {% if p_routing_speed %}chimere_init_options["routing_speed"] = "{{ p_routing_speed }}";{% endif %}
-    chimere_init_options["icon_offset"] = new OpenLayers.Pixel({{icon_offset_x}},
-                                                            {{icon_offset_y}});
+    // chimere_init_options["icon_offset"] = new OpenLayers.Pixel({{icon_offset_x}},
+    //                                                         {{icon_offset_y}});
+    chimere_init_options["icon_offset"] = ({{icon_offset_x}}, {{icon_offset_y}});
     chimere_init_options["dynamic_categories"] = {{ dynamic_categories }};
     {% if p_display_submited %}chimere_init_options["display_submited"] = {{ p_display_submited }};{% endif %}
     chimere_init_options["checked_categories"] = [{% for cc in checked_categories %}{% if forloop.counter0 > 0 %}, {% endif %}{{cc}}{% endfor %}];