jeudi 25 février 2016

Mapbox personalized icons with cluster and filter checkbox

I have created a map using mapbox. I add icons from an Url and a type of "filter". But I want to add a marker cluster and in and also that the filter function with checkbox to select more than one option.

http://ift.tt/21uil7b

This is my example. I'll tried with the Leaflet marker cluster but... I'm totally new with code then, I don´t know in what place I should put the cluster code.

I think now, the most important form me is the checkbox for the filters. I tried to make put "true" or "false" to certain values in the properties of the icon and this at final. But aren´t checkboxes :(

myLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;

    var images = feature.properties.images
    var slideshowContent = '';

marker.setIcon(L.icon(feature.properties.icon));
    for(var i = 0; i < images.length; i++) {
        var img = images[i];
    }
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + '<p align=center>'+ feature.properties.title + '</p>'+'</h2>' +
                            '<h5>' + feature.properties.description +'</h5>'

                        '</div>';

    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 400
    });

});



myLayer.setGeoJSON(geoJson)
.addTo(map);

$('.menu-ui a').on('click', function() {
      var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    myLayer.setFilter(function(f) {

        return (filter === 'Development') ? true : f.properties[filter] === true;
    });
    return false;
});

Thanks and have a nice day! :)




Aucun commentaire:

Enregistrer un commentaire