Hey people, I am using an ionic list and an angular-google-map in one view, i change the z-index so they don’t overlapse but the output of the list are the markers on the map, and i want to be able to switch between them real fast so the map doesn’t have to reload. the map looks great but I just can’t get collection-repeat to function properly. at first I used a normal list which gave me no trouble, but now i’m looking at 10.000+ markers and the normal list becomes laggy so I have to switch. this is my code.
<ion-header-bar class="bar-stable">
<div ng-if="selection == 'map'">
<button ng-click="toggleLeftSideMenu()" class="button button-icon icon ion-search"></button>
<button class="button button-icon icon ion-navicon-round" ng-click="showList()" ></button>
<h1 class="title">We Alert Map</h1>
</div>
<div ng-if="selection == 'list'">
<button ng-click="toggleLeftSideMenu()" class="button button-icon icon ion-search"></button>
<button class="button button-icon icon ion-ios7-location" ng-click="showMap()" ></button>
<h1 class="title">We Alert list</h1>
</div>
<div ng-if="selection == 'details'">
<button class="button button-icon icon ion-ios7-location" ng-click="showMap()" ></button>
<h1 class="title">We Alert Details</h1>
</div>
</ion-header-bar>
<ion-content scroll="false" ng-show="selection == 'map'" data-tap-disabled="true">
<google-map center="map.center" draggable="true" zoom="map.zoom" options="map.options" events="map.events">
<markers models="map.markers" doCluster="true" doRebuildAll='rebuildAll'
coords="'self'" icon="'icon'" click="'onclicked'"
labelContent="'labelContent'"
labelAnchor="16 33"
labelClass="labelClass"
options="'options'"
idkey='id' clusterOptions='map.clusterOptions'>
</markers>
<marker ng-if="done == '1'" idkey="mmarker.id" options="mmarker.options" coords="mmarker.coords" icon="mmarker.icon"></marker>
</google-map>
<ion-list ng-show="itemSelected" class="bottom">
<ion-item class="item item-thumbnail-left" ui-sref="details({alertid:marker.id})">
<img ng-src="{{marker.img}}">
<span class="title" ng-bind="marker.title">
</span>
<button class="button button-icon button-clear icon ion-chevron-right"></button>
<span class="button button-light distance" ng-bind="marker.distance">
</span>
<span class="button button-light count ion-chatbox"> {{marker.reactiecount}}
</span>
<span class="button button-light likecount ion-heart"> {{marker.likecount}}
</span>
</ion-item>
</ion-list>
</ion-content>
<ion-content style="{{list}}">
<div class="list">
<div class="item item-thumbnail-left"
collection-repeat="marker in map.markers"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index) }"
ui-sref="details({alertid:marker.id})"
>
<img ng-src="{{marker.img}}" >
<span class="title" ng-bind="marker.title">
</span>
<button class="button button-icon button-clear icon ion-chevron-right"></button>
<span class="button button-light distance" ng-bind="marker.distance">
</span>
<span class="button button-light count ion-chatbox"> {{marker.reactiecount}}
</span>
<span class="button button-light likecount ion-heart"> {{marker.likecount}}
</span>
</div>
</div>
</ion-content> `
javascript code:
.controller('AlertsCtrl', function($scope,$http, $ionicLoading, currentLocation, $ionicScrollDelegate, $filter,$rootScope ,$timeout) {
$scope.selection = 'map';
$scope.list = 'z-index : -1;';
$scope.showMap = function(){
$scope.selection = 'map';
$scope.list = 'z-index : -1;';
};
$scope.showList = function(){
$scope.selection = 'list';
$scope.list = 'z-index : 2;';
};
$scope.showDetails = function(id){
$scope.itemSelected = false;
$scope.marker = $scope.map.markers[id];
$scope.selection = 'details';
$scope.list = 'z-index : -1;';
};
$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return "100px";
};
$scope.getItemWidth = function(item) {
return '100%';
};
var icon = {
url: 'img/marker_red.png', // url
scaledSize: new google.maps.Size(36.5, 61), // size
};
if($rootScope.lat != undefined){
$scope.lat = $rootScope.lat;
$scope.long = $rootScope.lon;
$rootScope.lat = undefined;
}else{
$scope.lat = currentLocation.lat
$scope.long = currentLocation.long
}
angular.extend($scope, {
map : {
center : {
latitude: $scope.lat,
longitude: $scope.long,
},
options : {
zoomControl:true,
mapTypeControl: false,
streetViewControl:false,
optimized: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: $rootScope.myStyles
},
zoom : 15,
events: {
idle:function (map) {
$scope.rebuildAll=false;
showMarkers(map)
},
click:function() { $scope.itemSelected = false; }
},
clusterOptions: {
minimumClusterSize : 5
}
}
});
function removeSelected(){
$scope.$apply(function(){
});
}
$scope.map.markers = [];
var i = "0";
function showMarkers(map){
//$scope.rebuildAll=false;
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
// Call you server with ajax passing it the bounds
$http({method: 'GET', url: '****/'+ne+'/'+sw}).
success(function(data, status, headers, config) {
//$scope.markers.push(marker);
// To add the marker to the map, use the 'map' property
angular.forEach(data,function(value,key){
var found = $filter('filter')($scope.map.markers,{'id': value[3]},true)
if (!found.length) {
var from = new google.maps.LatLng(currentLocation.lat, currentLocation.long);
var to = new google.maps.LatLng(value[1],value[2]);
var dist = google.maps.geometry.spherical.computeDistanceBetween(from, to);
// To add the marker to the map, use the 'map' property
var km = dist / 1000;
if(km > 1){
var dist =(Math.round(km) + " km");
}else {
var dist =(dist.toFixed(0) + "m");
}// 1613.8 km
var unfilterd = value[4];
var date = new Date(unfilterd.replace(/-/g,"/"));
$scope.map.markers.push({
id: value[3],
latitude: angular.fromJson(value[1]),
longitude: angular.fromJson(value[2]),
icon: icon,
labelContent : dist + '<br />'+$filter('date')(date,'d-M'),
labelClass: "labels",
title : value[0],
distance : dist,
img : '***'+value[7]+'_thumb.jpg',
reactiecount : value[5],
likecount : value[6],
options: {
animation: 2
},
onclicked: function(){
markerClicked(this);
}
});
}
});
if(i == "0"){
$scope.addMyLocation();
}
i++;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
$scope.mmarker = {};
var myicon = {
url: 'img/pointer.png', // url
scaledSize: new google.maps.Size(40, 45), // size
};
$scope.addMyLocation = function() {
$scope.done = '1';
$scope.mmarker = {
id: '0',
coords : {
latitude: currentLocation.lat,
longitude: currentLocation.long
},
icon: myicon,
options: {
zIndex : $scope.map.markers.length + 1,
optimized: false,
animation: 2
}
};
}
function markerClicked(marker) {
var marker = marker.model;
$scope.$apply(function(){
$scope.selected = "";
$scope.itemSelected = true;
marker.options = {animation:1};
$timeout(
function cancelAnimation(){
marker.options = {animation:0};
}, 750);
$scope.marker = marker;
});
}
})