Hi @dan or any other helpers
I have a client that wants me to develop a site with a map function on one of his pages, similar to this one: Martyrs for Christ
The site will be build entirely with Elements. I just have no idea where to even start with something like this.I think the top example is made in HTML code.
If you hover over a certain country then the name should appear and if you click on it then preferably a modal should open with relevant information. In the linked example it opens on a new page which is just too big because there are about 50 countries that need descriptions.
Is there any one that can HELP please
It will be highly appreciated.
That looks like it would require some very specialised code to achieve.
You could build this in Elements, but it would 100% have to be a custom component, and it would certainly require a fairly experienced coder to build it, afaik.
Absolutely! Here’s a roadmap for building an interactive map like the Martyrs for Christ example—all inside Elements, while keeping things as approachable as possible.
The Essentials
To build a fully interactive map (with hover effects on each country and modals that pop up with country info), you’ll need a custom component using SVG, Tailwind CSS, and Alpine.js—all technologies natively supported by Elements.
How It Works
SVG Map: Embed an SVG file of the world (or your required region) directly within an HTML Component or custom element. Each country will be its own <path> or <g> with a unique id or data-attribute.
Hover Effect: Use Tailwind classes for hover styling (hover:fill-blue-500, etc.) or apply Alpine.js to handle hover labels showing country names.
Click for Modal: Each country responds to clicks, triggering an Alpine.js modal with the relevant content for that country.
Example Walkthrough
Let’s say you want to highlight three countries for a prototype. Here’s a simplified (but working!) example of how you could wire this up in Elements:
SVG Paths: You can create or export an SVG map from a vector app (like Illustrator or Figma), then split each country into its own <g> or <path>.
Country Data: Expand the modal content for all your countries.
Styling: Use Tailwind for all visual tweaks.
Accessibility: Add appropriate aria- labels and focus management for real-world sites (Elements and Alpine help with this).
Tips to Power Up Your Map (The Elements Way!)
Reuse: Once done, package this as a custom component for reuse across multiple projects.
Responsive: Tailwind’s utilities make it easy to keep the map crisp on all devices.
Resources: SVG maps for free (find one that suits you, and customize it).
Summary:
Building this in Elements is 100% doable, but it’s a moderately advanced task (SVG wrangling and Alpine.js knowledge help). Once set up, you’ll have a super-slick, future-proof, no-vendor-lock-in map ready for any client.
I pasted the code into a Custom Component in Elements, and while it’s very basic, it totally works. So, I think the bot is on the right track with his suggested solution…
Thanks @dan. I will look into this and get back as I think I may need some more support. First will look for the right map and then take it from there.