Interactive SVG map applied to filter system

Hello guys,

I am trying to link an SVG map (for reference you can see the Timothy Ricks interactive SVG map video) to a filter system like the one of finsweet.

My idea is that whenever you click on a given state, it applies a filter by which you filter a given cms collection list.

As examples you can check out that:

And also galardo.bg

Sorry that the first one isn’t in english.

Thank you in advance!


hi @Kiril_Radovenski here is my opinion.
1.map - using SVG map is useless as on mobile will be not possible to use a finger to click on small areas on map. Recommended minimum size of element on mobile is 10px * 10px anything smaller make UX worst. So map is fine only for desktops maybe for tablets landscape.

As you see on image there are elements that are actually not possible to click on with human finger.

CleanShot 2021-07-11 at 16.42.32

2. Advanced filtering (second page) - you can use JS to write some kind of this type of filtering but it has disadvantage. All Items are first added to DOM and after hidden on screen. So if you have few hundredths items it may slow down you page. The best way (IMO) is to write your own API that will send back response only with requested items. Another option can be using 3-rd party services as eg. algolia.

There may be a different way to use any other filtering hacks to get some kind of result you need but IMO API is the way to go. WF has a lots of limitations and restrictions so you should double check (look what other platforms offer) if WF is the right platform to use for this kind of project.

Thank you fir the reply!

What would you recommend as a platform for such a project?

I’m sorry @Kiril_Radovenski I can’t recommend any other platform as at first it would not be correct to recommend competitors on WF forum and at second I do not use any platform including WF ( took a break to see what features will WF add in future). At this moment I’ve stepped back and returned to coding everything from scratch in code editor.