Leaflet Omnivore group markers from CSV individually

Question

I can't figure out grouping external data with leaflet. I have a CSV with my markers and put the markers with omnivore on my map.

How can I group the markers?

For example: I have 4 markers and they have a "type" specified in the csv. Let's say the type is called "freibad". How could I group all markers with the type "freibad" and put them in a layergroup called "freibad" as well to be able to filter them with the layer control?

//MARKERCLUSTER
    //VARS II
    var freibad=[];
    function eachLayer(marker) {
        var ltg = marker.toGeoJSON();
        if(ltg.properties.type != ""){
                marker.setIcon(L.icon({iconUrl:'/icons/'+ltg.properties.type+'.png'}));
        }
        if(ltg.properties.img != ""){
            marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
            ltg.properties.description + '<br> <img src="/icons/' + ltg.properties.img +'">')
        } else {
            marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
            ltg.properties.description)
        }
    }

    var points = omnivore.csv('/csv/POI.csv', {delimiter:'|'})
    .on('ready', function() {
        var markers = L.markerClusterGroup({
            showCoverageOnHover: false,
            maxClusterRadius: 50
        });
        markers.addLayer(points);
        map.addLayer(markers);
        points.eachLayer(eachLayer);
    });  

//LAYERGROUPS
    var ebenengruppen = {
        "<strong>Wanderrouten</strong>": {
            "Wanderroute 1": wroute1,
            "Wanderroute 2": wroute2,
            "Wanderroute 3": wroute3,
            "Freibad": freibad
        }
    };

//TILEMAPS
    var basemaps = {
        "Standard": standardTiles
    }
    var layerControlMobile = L.control.groupedLayers(basemaps, ebenengruppen, {collapsed:true}),
        layerControl       = L.control.groupedLayers(basemaps, ebenengruppen);
    if(mobileDevices){
        map.addControl(layerControlMobile);
    }else{
        map.addControl(layerControl);
    }

I am working on a similar issue. Hopefully I'll have an answer soon . — jasonflaherty

kelevra kelevra · Accepted Answer · 2014-11-18T13:45:23

I just figured out how to solve my problem.

Here's what I've done: I created layer groups for every entry I need and made a row in the CSV-file which has the same name as the layer group. Checking via if-statement, the layers are added to the group they're belonging to. However, this isn't the best solution I guess and only is worthwhile, if there are just a few groups...

//MARKERCLUSTER
//LAYERGROUPS
        var freibad=new L.LayerGroup();
        var badestelle=new L.LayerGroup();
        var kanueinstieg=new L.LayerGroup();
        var kanuvermietung=new L.LayerGroup();
        var kanuvermietung=new L.LayerGroup();
        var reparatur=new L.LayerGroup();
        var radverleih=new L.LayerGroup();
//MARKERS
        function eachLayer(marker) {
            var ltg = marker.toGeoJSON();
            //LAYERGROUPING
            if( ltg.properties.type == "freibad"){
            freibad.addLayer(marker);
            }
            if( ltg.properties.type == "badestelle"){
            badestelle.addLayer(marker);
            }
            if( ltg.properties.type == "kanueinstieg"){
            kanueinstieg.addLayer(marker);
            }
            if( ltg.properties.type == "kanuvermietung"){
            kanuvermietung.addLayer(marker);
            }
            if( ltg.properties.type == "reparatur"){
            reparatur.addLayer(marker);
            }
            if( ltg.properties.type == "radverleih"){
            radverleih.addLayer(marker);
            }
            // END LAYERGROUPING
            if(ltg.properties.type != ""){
                    marker.setIcon(L.icon({iconUrl:'/icons/'+ltg.properties.type+'.svg'}));
            }
            if(ltg.properties.img != ""){
                marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
                ltg.properties.description + '<br> <img src="/icons/' + ltg.properties.img +'">')
            } else {
                marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
                ltg.properties.description)
                }
        }

Leaflet Omnivore group markers from CSV individually

1 Answers