I'm trying to add/remove markers to a leaflet map. I have 6 checkboxes, what i want is that when I check any of them show the points in the map, and when uncheck one of them the only to remove is the one I uncheck.
What I have,
The checkboxes:
.row .col-md-12 .row label.col-md-7 First check input.col-md-1(type="checkbox" ng-model="locations.somecheck1") .row label.col-md-7 Second check input.col-md-1(type="checkbox" ng-model="locations.somecheck2") .row label.col-md-7 Third check input.col-md-1(type="checkbox" ng-model="locations.somecheck3") .row label.col-md-7 Fourth check input.col-md-1(type="checkbox" ng-model="locations.somecheck4") .row label.col-md-7 Five check input.col-md-1(type="checkbox" ng-model="locations.somecheck5") .row label.col-md-7 Six check input.col-md-1(type="checkbox" ng-model="locations.somecheck6")The controller:
$scope.$watch('locations.somecheck1', function(somecheck1) { if ($scope.locations.somecheck1 === true) { findItem.find(function(err, items) { lastLocationItems = items[0].items; items = lastLocationItems.map((item) => GeoService.toGeoJSON(item, { idKey: '_id', geometryKey: 'lastLocation'})); getEpc(items, ssccIcon); }); } else { leafletData.getMap().then(function(map) { map.removeLayer(objetosLayer); }); } }, true);The function that create the layer:
function getEpc(items, icon) { var objectsLayer = L.geoJson(items, { pointToLayer: function(items, latlng) { var result; if (icon !== undefined) { result = L.marker(latlng, { icon: icon }); } else { result = L.marker(latlng); } return result; } }); leafletData.getMap().then(function(map) { objectsLayer.addTo(map); }); }In the watch function, is the remove function that activates when the checkbox is false. If I check 2 checkbox, the function create both, but when I want to remove the first one, only removes the second check. I look and found that every time I click a checkbox it's create a new layer with the new info.
How can I automatically create a layer for every checkbox in the function getEpc?
Thanks.
أكثر...
What I have,
The checkboxes:
.row .col-md-12 .row label.col-md-7 First check input.col-md-1(type="checkbox" ng-model="locations.somecheck1") .row label.col-md-7 Second check input.col-md-1(type="checkbox" ng-model="locations.somecheck2") .row label.col-md-7 Third check input.col-md-1(type="checkbox" ng-model="locations.somecheck3") .row label.col-md-7 Fourth check input.col-md-1(type="checkbox" ng-model="locations.somecheck4") .row label.col-md-7 Five check input.col-md-1(type="checkbox" ng-model="locations.somecheck5") .row label.col-md-7 Six check input.col-md-1(type="checkbox" ng-model="locations.somecheck6")The controller:
$scope.$watch('locations.somecheck1', function(somecheck1) { if ($scope.locations.somecheck1 === true) { findItem.find(function(err, items) { lastLocationItems = items[0].items; items = lastLocationItems.map((item) => GeoService.toGeoJSON(item, { idKey: '_id', geometryKey: 'lastLocation'})); getEpc(items, ssccIcon); }); } else { leafletData.getMap().then(function(map) { map.removeLayer(objetosLayer); }); } }, true);The function that create the layer:
function getEpc(items, icon) { var objectsLayer = L.geoJson(items, { pointToLayer: function(items, latlng) { var result; if (icon !== undefined) { result = L.marker(latlng, { icon: icon }); } else { result = L.marker(latlng); } return result; } }); leafletData.getMap().then(function(map) { objectsLayer.addTo(map); }); }In the watch function, is the remove function that activates when the checkbox is false. If I check 2 checkbox, the function create both, but when I want to remove the first one, only removes the second check. I look and found that every time I click a checkbox it's create a new layer with the new info.
How can I automatically create a layer for every checkbox in the function getEpc?
Thanks.
أكثر...