Custom color for each feature - better management of display details - show polygon on main map!

1 files changed, 82 insertions, 40 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 057854a..565598f 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -325,16 +325,16 @@ function transform(obj) {
 
             /* marker layer */
             settings.iconStyles = new Object();
-            settings.markers = new ol.Collection();
+            settings.dbFeatures = new ol.Collection();
 
-            settings.sourceMarkers = new ol.source.Vector({
-                features: settings.markers
+            settings.sourceDbFeatures = new ol.source.Vector({
+                features: settings.dbFeatures
             });
 
-            settings.layerMarkers = new ol.layer.Vector({
-                source: settings.sourceMarkers
+            settings.layerDbFeatures = new ol.layer.Vector({
+                source: settings.sourceDbFeatures
             });
-            settings.map.addLayer(settings.layerMarkers);
+            settings.map.addLayer(settings.layerDbFeatures);
 
             // popup management
             settings.popup_item = document.getElementById('popup');
@@ -357,17 +357,28 @@ function transform(obj) {
                 if (!settings.edition){
                     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')]);
+                        var geom = feature.getGeometry();
+                        if (geom.getType() == 'Point'){
+                            settings.popup.setPosition(geom.getCoordinates());
+                            settings.popup.setOffset([feature.get('popup_offset_x'),
+                                                      -feature.get('popup_offset_y')]);
+                        } else if (geom.getType() == 'Polygon'){
+                            settings.popup.setPosition(geom.getInteriorPoint().getCoordinates());
+                            settings.popup.setOffset([0, 0]);
+                        } else if (geom.getType() == 'LineString'){
+                            settings.popup.setPosition(geom.getCoordinatesAt(0.5));
+                            settings.popup.setOffset([0, 0]);
+                        } else if (geom.getType() == 'MultipleLineString'){
+                            settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5));
+                            settings.popup.setOffset([0, 0]);
+                        }
                         $(settings.popup_item).popover({
                             'placement': 'top',
                             'html': true,
                             'content': feature.get('name')
                         });
                         $(settings.popup_item).popover('show');
-                        methods.display_feature_detail(feature.get('pk'));
+                        methods.display_feature_detail(feature.get('key'));
                     } else {
                         $(settings.popup_item).popover('destroy');
                     }
@@ -386,7 +397,15 @@ function transform(obj) {
             settings.WKT = new ol.format.WKT();
 
             /* Vectors layer */
-            settings.layerVectors = new ol.layer.Vector();
+            settings.vectors = new ol.Collection();
+
+            settings.sourceVectors = new ol.source.Vector({
+                features: settings.vectors
+            });
+
+            settings.layerVectors = new ol.layer.Vector({
+                source: settings.sourceVectors
+            });
             settings.map.addLayer(settings.layerVectors);
             if (settings.edition && (settings.edition_type == 'polygon'
                                      || settings.edition_type == 'route')){
@@ -554,11 +573,11 @@ function transform(obj) {
             settings.layerIcons = new ol.source.Vector({
                 features: settings.icons
             });
-            settings.layerMarkers = new ol.layer.Vector({
+            settings.layerDbFeatures = new ol.layer.Vector({
                 source: settings.layerIcons
             });
 
-            settings.map.addLayer(settings.layerMarkers);
+            settings.map.addLayer(settings.layerDbFeatures);
 
             /* OL3-deprecated
             if (settings.dynamic_categories){
@@ -640,8 +659,8 @@ function transform(obj) {
             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];
+                for(j=0; j<settings.layerDbFeatures.markers.length;j++){
+                    var c_marker = settings.layerDbFeatures.markers[j];
                     if(c_marker.pk == settings.display_feature){
                         is_displayed = true;
                     }
@@ -834,7 +853,8 @@ function transform(obj) {
             $.ajax({url: uri,
                     dataType: "json",
                     success: function (data) {
-                        settings.markers.clear();
+                        settings.dbFeatures.clear();
+                        settings.vectors.clear();
                         /// OL3-TODO
                         // settings.layerVectors.removeAllFeatures();
                         if (settings.enable_clustering){
@@ -846,6 +866,8 @@ function transform(obj) {
                             var feature = data.features[i];
                             if (feature.geometry.type == 'Point'){
                                 methods.addMarker(feature);
+                            } else if (feature.geometry.type == 'Polygon') {
+                                methods.addPolygon(feature);
                             } else if (feature.geometry.type == 'LineString') {
                                 //OL3 methods.addRoute(feature);
                             } else if (feature.geometry.type == 'MultiLineString') {
@@ -860,7 +882,8 @@ function transform(obj) {
                         // settings.map.resetLayersZIndex();
                     },
                     error: function (data, textStatus, errorThrown) {
-                        settings.markers.clear();
+                        settings.dbFeatures.clear();
+                        settings.vectors.clear();
                         /// OL3-TODO
                         //settings.layerVectors.removeAllFeatures();
                         //if (settings.enable_clustering){
@@ -876,8 +899,8 @@ function transform(obj) {
         razMap: function() {
             methods.hidePopup();
             methods.uncheckCategories();
-            settings.markers.clear();
-            settings.layerVectors.removeAllFeatures();
+            settings.dbFeatures.clear();
+            settings.vectors.clear();
             if (settings.enable_clustering){
                 settings.layerCluster.removeAllFeatures();
                 settings.cluster_array = [];
@@ -1056,11 +1079,11 @@ function transform(obj) {
                     }
                 }
             }
-            for(j=0; j<settings.layerMarkers.markers.length;j++){
-                if(hidden_feature_idx.indexOf(settings.layerMarkers.markers[j].pk) > -1){
-                    settings.layerMarkers.markers[j].display(false);
+            for(j=0; j<settings.layerDbFeatures.markers.length;j++){
+                if(hidden_feature_idx.indexOf(settings.layerDbFeatures.markers[j].pk) > -1){
+                    settings.layerDbFeatures.markers[j].display(false);
                 } else {
-                    settings.layerMarkers.markers[j].display(true);
+                    settings.layerDbFeatures.markers[j].display(true);
                 }
             }
         },
@@ -1095,6 +1118,7 @@ function transform(obj) {
                 geometry: transform(new ol.geom.Point([lon, lat])),
                 name: mark.properties.name,
                 pk: mark.properties.pk,
+                key: mark.properties.key,
                 popup_offset_x: mark.properties.icon_popup_offset_x,
                 popup_offset_y: mark.properties.icon_popup_offset_y
             });
@@ -1123,7 +1147,7 @@ function transform(obj) {
             }
 
             iconFeature.setStyle(iconStyle);
-            settings.markers.push(iconFeature);
+            settings.dbFeatures.push(iconFeature);
 
             return;
 
@@ -1133,7 +1157,6 @@ function transform(obj) {
             if (mark.properties.icon_hover_path){
                 var icon_hover_url = MEDIA_URL + mark.properties.icon_hover_path;
             }
-            */
 
             feature.pk = mark.properties.pk;
             feature.popupClass = settings.popupClass;
@@ -1149,12 +1172,12 @@ function transform(obj) {
             marker.icon_url = icon_url;
             marker.icon_hover_url = icon_hover_url;
             marker.category_name = mark.properties.category_name;
-            /* manage markers events */
+            // manage markers events
             var _popup = function() {
                 if (!feature.pk){
                     return;
                 }
-                /* show the popup */
+                // show the popup
                 if (settings.current_popup != null) {
                     settings.current_popup.hide();
                 }
@@ -1165,7 +1188,7 @@ function transform(obj) {
                     feature.popup.toggle();
                 }
                 settings.current_popup = feature.popup;
-                /* hide on click on the cloud */
+                // hide on click on the cloud
                 if (!settings.explicit_popup_hide){
                     settings.current_popup.groupDiv.onclick = methods.hidePopup;
                 }
@@ -1173,7 +1196,7 @@ function transform(obj) {
                 methods.update_permalink_activation();
             }
             var _repan_popup = function(){
-                /* re-pan manually */
+                // re-pan manually
 
                 // no clean way to detect if all the element are ready
                 // lack of better...
@@ -1272,8 +1295,8 @@ function transform(obj) {
             marker.events.register('touchstart', feature, markerClick);
             marker.events.register('mouseover', feature, markerOver);
             marker.events.register('mouseout', feature, markerOut);
-            settings.layerMarkers.addMarker(marker);
-            /* show the item when designed in the permalink */
+            settings.layerDbFeatures.addMarker(marker);
+            // show the item when designed in the permalink
             if (settings.display_feature == feature.pk){
                 settings.current_feature = feature;
                 _popup(feature);
@@ -1299,6 +1322,7 @@ function transform(obj) {
             }
 
             return feature;
+            */
         },
         cleanRoute: function(){
             settings.layerVectors.removeAllFeatures();
@@ -1367,6 +1391,24 @@ function transform(obj) {
                                             settings.map.getProjectionObject());
             settings.layerVectors.addFeatures(feats);
         },
+        // Put a polygon on the map
+        addPolygon: function(feature) {
+            settings.dbFeatures.extend(
+                new ol.format.GeoJSON().readFeatures(feature));
+
+            return
+            var gformat = new OpenLayers.Format.GeoJSON();
+            var feats = gformat.read(feature);
+            var style = OpenLayers.Util.extend({},
+                                    OpenLayers.Feature.Vector.style['default']);
+            style.strokeColor = feature.properties.color;
+            style.strokeWidth = 2;
+            feats[0].style = style;
+            feats[0].geometry = feats[0].geometry.transform(
+                                            EPSG_DISPLAY_PROJECTION,
+                                            settings.map.getProjectionObject());
+            settings.layerVectors.addFeatures(feats);
+        },
         routingInputChange: function(nominatim_id){
             $('#map_menu_clear').show();
             switch(nominatim_id){
@@ -1655,13 +1697,13 @@ function transform(obj) {
             settings.layerRoute.addFeatures([current_route]);
             return current_route;
         },
-        display_feature_detail: function (pk) {
+        display_feature_detail: function (key) {
             /*
             * update current detail panel with an AJAX request
             */
             var uri = extra_url
             if (settings.area_id) uri += settings.area_id + "/"
-            uri += "getDetail/" + pk;
+            uri += "getDetail/" + key;
             var params = {}
             if (settings.simple) { params["simple"] = 1; }
             $.ajax({url: uri,
@@ -1801,7 +1843,7 @@ function transform(obj) {
         },
         zoomToMarkerExtent: function(){
             settings.map.zoomToExtent(
-                        settings.layerMarkers.getDataExtent());
+                        settings.layerDbFeatures.getDataExtent());
         },
         // methods for edition
         setMarker: function (event){
@@ -1812,7 +1854,7 @@ function transform(obj) {
         },
         cleanMarker: function(){
             if (settings.current_edit_feature) {
-                settings.layerMarkers.removeMarker(settings.current_edit_feature);
+                settings.layerDbFeatures.removeMarker(settings.current_edit_feature);
             }
         },
         /* put the marker on the map and update latitude and longitude fields */
@@ -1820,11 +1862,11 @@ function transform(obj) {
             methods.cleanMarker();
             settings.current_edit_feature = new OpenLayers.Marker(lonlat.clone(),
                                                       settings.default_icon);
-            settings.layerMarkers.addMarker(settings.current_edit_feature);
+            settings.layerDbFeatures.addMarker(settings.current_edit_feature);
             methods.updateMarkerInput();
             /* zoom to the point */
             if (zoom){
-                var bounds = settings.layerMarkers.getDataExtent();
+                var bounds = settings.layerDbFeatures.getDataExtent();
                 if (bounds) settings.map.zoomToExtent(bounds);
             }
             return;
@@ -1939,8 +1981,8 @@ function transform(obj) {
             if (bounds) settings.map.zoomToExtent(bounds);
         },
         showPopup: function (feature_pk) {
-            for(j=0; j<settings.layerMarkers.markers.length;j++){
-                var c_marker = settings.layerMarkers.markers[j];
+            for(j=0; j<settings.layerDbFeatures.markers.length;j++){
+                var c_marker = settings.layerDbFeatures.markers[j];
                 if(c_marker.pk == feature_pk){
                     c_marker.events.triggerEvent('click');
                     return true