Another interesting project from our power user @swf from Swiss Web Factory
Here's the description he kindly provided:
For Basel Zoo we have implemented an interactive zoo map that is identical to the printed one handed out at the zoo. To do this, we put a graphic overlay on Google Map with MapTiler. All destinations are provided with geospatial data and are thus displayed in real positions. The zoo visitor can have his position displayed on the map on site.
The pins are displayed as individual icons in different categories and can be filtered according to these (e.g. to only display the animals). Individual locations can also be selected directly. The map then moves to the destination and the animated icon helps the visitor to find it on the map. The map can be zoomed in and out by the visitor.
The data is controlled by a database and can therefore be flexibly adapted. All adjustments can be made in the CMS.
In order to facilitate the positioning of the icons, we have also implemented the map in the CMS and linked the input of the geographic coordinates with the positioning of the icon. These are updated by dragging the icon.
From what I understood in a reply earlier you are using a mysql database.
I was going to ask what field type you settled on in your CMS schema.
Then I ran across this tutorial on how to use mysql with a Google map.
Did you do something similar for your Interactive Zoo Map?
We show the pins/markers with dmx-bind:latitude and dmx-bind:longitude and we change the values with dmx-on:markerpositionchanged with SetValue for long/lat
Nice work, swf. Like the colors used… very pleasing to the eye.
Could not figure out the reason for the close icon in the top right corner, though. Clicking it does nothing.
In the pop-up windows, you could consider having the name of the animal below the photograph along with a brief description, where they come from, for instance… instead of just a plain photograph. Keeping the panels of the same size would also make it appear more consistent.
Could not figure out the reason for the close icon in the top right corner, though. Clicking it does nothing.
The close Icon has a history.back implemented, which seems to work at least for me
In the pop-up windows, you could consider having the name of the animal below the photograph along with a brief description, where they come from, for instance… instead of just a plain photograph.
The name is placed below the photo, wonder why you can't see this? Additional information take too much space. We considered adding a link to the animal description, but the zoo didn't want it (for now).
Keeping the panels of the same size would also make it appear more consistent.
I don't think that this is possible with GoogleMap implementation.
According to information regarding 'History.back - Web APIs' on the developer. mozilla website:
" The History.back() method causes the browser to move back one page in the session history. It has the same effect as calling history.go(-1). If there is no previous page, this method call does nothing." (emphasis mine)
It would be preferable to have a 'Go back' link instead of the universal 'x' icon which is used to close a window (that is, if you have to have it there in the first place).
I cannot see the name of the animal under the photo. This is the screenshot on my laptop (using Windows10/ Firefox88.0 browser):
what i meant was some of the panels do not open up at all:
All seems to work well on Chrome/Window 10. Selects look fine, images display, titles, etc. Scales well and is responsive across all my installed mobile profiles.
