First off, I am not a js programmer. I only have working knowledge of it. I am using leafletjs to create a map. I am using awesomemarkers to create custom markers. I am using leaflet-omnivore to parse a .csv file for the locations. I can get the map to load from using the data from the .csv file with custom icons for each business "type" which is a column in the csv file. What I would like to do is group the "type" into individual layers using the custom markers so that I can show or hide the business "type" layers individually. I have searched and have tried using geoJson filter and style, but could not figure out how to get them to work together to create a layer. Here is the code that works after initializing the map. Ideally I would like to have
DiningLayer.addTo(map);
NewsLayer.addTo(map);
GovLayer.addTo(map);
etc. Thanks
//MARKERS
var DiningMarker = L.AwesomeMarkers.icon({
icon: 'cutlery',
prefix: 'icon',
markerColor: 'red',
iconColor: 'white'
});
var blueMarker = L.AwesomeMarkers.icon({
icon: 'star',
prefix: 'fa',
markerColor: 'blue',
iconColor: 'white'
});
var govMarker = L.AwesomeMarkers.icon({
icon: 'university',
prefix: 'fa',
markerColor: 'orange',
iconColor: 'white'
});
var newsMarker = L.AwesomeMarkers.icon({
icon: 'newspaper-o',
prefix: 'fa',
markerColor: 'green',
iconColor: 'white'
});
var MedicalMarker = L.AwesomeMarkers.icon({
icon: 'doctors',
prefix: 'icon',
markerColor: 'blue',
iconColor: 'white'
});
//L.marker([45.745986, -87.055492]).addTo(map)
//.bindPopup("<b>Daily Press</b><br />600 Ludington Street").openPopup();
///.bindPopup("<b>Daily Press</b><br />600 Ludington Street");
//L.marker([45.745767, -87.06927], {icon: redMarker}).addTo(map)
// .bindPopup("<b>Something else</b><br />street");
//omnivore.csv('includes/locations.csv').addTo(map);
omnivore.csv('includes/locations.csv')
.on('ready', function(layer) {
this.eachLayer(function(marker) {
if (marker.toGeoJSON().properties.type === 'dining') {
marker.setIcon(DiningMarker);
}
else if (marker.toGeoJSON().properties.type === 'news') {
marker.setIcon(newsMarker);
}
else if (marker.toGeoJSON().properties.type === 'gov') {
marker.setIcon(govMarker);
}
else if (marker.toGeoJSON().properties.type === 'medical') {
marker.setIcon(MedicalMarker);
}
else {
marker.setIcon(blueMarker);
}
// Bind a popup to each icon based on the same properties
var popupText =
'<b>' +
marker.toGeoJSON().properties.bus +
'</b><br />' +
marker.toGeoJSON().properties.street; // + ', ' +
marker.bindPopup(popupText);
});
})
.addTo(map);
Aucun commentaire:
Enregistrer un commentaire