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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -