Multiple Category Options per Marker Using GeoJSON in Leaflet Map

Question

I'm new to Leaflet and GeoJSON, and haven't been able to find an example of what I want. The map I'm making has multiple markers for various services in the area. I need to add a demographic category to filter by youth, adult, seniors, men, women, etc. Some markers need to be able to have more than one demographic (such as adult and men). The closest example I could find was adding a property for each type of demographic with a true/false option for each marker. Is this the way I should go about it? They may want to add other categories (besides demographic) in the future, which wouldn't really be organized if every option is set as a property. Please help point me in the right direction!

treecon treecon · Accepted Answer · 2018-04-20T14:07:23

You should first decide how you want to structure your data and this, at first, has nothing to do with Leaflet (which comes later for visualization-mapping).

You can work with either GeoJSON or simple JSON.

For example:

myJSON=[
 {
   lat:10,
   lon:10,
   demographic:['youth']
 },
 {
   lat:6,
   lon:10,
   demographic:['adults','men']
 },
 {
   lat:10,
   lon:12,
   demographic:['adults']
 },
 {
   lat:7,
   lon:8,
   demographic:['adults','seniors','women']
 }
]

Then, you just have to think of the logic you want to translate into code.

For example, you can have some checkboxes for the user to filter the category. Each time the user checks/unchecks, a loop goes through the array and inserts as markers ONLY the objects that match criteria.

This is an example: https://jsfiddle.net/xf4fwwme/44/

The code is a bit messy but what I would like to show you is that there can be different approaches and not just one direction. You can achieve the same result with cleaner code, GeoJSON instead of JSON etc...

Hope I helped.

Multiple Category Options per Marker Using GeoJSON in Leaflet Map

1 Answers