I'm facing an issue with the circle marker in ui leaflet plugin. When ever a some one clicks on a circle im getting the popup but if I click outside the circle in the map and then try clicking circle again the popup is not coming up.
Can you please suggest what might be the problem? and is there any workaround for this?
Steps to reproduce
- In map click one circle marker
- Move the circle marker out of scope of map
- Then try clicking any other marker the pop up will not appear
- If I clicked outside the circle and clicked circle again the pop up appears again
Below is the snippet of the code if you need full code please visit this github link
https://github.com/Umamaheswaran1990/learningleaflet
HTML
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="../bower_components/ui-leaflet/dist/ui-leaflet.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="app.js"></script>
</head>
<body ng-controller="LayersSimpleController as vm">
<leaflet center="center" tiles="tiles" paths="paths" width="50%" height="480px"></leaflet>
</body>
</html>
JS
var app = angular.module("demoapp", ['ui-leaflet']);
app.controller("LayersSimpleController", ["$scope", function ($scope) {
var vm = this;
$scope.$on('leafletDirectiveMap.map.load', function (event, data) {
var map = data.leafletObject;
map.attributionControl.setPrefix(false);
});
$scope.$on('leafletDirectiveMap.moveend', function (event, data) {
activate();
});
var map = [
{ "lat": 30.7559, "lon": -96.489 },
{ "lat": 41.8887, "lon": -111.769 }];
angular.extend($scope, {
center: {
lat: 39.774769,
lng: -98.789062,
zoom: 4,
minZoom: 4,
zoomControl: true,
},
events: {},
tiles: {
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
options: {
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
},
layers: {},
defaults: {
}
}
});
activate();
function activate() {
$scope.paths = {};
angular.forEach(map, function (value, key) {
if (value.lat !== null && value.lon !== null) {
$scope.paths['circle' + key] = {
type: 'circleMarker',
className: 'testClass',
fillColor: 'DarkSlateGray',
color: '#000000',
weight: 0,
opacity: 1,
message: 'This is a test marker',
fillOpacity: 0.8,
stroke: false,
clickable: true,
latlngs: [parseFloat(value.lat), parseFloat(value.lon)],
radius: 20
};
}
});
}
}]);
I got it to work by adding
to the leaflet element in index.html, and adding
to app.js
I'm not sure why this was necessary as the ui-leaflet events example says that all broadcast events are enabled by default. http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/events-example