implemented geolocation to events create and on event show

www/js/event.js

@@ -36,12 +36,12 @@ angular.module('app.event', ['pascalprecht.translate', 'ui-leaflet'])
                 $scope.markers.push({
                     lat: Number($scope.event.location.geo.lat),
                     lng: Number($scope.event.location.geo.long),
-                    message: $scope.event.location.name
+                    message: $scope.event.location.direction
                 });
                 $scope.center= {
-                    lat: (Number($scope.travel.from.lat)+Number($scope.travel.to.lat))/2,
-                    lng: (Number($scope.travel.from.long)+Number($scope.travel.to.long))/2,
-                    zoom: 4
+                    lat: Number($scope.event.location.geo.lat),
+                    lng: Number($scope.event.location.geo.long),
+                    zoom: 16
                 };
             }
 

www/js/newEvent.js

@@ -1,9 +1,18 @@
-angular.module('app.newEvent', ['pascalprecht.translate'])
+angular.module('app.newEvent', ['pascalprecht.translate', 'ui-leaflet'])
 
-.controller('NewEventCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
+.controller('NewEventCtrl', function($scope, $http, $ionicModal, $timeout,
+    $ionicLoading, $filter, leafletData, leafletBoundsHelpers) {
 
     $scope.event={};
     $scope.event.categories=[{name: "prova"}];
+    $scope.event.location={
+        direction: "",
+        geo: {
+            lat: "",
+            long: "",
+            name: ""
+        }
+    };
     $scope.postEvent = function(){
         $http({
             url: urlapi + 'events',
@@ -11,6 +20,7 @@ angular.module('app.newEvent', ['pascalprecht.translate'])
             data: $scope.event
         })
         .then(function(data) {
+            $scope.event={};
             window.location.href="#/app/events";
         },
         function(response) { // optional
@@ -18,4 +28,45 @@ angular.module('app.newEvent', ['pascalprecht.translate'])
                 console.log(response);
         });
     };
+
+    /* map */
+
+    $scope.center= {
+        lat: 0,
+        lng: 0,
+        zoom: 1
+    };
+    $scope.markers=new Array();
+    $scope.tiles= {
+        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        options: {
+            attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }
+    };
+    $scope.getGeo = function(){
+
+        $scope.markers=[];
+        console.log($scope.event.location.direction);
+        $http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.event.location.direction + '&format=json&limit=1')
+        .then(function(data) {
+            console.log(data);
+            if(data.data[0])
+            {
+                $scope.event.location.geo.lat=data.data[0].lat;
+                $scope.event.location.geo.long=data.data[0].lon;
+                //$scope.newtravel.from.name=data.data[0].display_name;
+                $scope.markers.push({
+                    lat: Number(data.data[0].lat),
+                    lng: Number(data.data[0].lon),
+                    message: $scope.event.location.direction
+                });
+                $scope.center= {
+                    lat: Number(data.data[0].lat),
+                    lng: Number(data.data[0].lon),
+                    zoom: 16
+                };
+            }
+        });
+
+    };
 });

www/templates/event.html

@@ -5,7 +5,7 @@
       <h2>{{event.user.username}}</h2>
       <p>{{event.user.shortDescription}}</p>
     </a>
-    <div class="item item-image">
+    <div class="item item-image" ng-show="event.img">
       <img ng-src="{{event.img}}">
     </div>
     <div class="item">
@@ -14,10 +14,11 @@
       <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
   </div>
 
-    <div class="item">
+    <div class="item" ng-show="markers[0]">
       <h2>Map</h2>
     </div>
-    <leaflet width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
+    <leaflet ng-show="markers[0]"
+    width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
 
     <a class="item item-icon-left ctext_indigo500" ng-click="share(event)">
       <i class="icon ion-android-share-alt"></i> Share

www/templates/newEvent.html

@@ -26,8 +26,20 @@
                     <option>Taller</option>
                 </select>
             </label>-->
+            <label class="item item-input">
+                <input type="text" ng-model="event.location.direction" placeholder="Direction">
+            </label>
+            <div ng-click="getGeo()" class="button button-small c_indigo400 item-note"
+            ng-show="event.location.direction">
+                Get geolocation
+            </div>
+        </div>
+            <leaflet ng-show="markers[0]"
+            width="100%" height="40%" markers="markers" center="center"
+            tiles="tiles" id="map-simple-map"></leaflet>
+
             <div class="item">
-                <div ng-click="postEvent()" class="button c_indigo400 item-note">
+                <div ng-click="postEvent()" class="button c_indigo400 item-note" ng-show="event.location.geo.lat">
                     Post new event!
                 </div>
             </div>