I am trying to test develop ionic app for leaflet-angularjs-directive. There's not many demos for me to try out.
I am using: ionic-leafletjs-map-demo by calendee (github) https://github.com/calendee/ionic-leafletjs-map-demo
And I am trying to reproduce the LocationsService to an another service: HistoricalMapService. Whenever I have added that HistoricalMapService, the webpage view for "ionic serve" is blank. When I commented it, the webpage is working but didn't use the HistoricalMapService.
Here's my code in the 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, get 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 to 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 Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
}]);
And my historicalMapService (js/services/historicalMapService.js) in here: http://pastebin.com/mYsU0Dpk
And my menu.html (templates/menu.html) as 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 by location.name">
{{location.name}}
</ion-item>-->
<ion-item nav-clear menu-close ng-click="goToMapYear(histmap)" ng-repeat="(histmap,mapyear) in mapyears track by mapyear.name">
{{mapyear.name}}
</ion-item>
</ion-list>
</ion-content>
How can I display the Layer's Name and when the user clicked on it, it will switch the map in the TMS TileLayer?
Thanks in advance for the help.
