Leaflet Cluster меняет все значки моего таможенного маркера - PullRequest
Новая
       33

Leaflet Cluster меняет все значки моего таможенного маркера

1 голос
/ 24 октября 2019

У меня есть 4 пользовательских маркера, которые отображаются на карте на основе некоторых условий, установленных в коде. без кластера листовок все они отображаются, но когда я добавляю кластер листовок, он автоматически заменяет все различные таможенные значки на один. 

<div id="map-view" style="z-index: 1; height: 550px; width: 100%"></div>

КОД JAVASCRIPT 

 let locations = [{ "network_operator": "MTN",
                        "latitude":6.50895,
                        "longitude":3.37028
                   },{ "network_operator": "GLO",            
                       "latitude":6.590604,  
                        "longitude":3.541904
                    }];
        const authorizedUser = {
            user1: ['MTN', 'Operator'],
            user2: ['GLO', 'Operator'],
            user3: ['9MOBILE','Operator'],
            user4: ['AIRTEL','Operator'],
            staff: ['ZYSOD','Staff']
        };

            const operatorStaffColor = {
                'MTN': '/static/img/marker-icon-mtn.png', //MTN
                'GLO': '/static/img/marker-icon-glo.png', //glo
                '9MOBILE': '/static/img/marker-icon-9mobile.png',
                'AIRTEL': '/static/img/marker-icon-airtel.png' //airtel
            }
    var enteredURL = window.location.pathname;
    var user = enteredURL.slice(4, (enteredURL.length)+1); // get the actual value after slicing 
    // the user variable is gotten from the URL which is later used in the script
var operatorIcon = new L.Icon({ 
                iconUrl: '', 
                shadowUrl: '/static/img/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                labelAnchor: [6, 0],
                shadowSize: [41, 41]
              });
    let mymap = L.map("map-view", {
                                        doubleClickZoom:!1,
                                        closePopupOnClick:!1            
                                    }).setView([9.367231, 7.765842], 6); 
    L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", { 
                                        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' 
                                    }).addTo(mymap); 
                                    var markers = new L.markerClusterGroup({ disableClusteringAtZoom: 14 ,spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false, animate:false});
     for (var i = 0; i < locations.length; i++) {
    if(authorizedUser[user][1] ==='Operator'){
    operatorIcon.options.iconUrl=operatorStaffColor[locations[i].network_operator]}
else{
        operatorIcon.options.iconUrl=operatorStaffColor[locations[i].network_operator];
        }
        markers.addLayer(L.marker([locations[i].latitude,locations[i].longitude], {icon: operatorIcon}).bindPopup(status, {
                                                autoClose: !1, 
                                                closeButton: !1, 
                                                maxWidth: 560
                                                    }));
        }                
                                        mymap.addLayer(markers);
        markers.on('clusterclick', function (a) {
                                            console.log('click');
                                            a.layer.spiderfy();
                                        });
...