Wrok on OL3 transition

2 files changed, 136 insertions, 47 deletions

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();
             }