Hello,
Anyone has tried using this component to instead of the whole world, using for only 1 country, and how you can adapt to it?Thank you so much.
Hi Carlos,
Yes, it's definitely possible to customize the Clickable World Map (Reactive) component in OutSystems to focus on a single country rather than displaying the entire world. This requires some adjustments, but it's quite manageable. Here's a step-by-step approach:
1. The component uses SVG to render the map. Each country is typically represented as a element with a unique ID in the SVG.
2. Replace the existing world map SVG with one that only shows the country you want.
You can find country-specific SVG maps from resources like:
amCharts SVG Maps
SVG Viewer
Wikipedia Commons – SVG Maps
3. In the OutSystems module:
Open the screen or block where the SVG is embedded.
Replace the world map SVG with your selected country’s SVG.
Make sure that the individual regions (such as provinces or cities) have unique IDs or data-attributes so you can add interactivity.
4. Adapt the existing JavaScript or client-side logic to detect clicks on the new region IDs or elements in your SVG, and define the desired behavior.
Well, that's fun I am already working on a solution and I changed the SVG to instead of using the whole world, using a specific part of Portugal, but the thing now is how I can adapt the javascript code to work for this country, that's the thing so yea.
Anyways ty for the advice I will try that.
I do not think the component is prepared to support this, but I can prepare a new version for this.
If we focus on one country, does it mean that the whole map of the country will be clickable (and not the area outside of it), or would you expect to be able to detect clicks on different regions inside this country?
Hello Maxime,
Thank you for your reply. Yes, I want to focus on one specific country, for example, Portugal. Within that country, I want to display the cities, such as Porto, Lisbon, Aveiro, Faro, and others, with the same clickable area features as for the countries.
Thanks!
I uploaded a new version of the component that allows to load SVG country maps and more customization parameters: https://www.outsystems.com/forge/component-overview/11209/clickable-world-map-o11
Please let me know if it works for your use case.
Thank you