Currently, I have an application that displays a list of venues as partials, with each venue belonging to a specific area. Users can filter the venues by their respective areas. My goal is to design a split-screen layout where the left side shows the venue partials and the right side features a 'hand-drawn' map. The challenge I'm facing is how to change the image displayed in the map based on the venues being shown.
I envision the default view to be a zoomed-out map showing all areas. However, if all the displayed venues share the same area_id number, I want the map image to switch to a detailed, zoomed-in view of that particular area.
This would work something like this:
If all venues being displayed have area_id = 1, show this specific area image.
If the area_id is 2, display a different area image.
Otherwise, show a separate zoomed-out image.
In the end, my goal is to assign each venue its own icon on the map using absolute positioning within the map div.
With only about 2 months of programming experience, I believe I may need to utilize JavaScript or jQuery (neither of which I am familiar with) for this task. Any guidance or advice on how to achieve this would be greatly appreciated!