I’m using Ionic and Angular Leaflet Directive for an app with a map that has about 1000 markers and about 100 paths. The map needs to be displayed in some cases with with all markers and paths on it, and in other cases with a subset of markers and paths.
Without caching, returning to the full map takes 5-10 seconds, the time to reload map and redraw markers.So I was very happy to see the introduction of caching in beta14.
But there is a problem. I can’t seem to find a way to update the markers/paths of the same map that is already loaded.
This is what I have as a state for the map holder:
.state('tab.dash', {
url: '/dash',
params: {'type' : 'dash', 'id' : '0', 'title' : 'Map'},
views: {
'tab-dash': {
templateUrl: 'templates/map.html',
controller: 'MapCtrl',
}
}
})
By default, this loads the whole map. From another state, with an ion-list, I have the following action:
<ion-item ng-repeat="item in list" type="item-text-wrap" class="item-icon-right" ng-click="go({{item.id}}, 'destination')">
And the corresponding controller has this:
$scope.go = function(id, type) {
var active_map = {};
active_map.id = id;
active_map.type = type;
$state.go('tab.dash', active_map);
}
This works, but it loads a second <ion-view>
element inside <ion-nav-view name="tab-dash">
. This causes problems with the angular leaflet directive, but more importantly, it’s not as fast as updating the markers/paths of an already loaded map. Is there a way I can just update the existing <ion-view>
, instead of loading a new one?