[#36] Map features to geotrip

sookoll · Feb 14, 2018 · 6bc81d6 · 6bc81d6
1 parent 8415a78
commit 6bc81d6
Show file tree

Hide file tree

Showing 15 changed files with 648 additions and 564 deletions.
diff --git a/vendor/ol3/ol-custom.json b/vendor/ol3/ol-custom.json
@@ -67,6 +67,8 @@
         "ol.Feature#getProperties",
         "ol.Feature#setProperties",
         "ol.Feature#getStyleFunction",
+        "ol.Feature#getId",
+        "ol.Feature#setId",
         "ol.geom.Point",
         "ol.geom.Point#getType",
         "ol.geom.Point#getCoordinates",

diff --git a/www/src/css/app/featureinfo.css b/www/src/css/app/featureinfo.css
@@ -6,9 +6,12 @@
 .popover-title a.remove-marker {
     position: absolute;
     right: 14px;
-    padding-left:3px;
+    padding-left:10px;
     background: #f7f7f7
 }
+.popover-title a.remove-marker {
+    right: 34px;
+}
 .popover-title {
     white-space: nowrap;
     min-width: 240px;

diff --git a/www/src/js/app/main.js b/www/src/js/app/main.js
@@ -7,6 +7,7 @@ define([
     'app/map',
     'app/service/store',
     'app/service/search/search',
+    'app/service/featureinfo',
     'app/service/geocache',
     'app/service/osm-edit',
     'app/service/data-import',
@@ -21,6 +22,7 @@ define([
     Map,
     AppStore,
     Search,
+    FeatureInfo,
     Geocache,
     OSMEdit,
     DataImport,
@@ -73,6 +75,11 @@ define([
             app.geocoding = new Search(app.mapmodule);
             app.geocoding.init();
         }
+        // featureinfo
+        if (app.get('settings').map.featureInfo) {
+            app.featureInfo = new FeatureInfo(app);
+            app.mapmodule.set('featureInfo', app.featureInfo);
+        }
 
         // geocaches
         app.geocache = new Geocache(app.get('settings').geocache, app.mapmodule);
@@ -99,7 +106,7 @@ define([
           },
           onclick: function (e, coord) {
               var xy = ol.coordinate.format(app.mapmodule.transform('point', coord, 'EPSG:3857', 'EPSG:4326'), '{y}, {x}', 5);
-              app.mapmodule.addMarker(coord, {'WGS84': xy});
+              app.mapmodule.addMarker(coord, {coordinates: xy});
           },
           closeonclick: true
         }, {

diff --git a/www/src/js/app/map.js b/www/src/js/app/map.js
@@ -6,10 +6,9 @@ define([
     'ol',
     'proj4',
     'templator',
-    'app/service/featureinfo',
     'app/service/geolocation',
     'text!tmpl/map/layerswitcher.html'
-], function ($, ol, proj4, Templator, FeatureInfo, GeoLocation, tmpl_layerswitcher) {
+], function ($, ol, proj4, Templator, GeoLocation, tmpl_layerswitcher) {
 
     'use strict';
 
@@ -33,7 +32,6 @@ define([
         });
         this._activeBaseLayer = null;
         this._el = null;
-        this._featureInfo = null;
         this._geoLocation = null;
         this._controls = {
             mouseCoordinates : null
@@ -48,6 +46,10 @@ define([
             return this['_' + key];
         },
 
+        set: function (key, value) {
+            this['_' + key] = value;
+        },
+
         // convert radians to degrees
         radToDeg: function (rad) {
           return rad * 360 / (Math.PI * 2);
@@ -69,9 +71,6 @@ define([
             if (this._config.scaleLine) {
                 this.createScaleLineControl();
             }
-            if (this._config.featureInfo) {
-                this._featureInfo = new FeatureInfo(this);
-            }
             this._overlay = new ol.layer.Vector({
                 map: this._map,
                 source: new ol.source.Vector({
@@ -360,6 +359,7 @@ define([
             layer.getSource().addFeatures([marker]);
             this._vectorLayers.getLayers().remove(layer);
             this._vectorLayers.getLayers().push(layer);
+            return marker;
         },
 
         createMarker : function (coords, props) {
@@ -369,6 +369,13 @@ define([
             } else {
                 f.setGeometry(null);
             }
+            f.setId(Date.now() + '_' + Math.random());
+            if (!props) {
+                props = {};
+            }
+            if (!props.name) {
+                props.name = 'Kaardiobjekt';
+            }
             if (props) {
                 f.setProperties(props);
             }

diff --git a/www/src/js/app/service/featureinfo.js b/www/src/js/app/service/featureinfo.js
@@ -4,20 +4,24 @@
 define([
     'jquery',
     'ol',
-    'app/service/search/nominatim'
-], function ($, ol, Nominatim) {
+    'templator',
+    'app/service/search/nominatim',
+    'text!tmpl/service/geocache/featureinfo_title.html'
+], function ($, ol, Templator, Nominatim, tmpl_featureinfo_title) {
 
     'use strict';
 
-    function FeatureInfo(mapmodule) {
-        this._mapmodule = mapmodule;
-        this._map = mapmodule.get('map');
-        this._geocode = new Nominatim(mapmodule);
+    function FeatureInfo(app) {
+        this._app = app;
+        this._mapmodule = app.mapmodule;
+        this._map = this._mapmodule.get('map');
+        this._geocode = new Nominatim(this._mapmodule);
         this._tooltip = null;
         this._styleCache = {};
         this._highlight = null;
         this._popup = null;
         this._infoHandlers = {};
+        this._tmpl_featureinfo_title = Templator.compile(tmpl_featureinfo_title);
         this.init();
     }
 
@@ -181,7 +185,14 @@ define([
                         content.push(key + ': ' + prop[key]);
                     }
                 }
-                var title = '<i class="fa fa-map-marker"></i> Kaardiobjekt<a href="#" class="remove-marker" title="Eemalda"><i class="fa fa-trash"></i></a>';
+                var in_collection = $.inArray(feature, this._app.geocache.get('geotrip').getArray());
+                var title = this._tmpl_featureinfo_title({
+                    'type_class': 'fa fa-map-marker',
+                    'text': 'Kaardiobjekt',
+                    'trash': '<a href="#" class="remove-marker" title="Eemalda"><i class="fa fa-trash"></i></a>',
+                    'icon': (in_collection > -1) ? 'fa-minus-square' : 'fa-thumb-tack'
+                });
+                var geotrip = t._app.geocache.get('geotrip');
                 return {
                     'definition' : {
                         'placement': 'top',
@@ -195,10 +206,19 @@ define([
                             e.preventDefault();
                             if (f[0]) {
                                 f[0].getSource().removeFeature(f[1]);
+                                geotrip.remove(f[1]);
                                 t._popup.popover('destroy');
                             }
-
-                        })
+                        });
+                        $('a.cache-toggle').on('click', function (e) {
+                            e.preventDefault();
+                            $(this).find('i').toggleClass('fa-thumb-tack fa-minus-square');
+                            if ($.inArray(f[1], geotrip.getArray()) > -1) {
+                                geotrip.remove(f[1]);
+                            } else {
+                                geotrip.push(f[1]);
+                            }
+                        });
                     },
                     'onHide' : function () {}
                 };

diff --git a/www/src/js/app/service/filter.js b/www/src/js/app/service/filter.js
@@ -17,10 +17,13 @@ define([
         this._features = layer.getSource().getFeatures();
         this._filters = {
             fstatus: {
-                //'0': 'Leidmata',
-                //'1': 'Leitud',
+                '0': 'Leidmata',
+                '1': 'Leitud',
                 '2': 'Minu aare'
             },
+            new_cache: {
+                'yes': 'Uus aare (30p)'
+            },
             type: {
                 'Tavaline aare': 'Tavaline aare',
                 'Multiaare': 'Multiaare',
@@ -29,9 +32,6 @@ define([
                 'Sündmusaare': 'Sündmusaare',
                 'Asukohata (tagurpidi) aare': 'Asukohata aare',
                 'Mõistatusaare': 'Mõistatusaare'
-            },
-            new_cache: {
-                'yes': 'Uus aare (30p)'
             }
         };