I'd like to recreate what has been describe here by gwendall. In short : I want to figure out a way to print a popup for each marker with data from leaflet-angular marker objects. I am working with Ionic. I would like too to use an external html template so that I can customize look and feel of the popup.
Would you have any idea ? Thanks PS: the current map has clustering implemented
CONTROLLER.JS :
angular.module('wmapp.controllerRestaurant', [])
.controller('MapCtrl', function($scope, leafletEvents) {
var local_icons = {
restaurantIcon: {
iconUrl: 'img/restaurant_pointer_WMcustom_40x49_v3.png',
shadowUrl: '',
iconSize: [40, 49], // size of the icon
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
/*shadowSize: [50, 64], // size of the shadow
shadowAnchor: [4, 62], // the same for the shadow*/
},
venueAllIcon: {
iconUrl: 'img/restaurantBIS_pointer_WMcustom_40x49_v3.png',
shadowUrl: '',
iconSize: [40, 49], // size of the icon
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
/*shadowSize: [50, 64], // size of the shadow
shadowAnchor: [4, 62], // the same for the shadow*/
},
};
$scope.eventStatus = 'Map View';
angular.extend($scope, {
defaults: {
tileLayer: "http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png",
maxZoom: 18,
path: {
weight: 10,
color: '#800000',
opacity: 1
}
},
center: { // auto-geolocation will only work is <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> is set in the AndroidManifest.xml file
autoDiscover: true
},
Paris: {
lat: 48.85,
lng: 2.33,
zoom: 8
},
markers: {
MAK002: {
group: 'Paris',
lat: 48.829102,
lng: 2.327705,
title: "Marker",
icon: local_icons.restaurantIcon,
},
MAK003: {
group: 'Paris',
lat: 48.8295,
lng: 2.327705,
title: "Marker",
icon: local_icons.restaurantIcon,
},
//more object ( apx 700)
},
});
});
var showPopup = function(marker_id) {
var marker = $scope.markers[marker_id],
content = marker.title,
latLng = [marker.lat, marker.lng],
popup = L.popup({ className : 'custom-popup' }).setContent(content).setLatLng(latLng);
leafletData.getMap().then(function(map) {
popup.openOn(map);
});
}
and html :
<div class="rest_map_container" ng-controller="MapCtrl" > <!-- -->
<div data-tap-disabled="true" >
<leaflet defaults="defaults" markers="markers" center="center" style="width: 100%; height: 470px;">
</leaflet>
</div>