Interactive World Map with hover function?

Hi! Been actively using Appfarm for about two months (Learning included). For our next project we want to have an interactive map where you can hover countries to get data from them in a tooltip where the mouse pointer is. Would this even be possible today in appfarm? Need to know before we accept this task.

Hi!

Yes, this might be solved in Appfarm, but we do not have a built-in map layer with all country borders. I believe you may solve it in one of two ways.

Solution 1
Use the Map component, and add a layer of layer type GeoJSON
You will need to locate and import some external resource, such as this, and import it as e.g. Country object class in Appfarm, having an object class property GeoJSON polygon (string). When adding the layer of layer type “GeoJSON” to the Map component, you select the data binding to Country.GeoJSON polygon, and the Map will draw polygons for the country borders. You may define colours for the polygon (including the hover colour), and on-click events.
See the second example in this Showroom link (click 3 places inside the map, and select “polygon”).

Solution 2
Use a coded component. Locate a map with country borders, written in javascript, and connect Appfarm actions to the on-click events for the map. See an example of a coded component with a Mapbox-map in our Showroom.

1 Like