implemented geolocation to events create and on event show
arnaucode idoctnef@openmailbox.org
Wed, 22 Feb 2017 21:28:32 +0100
4 files changed,
74 insertions(+),
10 deletions(-)
M
www/js/event.js
→
www/js/event.js
@@ -36,12 +36,12 @@ $scope.markers=[];
$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 }; }
M
www/js/newEvent.js
→
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,11 +20,53 @@ method: "POST",
data: $scope.event }) .then(function(data) { + $scope.event={}; window.location.href="#/app/events"; }, function(response) { // optional // failed 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 + }; + } + }); + }; });
M
www/templates/event.html
→
www/templates/event.html
@@ -5,7 +5,7 @@ <img ng-src="{{event.user.img}}">
<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.description}}</p>
<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
M
www/templates/newEvent.html
→
www/templates/newEvent.html
@@ -26,8 +26,20 @@ <option>Debat</option>
<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>