I have integrated a map that displays clients using markers. The map I am utilizing is Leaflet with an AngularJS directive.
The issue I am facing is that when I initially access the map, it functions correctly. However, when I change routes, all the markers disappear. Upon returning to the map screen, the markers do not show up until I reload the page.
Solution:
To address this problem, I implemented a function $window.location.reload() to reload the page whenever I access the page where the map is located. This function is triggered when clicking on the menu icon of the page associated with the map, effectively reloading the page and displaying the markers once again.
vm.reloadRoute = function (){
$window.location.reload();
}
View: Here is the code snippet responsible for loading the map.
<div class="col-md-12 box_map" style="padding: 20px 30px 20px 30px;">
<div id="recent_activity" class="box_whiteframe_map">
<leaflet defaults="vm.defaults" lf-center="vm.center" ng-init="vm.searchClientCompanyAddress()" markers="vm.markers" width="100%" height="480px"></leaflet>
</div>
Controller: Within the controller, you'll find the function used to fetch data from the database and assign it to the markers. It's also within this function that the markers are created and additional map properties are extended, defining its initial position.
vm.markers = new Array(); // Create markers to be used on the map
vm.searchClientCompanyAddress = function() {
// Function used to load DB data and assign to markers...
vm.items.then(function(items) {
relatoriosService.loadClientCompanyAddress(data).then(function(response) {
if (response.data !== 'null') {
vm.clientCompanyAddresses = response.data;
angular.forEach(vm.clientCompanyAddresses, function(value, key) {
vm.markers.push({
group: value.state,
lat: value.latitude,
lng: value.longitude,
message: "test",
icon: {
type: 'awesomeMarker',
prefix: 'fa',
icon: icon,
markerColor: color
},
label: {
options: {
noHide: true
}
}
});
});
} else {
vm.clientCompanyAddresses = '';
}
}, function(error) {
console.log('Error finding without Email: ', error);
});
});
}
angular.extend(vm, {
center: {
lat: -27.952419,
lng: -52.211667,
zoom: 6
},
defaults: {
tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | © <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>',
},
}
});
Despite my solution, there remains an issue where navigating back using the browser arrow does not trigger a page reload. Is there a way to force a page reload in such instances?
Alternatively, is it possible to reload the page upon accessing a specific route?