Merge pull request #233 from tomvantilburg/master

merge from Tom

index.html

@@ -49,6 +49,7 @@
 
     </div>
   </div>
+<canvas id = 'tmp' height="200" width="200"></canvas>
 
   <script type="text/javascript" src="./lib/d3/d3.v3.min.js"></script>
   <script type="text/javascript" src="./lib/leaflet-0.7/leaflet-src.js"></script>
@@ -61,6 +62,10 @@
   <script type="text/javascript" src="./lib/leaflet_draw/leaflet.draw.js"></script>
   <script type="text/javascript" src="./lib/leaflet_label/leaflet.label.js"></script>
   <script type="text/javascript" src="./lib/leaflet_measure/leaflet.measurecontrol.js"></script>
+  <script type="text/javascript" src="./lib/leaflet_geosearch/l.control.geosearch.js"></script>
+  <script type="text/javascript" src="./lib/leaflet_geosearch/l.geosearch.provider.esri.js"></script>
+  <link rel="stylesheet" href="./lib/leaflet_geosearch/l.geosearch.css" />
+
   <script type="text/javascript" src="./lib/leaflet_esri/esri-leaflet-src.js"></script>
   <script type="text/javascript" src="./lib/spin.js/spin.min.js"></script>
   <script type="text/javascript" src="./lib/leaflet_spinner/leaflet.spin.js"></script>

lib/leaflet_geosearch/l.control.geosearch.js

@@ -0,0 +1,212 @@
+/*
+ * L.Control.GeoSearch - search for an address and zoom to its location
+ * https://github.com/smeijer/leaflet.control.geosearch
+ */
+
+L.GeoSearch = {};
+L.GeoSearch.Provider = {};
+
+L.GeoSearch.Result = function (x, y, label) {
+    this.X = x;
+    this.Y = y;
+    this.Label = label;
+};
+
+L.Control.GeoSearch = L.Control.extend({
+    options: {
+        position: 'topcenter',
+        showMarker: true
+    },
+
+    _config: {
+        country: '',
+        searchLabel: 'zoek adres', //'search for address ...',
+        notFoundMessage: 'sorry, dit adres is niet gevonden',//'Sorry, that address could not be found.',
+        messageHideDelay: 3000,
+        zoomLevel: 16 //18
+    },
+
+    initialize: function (options) {
+        L.Util.extend(this.options, options);
+        L.Util.extend(this._config, options);
+    },
+
+    onAdd: function (map) {
+        var $controlContainer = map._controlContainer,
+            nodes = $controlContainer.childNodes,
+            topCenter = false;
+
+        for (var i = 0, len = nodes.length; i < len; i++) {
+            var klass = nodes[i].className;
+            if (/leaflet-top/.test(klass) && /leaflet-center/.test(klass)) {
+                topCenter = true;
+                break;
+            }
+        }
+
+        if (!topCenter) {
+            var tc = document.createElement('div');
+            tc.className += 'leaflet-top leaflet-center';
+            $controlContainer.appendChild(tc);
+            map._controlCorners.topcenter = tc;
+        }
+
+        this._map = map;
+        this._container = L.DomUtil.create('div', 'leaflet-control-geosearch');
+
+        var searchbox = document.createElement('input');
+        searchbox.id = 'leaflet-control-geosearch-qry';
+        searchbox.type = 'text';
+        searchbox.placeholder = this._config.searchLabel;
+        this._searchbox = searchbox;
+
+        var msgbox = document.createElement('div');
+        msgbox.id = 'leaflet-control-geosearch-msg';
+        msgbox.className = 'leaflet-control-geosearch-msg';
+        this._msgbox = msgbox;
+
+        var resultslist = document.createElement('ul');
+        resultslist.id = 'leaflet-control-geosearch-results';
+        this._resultslist = resultslist;
+
+        this._msgbox.appendChild(this._resultslist);
+        this._container.appendChild(this._searchbox);
+        this._container.appendChild(this._msgbox);
+
+        L.DomEvent
+          .addListener(this._container, 'click', L.DomEvent.stop)
+          .addListener(this._searchbox, 'keypress', this._onKeyUp, this);
+
+        L.DomEvent.disableClickPropagation(this._container);
+
+        return this._container;
+    },
+
+    geosearch: function (qry) {
+        try {
+            var provider = this._config.provider;
+
+            if(typeof provider.GetLocations == 'function') {
+                var results = provider.GetLocations(qry, function(results) {
+                    this._processResults(results);
+                }.bind(this));
+            }
+            else {
+                var url = provider.GetServiceUrl(qry);
+                this.sendRequest(provider, url);
+            }
+        }
+        catch (error) {
+            this._printError(error);
+        }
+    },
+
+    sendRequest: function (provider, url) {
+        var that = this;
+
+        window.parseLocation = function (response) {
+            var results = provider.ParseJSON(response);
+            that._processResults(results);
+
+            document.body.removeChild(document.getElementById('getJsonP'));
+            delete window.parseLocation;
+        };
+
+        function getJsonP (url) {
+            url = url + '&callback=parseLocation'
+            var script = document.createElement('script');
+            script.id = 'getJsonP';
+            script.src = url;
+            script.async = true;
+            document.body.appendChild(script);
+        }
+
+        if (XMLHttpRequest) {
+            var xhr = new XMLHttpRequest();
+
+            if ('withCredentials' in xhr) {
+                var xhr = new XMLHttpRequest();
+
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState == 4) {
+                        if (xhr.status == 200) {
+                            var response = JSON.parse(xhr.responseText),
+                                results = provider.ParseJSON(response);
+
+                            that._processResults(results);
+                        } else if (xhr.status == 0 || xhr.status == 400) {
+                            getJsonP(url);
+                        } else {
+                            that._printError(xhr.responseText);
+                        }
+                    }
+                };
+
+                xhr.open('GET', url, true);
+                xhr.send();
+            } else if (XDomainRequest) {
+                var xdr = new XDomainRequest();
+
+                xdr.onerror = function (err) {
+                    that._printError(err);
+                };
+
+                xdr.onload = function () {
+                    var response = JSON.parse(xdr.responseText),
+                        results = provider.ParseJSON(response);
+
+                    that._processResults(results);
+                };
+
+                xdr.open('GET', url);
+                xdr.send();
+            } else {
+                getJsonP(url);
+            }
+        }
+    },
+
+    _processResults: function(results) {
+        if (results.length > 0) {
+            this._map.fireEvent('geosearch_foundlocations', {Locations: results});
+            this._showLocation(results[0]);
+        } else {
+            this._printError(this._config.notFoundMessage);
+        }
+    },
+
+    _showLocation: function (location) {
+        if (this.options.showMarker == true) {
+            if (typeof this._positionMarker === 'undefined')
+                this._positionMarker = L.marker([location.Y, location.X]).addTo(this._map);
+            else
+                this._positionMarker.setLatLng([location.Y, location.X]);
+        }
+
+        this._map.setView([location.Y, location.X], this._config.zoomLevel, false);
+        this._map.fireEvent('geosearch_showlocation', {Location: location});
+    },
+
+    _printError: function(message) {
+        var elem = this._resultslist;
+        elem.innerHTML = '<li>' + message + '</li>';
+        elem.style.display = 'block';
+
+        setTimeout(function () {
+            elem.style.display = 'none';
+        }, 3000);
+    },
+
+    _onKeyUp: function (e) {
+        var esc = 27,
+            enter = 13,
+            queryBox = document.getElementById('leaflet-control-geosearch-qry');
+
+        if (e.keyCode === esc) { // escape key detection is unreliable
+            queryBox.value = '';
+            this._map._container.focus();
+        } else if (e.keyCode === enter) {
+            this.geosearch(queryBox.value);
+        }
+    }
+});

