Fix location editing: place marker for previous location T1397

Summary: - Better isolation on leaflet directive scope - Update marker and center using scope vars instead of accessing the map directly - Init the map with current location markers on it Test Plan: Go to a post (ie. posts/1) Click Edit Check the previous location is shown on the location editor Edit location(s) and save post Check location was saved Reviewers: aMoniker, spaudanjo Maniphest Tasks: T1397 Differential Revision: https://phabricator.ushahidi.com/D698
ushahidi · Mar 12, 2015 · e551600 · e551600
1 parent 83b3f97
commit e551600
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 40 deletions.
diff --git a/app/common/services/geocoding.js b/app/common/services/geocoding.js
@@ -34,7 +34,7 @@ function(
         search: function(location_name) {
             return this.query({ q: location_name }).then(function(result) {
                 if (result && result[0] && result[0].lat && result[0].lon) {
-                    return [result[0].lat, result[0].lon];
+                    return [parseFloat(result[0].lat), parseFloat(result[0].lon)];
                 } else {
                     return null;
                 }

diff --git a/app/post/directives/post-location-directive.js b/app/post/directives/post-location-directive.js
@@ -14,9 +14,10 @@ function(
         restrict: 'E',
         replace: true,
         scope: {
-            attribute: '=',
-            values: '=',
-            key: '='
+            id: '@',
+            name: '@',
+            model: '=',
+            required: '='
         },
         templateUrl: 'templates/posts/location.html',
         controller: [
@@ -29,52 +30,60 @@ function(
             Leaflet
         ) {
 
-            var marker = null;
+            var markers = {},
+                center = {
+                    lat: 36.079868,
+                    lng: -79.819416,
+                    zoom: 4
+                },
+                mapName = $scope.id + '-map';
+
+            // init markers with current model value
+            if ($scope.model) {
+                markers = {
+                    m1 : {
+                        lat: $scope.model.lat,
+                        lng: $scope.model.lon
+                    }
+                };
+                center = {
+                    lat: $scope.model.lat,
+                    lng: $scope.model.lon,
+                    zoom: 4
+                };
+            }
 
             // leaflet map or location attribute
             angular.extend($scope, {
                 defaults: {
                     scrollWheelZoom: false
                 },
 
-                center: {
-                    lat: 36.079868,
-                    lng: -79.819416,
-                    zoom: 4
-                },
+                center: center,
 
-                updateLatLon: function(lat, lon){
-                    if($scope.values[$scope.attribute.key] !== null)
-                    {
-                        $scope.values[$scope.attribute.key] = {};
-                    }
-                    if($scope.values[$scope.attribute.key][$scope.key] !== null)
-                    {
-                        $scope.values[$scope.attribute.key][$scope.key] = {};
-                    }
+                markers: markers,
 
-                    $scope.values[$scope.attribute.key][$scope.key].lat = lat;
-                    $scope.values[$scope.attribute.key][$scope.key].lon = lon;
+                updateLatLon: function(lat, lon) {
+                    $scope.model = {
+                        lat: lat,
+                        lon: lon
+                    };
                 },
 
 
-                updateMarkerPosition: function(lat, lon){
-                    leafletData.getMap($scope.attribute.key).then(function(map){
-                        if(marker !== null)
-                        {
-                            map.removeLayer(marker);
-                        }
-
-                        marker = new Leaflet.Marker(new Leaflet.latLng(lat, lon), {draggable:true});
-                        map.addLayer(marker);
-
-                    });
+                updateMarkerPosition: function(lat, lon) {
+                    $scope.markers.m1 = {
+                        lat: lat,
+                        lng: lon,
+                    };
                 },
 
-                centerMapTo: function(lat, lon){
-                    leafletData.getMap($scope.attribute.key).then(function(map) {
-                        map.panTo(new Leaflet.LatLng(lat, lon));
-                    });
+                centerMapTo: function(lat, lon) {
+                    $scope.center = {
+                        lat : lat,
+                        lng : lon,
+                        zoom: 4
+                    };
                 },
 
                 searchLocation: function(event){
@@ -95,7 +104,7 @@ function(
                 }
             });
 
-            leafletData.getMap($scope.attribute.key).then(function(map) {
+            leafletData.getMap(mapName).then(function(map) {
                 map.on('click', onMapClick);
                 function onMapClick(e) {
                     var wrappedLatLng = e.latlng.wrap(),
@@ -109,6 +118,9 @@ function(
                 Leaflet.control.locate({
                     follow: true
                 }).addTo(map);
+
+                // treate locationfound same as map click
+                map.on('locationfound', onMapClick);
             });
         }]
     };

diff --git a/server/www/templates/posts/location.html b/server/www/templates/posts/location.html
@@ -1,10 +1,10 @@
 <div class="input-location">
     <div class="input-group">
-        <input class="form-control" name="{{attribute.key}}" type="text" placeholder="Enter a location.." ng-model="searchLocationTerm" ng-required="attribute.required">
+        <input class="form-control" name="{{name}}" type="text" placeholder="Enter a location.." ng-model="searchLocationTerm" ng-required="required">
         <span class="input-group-btn">
             <button class="btn btn-info" ng-click="searchLocation($event)" translate>location.search</button>
         </span>
     </div>
-    <leaflet id="{{attribute.key}}" markers="markers" center="center" height="265px" width="100%"></leaflet>
+    <leaflet id="{{id}}-map" markers="markers" center="center" height="265px" width="100%"></leaflet>
     <p translate>location.click_map</p>
 </div>
diff --git a/server/www/templates/posts/modify.html b/server/www/templates/posts/modify.html
@@ -85,7 +85,7 @@ <h3 translate translate-values="{ type: active_form.name, title: post.title }" n
                         </div>
 
                         <!-- type: location -->
-                        <post-location attribute="attribute" values="post.values" key="key" ng-if="isLocation(attribute)"></post-location>
+                        <post-location attribute="attribute" key="key" id="values[{{attribute.key}}][{{key}}]" name="values_{{attribute.key}}" model="post.values[attribute.key][key]" required="attribute.required" ng-if="isLocation(attribute)"></post-location>
 
                         <!-- type: select -->
                         <select class="form-control" ng-if="isSelect(attribute)" id="values[{{attribute.key}}][{{key}}]" name="values_{{attribute.key}}" ng-model="post.values[attribute.key][key]" ng-required="attribute.required">