mapbox: показывать только 1 группу маркеров - PullRequest
Новая
       21

mapbox: показывать только 1 группу маркеров

0 голосов
/ 16 января 2019

Хорошо, у меня есть карта с тремя группами маркеров: красным, желтым и зеленым.Теперь я хочу добавить опцию фильтра, в которой вы можете выбрать либо красный, желтый или зеленый, либо все из них.

Это мой HTML-код: 

<div class="filter">
    <label class="container">Show all
    <input type="radio" name="radio" checked="checked" onClick="showAll()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Legit companies
    <input type="radio" name="radio" onClick="filterGreen()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Doubtfull companies
    <input type="radio" name="radio" onClick="filterYellow()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Fraudulant companies
    <input type="radio" name="radio" onClick="filterRed()">
    <span class="checkmark"></span>
    </label>
</div>

А потом у меня есть некоторый Javascript-код: 

var geojson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [4.616570, 51.875200]
        },
        properties: {
            title: 'Falco Lines B.V.',
            address: 'Ridderpoort 9, Ridderkerk',
            score: 5
        }
    },
    {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [5.795830, 53.197960]
        },
        properties: {
            title: 'Distr. en Container Centr. BV',
            address: 'Willemskade 1, Leeuwarden',
            score: 99
        }
    }]
};

// add markers to map
geojson.features.forEach(function(marker) {
    // create a HTML element for each feature
    var el = document.createElement('div');
        if (marker.properties.score <= 30) {el.className = 'marker-low';} 
        else if (marker.properties.score <= 70) {el.className = 'marker-medium';}
        else if (marker.properties.score <= 100) {el.className = 'marker-high';}
        else {el.className = 'marker';}


    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 20 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.address + '</p><span style="cursor:pointer" onclick="openNav()"><u>Meer info</u></a></span>'))
    .addTo(map);
});

// filter
function filterRed() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'visible';}
}

function filterYellow() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'visible';}
}

function filterGreen() {
    if (div.classList.contains('marker-medium')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-low')) {div.style.visibility = 'visible';}
}

function showAll() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'visible';}
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'visible';}
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'visible';}
    else {div.style.visibility = 'hidden'}
}

Итак, очевидно, естьчто-то не так, поскольку флажки просто не работают вообще, но так как я не очень хорош с JS, я не могу понять, почему.Пожалуйста, помогите!

...