lib/leaflet_geosearch/l.geosearch.css

@@ -0,0 +1,38 @@
+.leaflet-center {
+	width: 40%;
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+}
+.leaflet-control-geosearch, .leaflet-control-geosearch ul {
+	border-radius: 7px;
+	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
+	margin: 10px 0 0 0;
+	padding: 5px;
+	width: 100%;
+	height: auto;
+}
+.leaflet-control-geosearch-msg ul {
+	list-style: none;
+	display: none;
+	height: auto;
+	background: none;
+	padding: 0;
+}
+.leaflet-control-geosearch ul li {
+	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
+    border-radius: 4px;
+    margin: 2px 0;
+    padding: 4px;
+    font: 12px arial;
+    text-indent: 4px;
+}
+.leaflet-container .leaflet-control-geosearch input {
+	width: 100%;
+	height: 28px;
+	padding: 0;
+	text-indent: 8px;
+	background: rgba(255, 255, 255, 0.75);			
+	border-radius: 4px;
+	border: none;
+}

lib/leaflet_geosearch/l.geosearch.provider.esri.js

@@ -0,0 +1,41 @@
+/**
+ * L.Control.GeoSearch - search for an address and zoom to it's location
+ * L.GeoSearch.Provider.Esri uses arcgis geocoding service
+ * https://github.com/smeijer/leaflet.control.geosearch
+ */
+
+L.GeoSearch.Provider.Esri = L.Class.extend({
+    options: {
+
+    },
+
+    initialize: function(options) {
+        options = L.Util.setOptions(this, options);
+    },
+
+    GetServiceUrl: function (qry) {
+        var parameters = L.Util.extend({
+            text: qry,
+            f: 'pjson'
+        }, this.options);
+
+        return location.protocol 
+            + '//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find'
+            + L.Util.getParamString(parameters);
+    },
+
+    ParseJSON: function (data) {
+        if (data.locations.length == 0)
+            return [];
+
+        var results = [];
+        for (var i = 0; i < data.locations.length; i++)
+            results.push(new L.GeoSearch.Result(
+                data.locations[i].feature.geometry.x, 
+                data.locations[i].feature.geometry.y, 
+                data.locations[i].name
+            ));
+
+        return results;
+    }
+});

src/controllers/incidentenCtrl.js

@@ -69,15 +69,19 @@ icm.controller('IncidentenCtrl' ,['$scope', 'Core', 'Utils', 'Beelden', '$state'
                 newItems();
             });
         });
-
+        //TT: adding an extra sync for the itemstore and group here when selecting the project.
+        //Just in case the project was recently added from WS and no itemstore was added thereupon
+        //TODO: This is workaround for an outstanding bug (#113) for COW
+        itemstore.sync();
+        project.groupStore().sync(); //we're not using groupstore but just being consistent
+
          Beelden.reset(new Date().getTime());
         // Beelden.reset(); 
          LeafletService.reset();
          newItems();
     };
 
     $scope.hasActiveUsers = function (item) {
-        console.log('ID: ' + item.id() + ', Name:' + item.data('name'));
         var activeUsers = _(cow.users()).filter(function(d){return !d.deleted();});
         var onlinePeers = _(cow.peers()).filter(function(d){return !d.deleted();});
         var peersByUser = _.groupBy(onlinePeers, function(d){ return d.data('userid');});