SVG Map with office locations

Hi everyone,

I’m thinking about implementing a simple svg worldmap in the frontend, which has about 20 buttons in different countries. Each button reveals information about this office in some way.

Now I would like to make it possible to add locations to the map via the panel. I thought of a structure field with name and address and one field to pick the location on the map.

I see 2 options for making this possible:

  1. Should I use an approach similar to the focus field (define a point, save the position in the map and somehow use it in the frontend)?
  2. Or do you think it’s easier (and cleaner) to use real locations and a real map and the google maps panel field for the input?

I would really like to hear what you recommend! :slight_smile:


I am doing something similar with “normal” images: (scroll down a bit)

you can hover over the numbers and get some information. I am using shortcodes for this. You have to write the position of the number in percent, like so:

(hotspot: myimage.jpg)
(spot: This is a description. nr: 1 top: 20 left: 45)
(spot: This is a description, too. nr: 2 top: 30 left: 33)
(hotspotende: )

if that’s a valid solution for you, I can give you the code.

Thank you for the fast reply!
That’s a great beginning.

The problem with this is, the user won’t be able to use it (you know…).
I think I can use the idea behind it (percentages) but will need to have any
kind of GUI to click on that image and the panel saves the percentages.

PS: When you create a hover-image you basically try out different percentages?

Yes, that’s how I use it. Would of course be cool to have the possibility to just click on the image to set a mark. In this case I am the only user and the development of something like that would probably take more time than setting some percentages. But I understand that’s not a good final solution for a customer.

The Kirby Focus Field uses jquery.focalpoint.js to get the coordinates on the image. Maybe this helps so you don’t have to start from scratch.


I think I would build something like that with leaflet.

1 Like

I agree (and some more chars)