Interactive Zoo Map - Basel Zoo

[Teodor]

VISIT WEBSITE

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.

[sitestreet]

I love this!

[Petruchocho]

I have technical question here: how icon location (lat/long) is saved in to DB and how’s it’s displayed on the map?

[Dave]

Really clear and concise very nice @swf. Great feature for the Zoo attendees.

[NewMedia]

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?

Super Job!

Using MySQL and PHP with Google Maps

[swf]

Hi @NewMedia
Thanks. We are using also a FLOAT field

[swf]

Hi @Petruchocho

We save the lat/long as FLOAT field values.

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

[gerard]

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.

Now to wrap my head around the CMS.

gerard

[swf]

Hi Gerard. Thanks for you feedback.

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.

[gerard]

Thank you for responding, swf.

@swf

The close Icon has a history.back implemented, which seems to work at least for me

Now that makes it even more confusing/misleading.

According to information regarding ‘History.back - Web APIs’ on the developer. mozilla website:
https://developer.mozilla.org/en-US/docs/Web/API/History/back

" 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).

@swf

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).

I cannot see the name of the animal under the photo. This is the screenshot on my laptop (using Windows10/ Firefox88.0 browser):

@swf

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.

what i meant was some of the panels do not open up at all:

Hope you find this useful.

[swf]

Hi Gerard. Can’t confirm the problems you mentioned. Just checked FF/Win10, all data is shown. Do you see error in the console?

[gerard]

Hi swf,

Not too sure if this is what you are asking for… but this is a truncated version of the browser console:

Let me know if this is useful.

btw… tried it in Google Chrome browser as well, with the same results for the panels as highlighted in the screenshots sent in the previous post.

Could it be something wrong with my browser?

[swf]

Problem found and fixed. Now you should see all the english titles and tests

[NewMedia]

My browser on MacPro 15"
Big Sur 11.2.3

88.0
Firefox Release
last update
April 19, 2021

and

[swf]

Thanks for the screenshots. Not all of the pins have photos.

But I wonder why the selects are that narrow. Can’t reproduce this, looks fine to me on same os and browser

[gerard]

Can confirm that the panels in my Firefox browser now match the screenshots sent by @NewMedia.

@swf, could you explain what was done to rectify the situation? was it the console errors feedback which provided the clue?

@swf

But I wonder why the selects are that narrow. Can’t reproduce this, looks fine to me on same os and browser

not sure i follow what is narrow.

[swf]

@gerard

not sure i follow what is narrow.

that was meant regarding the 3rd screenshot of @NewMedia

[Dave]

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.

[updates]

Hi…
on my IPhone 12 I got modal pic with margin problem

[swf]

Thanks @updates, we’ll check this