javascript - Leaflet Omnivore group markers from CSV individually -
javascript - Leaflet Omnivore group markers from CSV individually -
i can't figure out grouping external info leaflet. have csv markers , set markers omnivore on map.
how can grouping markers?
for example: have 4 markers , have "type" specified in csv. let's type called "freibad". how grouping markers type "freibad" , set them in layergroup called "freibad" able filter them 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 figured out how solve problem.
here's i've done: created layer groups every entry need , made row in csv-file has same name layer group. checking via if-statement, layers added grouping they're belonging to. however, isn't best solution guess , worthwhile, if there 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) } }
javascript csv control leaflet layer
Comments
Post a Comment