i trying test develop ionic app leaflet-angularjs-directive. there's not many demos me try out.
i using: ionic-leafletjs-map-demo calendee (github) https://github.com/calendee/ionic-leafletjs-map-demo
and trying reproduce locationsservice service: historicalmapservice. whenever have added historicalmapservice, webpage view "ionic serve" blank. when commented it, webpage working didn't use historicalmapservice.
here's code in mapcontroller.js (js/controller/mapcontroller.js)
angular.module('starter').controller('mapcontroller', [ '$scope', '$cordovageolocation', '$stateparams', '$ionicmodal', '$ionicpopup', 'locationsservice', /*'historicalmapservice',*/ 'instructionsservice', function( $scope, $cordovageolocation, $stateparams, $ionicmodal, $ionicpopup, locationsservice, /*historicalmapservice,*/ instructionsservice ) { /** * once state loaded, put map on scope. */ $scope.$on("$statechangesuccess", function() { $scope.locations = locationsservice.savedlocations; $scope.newlocation; if(!instructionsservice.instructions.newlocations.seen) { var instructionspopup = $ionicpopup.alert({ title: 'add locations', template: instructionsservice.instructions.newlocations.text }); instructionspopup.then(function(res) { instructionsservice.instructions.newlocations.seen = true; }); } $scope.map = { defaults: { tilelayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17' }, center: { lat: 1.355, lng: 103.840, zoom: 14, minzoom: 12, maxzoom: 18, zoomcontrolposition: 'topleft' }, markers : {}, events: { map: { enable: ['context'], logic: 'emit' } } }; //$scope.goto(0); $scope.locate(); }); var location = function() { if ( !(this instanceof location) ) return new location(); this.lat = ""; this.lng = ""; this.name = ""; }; $ionicmodal.fromtemplateurl('templates/addlocation.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); /** * detect user long-pressing on map add new location */ $scope.$on('leafletdirectivemap.contextmenu', function(event, locationevent){ $scope.newlocation = new location(); $scope.newlocation.lat = locationevent.leafletevent.latlng.lat; $scope.newlocation.lng = locationevent.leafletevent.latlng.lng; $scope.modal.show(); }); $scope.savelocation = function() { locationsservice.savedlocations.push($scope.newlocation); $scope.modal.hide(); $scope.goto(locationsservice.savedlocations.length - 1); }; /** * center map on specific saved location * @param locationkey */ $scope.goto = function(locationkey) { var location = locationsservice.savedlocations[locationkey]; $scope.map.center = { lat : location.lat, lng : location.lng, zoom : 12 }; $scope.map.markers[locationkey] = { lat:location.lat, lng:location.lng, message: location.name, focus: true, draggable: false }; }; $scope.gotomapyear = function(histmap) { var histmap = historicalmapservice.locatemapyear[histmap]; console.log("map year: " + histmap.name); console.log("map layer: " + histmap.tilelayer); $scope.map = { defaults: { tilelayer: histmap.tilelayer }, center: { lat: 1.355, lng: 103.840, zoom: 14, minzoom: 12, maxzoom: 18, zoomcontrolposition: 'topleft' }, markers : {}, events: { map: { enable: ['context'], logic: 'emit' } } }; }; /** * center map on user's current position */ $scope.locate = function(){ $cordovageolocation .getcurrentposition() .then(function (position) { $scope.map.center.lat = position.coords.latitude; $scope.map.center.lng = position.coords.longitude; $scope.map.center.zoom = 15; $scope.map.markers.now = { lat:position.coords.latitude, lng:position.coords.longitude, message: "you here", focus: true, draggable: false }; }, function(err) { // error console.log("location error!"); console.log(err); }); }; }]); and historicalmapservice (js/services/historicalmapservice.js) in here: http://pastebin.com/mysu0dpk
and menu.html (templates/menu.html) follows:
<ion-nav-bar class="bar-positive nav-title-slide-ios7"> <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button> </ion-nav-bar> <ion-nav-view name="menucontent" animation="slide-left-right"></ion-nav-view> <header class="bar bar-header bar-stable"> <h1 class="title">map year</h1> </header> <ion-content class="has-header"> <ion-list> <!--<ion-item nav-clear menu-close ng-click="goto(locationkey)" ng-repeat="(locationkey,location) in locations track location.name"> {{location.name}} </ion-item>--> <ion-item nav-clear menu-close ng-click="gotomapyear(histmap)" ng-repeat="(histmap,mapyear) in mapyears track mapyear.name"> {{mapyear.name}} </ion-item> </ion-list> </ion-content> how can display layer's name , when user clicked on it, switch map in tms tilelayer?
thanks in advance help.
solved: updated
mapcontroller.js + using shared attributes
/*angular.module('starter').controller('mapcontroller', ['$scope', 'leafletdata', function($scope, leafletdata) { leafletdata.getmap().then(function(map) { l.geoip.centermaponposition(map, 15); }); } ]); */ angular.module('starter').controller('mapcontroller', [ '$scope', '$cordovageolocation', '$stateparams', '$ionicmodal', '$ionicpopup', '$http', 'locationsservice', 'instructionsservice', function( $scope, $cordovageolocation, $stateparams, $ionicmodal, $ionicpopup, $http, locationsservice, instructionsservice ) { /** * once state loaded, put map on scope. */ $scope.$on("$statechangesuccess", function() { $scope.locations = locationsservice.savedlocations; $scope.newlocation; if(!instructionsservice.instructions.newlocations.seen) { var instructionspopup = $ionicpopup.alert({ title: 'add locations', template: instructionsservice.instructions.newlocations.text }); instructionspopup.then(function(res) { instructionsservice.instructions.newlocations.seen = true; }); } $scope.basemaplayers = { basemap: { name: 'basemap', url: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map1955: { name: '1955', url: 'https://api.tiles.mapbox.com/v4/sla.d62b6062/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map1969: { name: '1969', url: 'https://api.tiles.mapbox.com/v4/sla.d33a760d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map1975: { name: '1975', url: 'https://api.tiles.mapbox.com/v4/sla.dbfef17c/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map1988: { name: '1988', url: 'https://api.tiles.mapbox.com/v4/sla.65929e4d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map1998: { name: '1998', url: 'https://api.tiles.mapbox.com/v4/sla.d7a29a60/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' }, map2007: { name: '2007', url: 'https://api.tiles.mapbox.com/v4/sla.7ce67a24/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', type: 'xyz' } } $scope.map = { defaults: { //tilelayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', //tilelayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png' layers: { baselayers: { basemap: $scope.basemaplayers.basemap, map2007: $scope.basemaplayers.map2007, map1998: $scope.basemaplayers.map1998, map1988: $scope.basemaplayers.map1988, map1975: $scope.basemaplayers.map1975, map1969: $scope.basemaplayers.map1969, map1955: $scope.basemaplayers.map1955 } } }, center: { lat: 1.355, lng: 103.840, zoom: 14, minzoom: 12, maxzoom: 18, zoomcontrolposition: 'topleft' }, markers : {}, events: { map: { enable: ['context'], logic: 'emit' } } }; //$scope.goto(0); $scope.locate(); //$scope.map2 = $scope.map; $scope.map2 = { defaults: { //tilelayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyj1ijoic2xhiiwiysi6ik15de1ucluifq.zmsbzxwozycsw3m71abszq#17', //tilelayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png' layers: { baselayers: { map1955: $scope.basemaplayers.map1955, map1969: $scope.basemaplayers.map1969, map1975: $scope.basemaplayers.map1975, map1988: $scope.basemaplayers.map1988, map1998: $scope.basemaplayers.map1998, map2007: $scope.basemaplayers.map2007, basemap: $scope.basemaplayers.basemap } } }, center: { lat: 1.355, lng: 103.840, zoom: 14, minzoom: 12, maxzoom: 18, zoomcontrolposition: 'topleft' }, markers : {}, events: { map: { enable: ['context'], logic: 'emit' } } }; //$scope.goto(0); $scope.locate(); }); var location = function() { if ( !(this instanceof location) ) return new location(); this.lat = ""; this.lng = ""; this.name = ""; }; $ionicmodal.fromtemplateurl('templates/addlocation.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); /** * detect user long-pressing on map add new location */ $scope.$on('leafletdirectivemap.contextmenu', function(event, locationevent){ $scope.newlocation = new location(); $scope.newlocation.lat = locationevent.leafletevent.latlng.lat; $scope.newlocation.lng = locationevent.leafletevent.latlng.lng; $scope.modal.show(); }); $scope.savelocation = function() { locationsservice.savedlocations.push($scope.newlocation); $scope.modal.hide(); $scope.goto(locationsservice.savedlocations.length - 1); }; /** * center map on specific saved location * @param locationkey */ $scope.goto = function(locationkey) { var location = locationsservice.savedlocations[locationkey]; $scope.map.center = { lat : location.lat, lng : location.lng, zoom : 14 }; $scope.map.markers[locationkey] = { lat:location.lat, lng:location.lng, message: location.name, focus: true, draggable: false }; }; $scope.gotomapyear = function(histmap) { var mapyear = historicalmapservice.locatemapyear[histmap]; }; /** * center map on user's current position */ $scope.locate = function(){ $cordovageolocation .getcurrentposition() .then(function (position) { $scope.map.center.lat = position.coords.latitude; $scope.map.center.lng = position.coords.longitude; $scope.map.center.zoom = 15; $scope.map.markers.now = { lat:position.coords.latitude, lng:position.coords.longitude, message: "you here", focus: true, draggable: false }; }, function(err) { // error console.log("location error!"); console.log(err); }); }; }]); map.html (not using menu.html)
<ion-view title="onemap"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button ng-click="locate();" title="search" class="button button-icon icon ion-ios-search-strong"></button> </ion-nav-buttons> <div class="row"> <ion-content data-tap-disabled="true" class="col col-50"> <leaflet id="map1" event-broadcast="map.defaults.events" defaults="map.defaults" center="map.center" markers="map.markers" layers="map.defaults.layers" width="100%" height="100%" ng-if="map"></leaflet> </ion-content> <ion-content data-tap-disabled="true" class="col col-50" style="left: 50%;"> <leaflet id="map2" event-broadcast="map.defaults.events" defaults="map.defaults" center="map.center" markers="map.markers" layers="map2.defaults.layers" width="100%" height="100%" ng-if="map2"></leaflet> </ion-content> </div> <ion-tabs id="actiontabs" class="tabs-positive tabs-icon-top"> <a ng-click="locate();" name="find me" class="button button-icon icon ion-pinpoint" style="color: white;"></button> </ion-tab> </ion-tabs> </ion-view> 
Comments
Post a Comment