OL3: marker and popup OK

1 files changed, 76 insertions, 25 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 2ee0ad4..a73ff49 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -1,4 +1,4 @@
-/* Copyright (C) 2008-2015  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
+/* Copyright (C) 2008-2016  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as
@@ -16,11 +16,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 See the file COPYING for details.
 */
 
-function transform(extent) {
+function transformExtent(extent) {
   return ol.proj.transformExtent(
     extent, EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
 }
 
+function transform(obj) {
+  return obj.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
+}
+
 /*
 * Little hasattr helper
 */
@@ -93,8 +97,7 @@ function transform(extent) {
             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: (0, 0),
+            icon_offset: [0, 0],
             edition: false, // edition mode
             edition_type_is_route: false, // route or POI edition
             //default_icon: new OpenLayers.Icon(
@@ -156,7 +159,6 @@ function transform(extent) {
             settings = $.extend({}, defaults);
             if ( options ) $.extend(settings, options);
 
-
             if (settings.controls == null){
                 /* OL3-deprecated-mobile
                 if (settings.mobile){
@@ -209,8 +211,6 @@ function transform(extent) {
             /* Create map object */
             settings.map = map = new ol.Map(map_options);
 
-            // OL3-deprecated:  map.addControl(new OpenLayers.Control.Attribution());
-
             /* Manage permalink */
             /* OL3-deprecated permalink
             if (!settings.edition){
@@ -308,9 +308,11 @@ function transform(extent) {
                 settings.map.addLayer(settings.layerRouteMarker);
             }
             */
-            /* Vectors layer */
+
+            /* marker layer */
             settings.iconStyles = new Object();
             settings.markers = new ol.Collection();
+
             settings.sourceMarkers = new ol.source.Vector({
                 features: settings.markers
             });
@@ -318,8 +320,56 @@ function transform(extent) {
             settings.layerMarkers = new ol.layer.Vector({
                 source: settings.sourceMarkers
             });
-            settings.layerVectors = new ol.layer.Vector();
+            settings.map.addLayer(settings.layerMarkers);
+
+            // popup management
+            settings.popup_item = document.getElementById('popup');
+            settings.popup = new ol.Overlay({
+                element: popup,
+                positioning: ol.OverlayPositioning.BOTTOM_LEFT,
+                stopEvent: false
+            });
+            settings.map.addOverlay(settings.popup);
 
+            // display marker on click
+            settings.map.on('click', function(evt) {
+                var feature = settings.map.forEachFeatureAtPixel(
+                    evt.pixel,
+                    function(feature, layer) {
+                        return feature;
+                    }
+                );
+                settings.current_feature = feature;
+                if (feature) {
+                    $(settings.popup_item).popover('destroy');
+                    var coords = feature.getGeometry().getCoordinates();
+                    settings.popup.setPosition(coords);
+                    settings.popup.setOffset([feature.get('popup_offset_x'),
+                                              -feature.get('popup_offset_y')]);
+                    $(settings.popup_item).popover({
+                        'placement': 'top',
+                        'html': true,
+                        'content': feature.get('name')
+                    });
+                    $(settings.popup_item).popover('show');
+                    methods.display_feature_detail(feature.get('pk'));
+                } else {
+                    $(settings.popup_item).popover('destroy');
+                }
+            });
+
+            map.on('pointermove', function(e) {
+                var pixel = map.getEventPixel(e.originalEvent);
+                var hit = map.hasFeatureAtPixel(pixel);
+                var target = map.getTarget();
+                target = typeof target === "string" ?
+                    document.getElementById(target) : target;
+                target.style.cursor = hit ? 'pointer' : '';
+            });
+
+
+            /* Vectors layer */
+            settings.layerVectors = new ol.layer.Vector();
             settings.map.addLayer(settings.layerVectors);
             // OL3-deprecated settings.layerVectors.setOpacity(0.8);
             /* OL3-deprecated-routing
@@ -694,8 +744,8 @@ function transform(extent) {
             $.ajax({url: uri,
                     dataType: "json",
                     success: function (data) {
+                        settings.markers.clear();
                         /// OL3-TODO
-                        // settings.layerMarkers.clearMarkers();
                         // settings.layerVectors.removeAllFeatures();
                         if (settings.enable_clustering){
                             settings.cluster_array = [];
@@ -707,9 +757,9 @@ function transform(extent) {
                             if (feature.geometry.type == 'Point'){
                                 methods.addMarker(feature);
                             } else if (feature.geometry.type == 'LineString') {
-                                methods.addRoute(feature);
+                                //OL3 methods.addRoute(feature);
                             } else if (feature.geometry.type == 'MultiLineString') {
-                                methods.addMultiLine(feature);
+                                //OL3 methods.addMultiLine(feature);
                             }
                         }
                         if (settings.enable_clustering){
@@ -720,11 +770,11 @@ function transform(extent) {
                         // settings.map.resetLayersZIndex();
                     },
                     error: function (data, textStatus, errorThrown) {
+                        settings.markers.clear();
                         alert(data);
                         alert(textStatus);
                         alert(errorThrown);
                         /// OL3-TODO
-                        //settings.layerMarkers.clearMarkers();
                         //settings.layerVectors.removeAllFeatures();
                         //if (settings.enable_clustering){
                         //    settings.layerCluster.removeAllFeatures();
@@ -739,7 +789,7 @@ function transform(extent) {
         razMap: function() {
             methods.hidePopup();
             methods.uncheckCategories();
-            settings.layerMarkers.clearMarkers();
+            settings.markers.clear();
             settings.layerVectors.removeAllFeatures();
             if (settings.enable_clustering){
                 settings.layerCluster.removeAllFeatures();
@@ -939,8 +989,11 @@ function transform(extent) {
             var lon = mark.geometry.coordinates[0];
 
             var iconFeature = new ol.Feature({
-                geometry: new ol.geom.Point(transform([lon, lat])),
-                name: mark.properties.name
+                geometry: transform(new ol.geom.Point([lon, lat])),
+                name: mark.properties.name,
+                pk: mark.properties.pk,
+                popup_offset_x: mark.properties.icon_popup_offset_x,
+                popup_offset_y: mark.properties.icon_popup_offset_y
             });
 
             var iconStyle;
@@ -952,9 +1005,11 @@ function transform(extent) {
             if (!iconStyle){
                 var icon_url = MEDIA_URL + mark.properties.icon_path;
                 var size = [mark.properties.icon_width, mark.properties.icon_height];
+                var anchor = [mark.properties.icon_offset_x,
+                              mark.properties.icon_offset_y];
                 iconStyle = new ol.style.Style({
                     image: new ol.style.Icon({
-                        anchor: settings.icon_offset,
+                        anchor: anchor,
                         anchorXUnits: 'pixels',
                         anchorYUnits: 'pixels',
                         src: icon_url,
@@ -967,20 +1022,16 @@ function transform(extent) {
             iconFeature.setStyle(iconStyle);
             settings.markers.push(iconFeature);
 
-
             return;
+
+            //OL3 hover
+            /*
             var icon_hover_url = '';
             if (mark.properties.icon_hover_path){
                 var icon_hover_url = MEDIA_URL + mark.properties.icon_hover_path;
             }
-            var iconclone = new OpenLayers.Icon(icon_url, size,
-                                                settings.icon_offset);
+            */
 
-            var feature = new OpenLayers.Feature(settings.layerMarkers,
-                      new OpenLayers.LonLat(lon, lat).transform(
-                                                        EPSG_DISPLAY_PROJECTION,
-                                                        EPSG_PROJECTION),
-                      {icon:iconclone});
             feature.pk = mark.properties.pk;
             feature.popupClass = settings.popupClass;
             feature.data.popupContentHTML = "<div class='cloud'>";