In order to get started with this world map, you need to load jQuery UI CSS and JavaScript file in the head tag of your HTML document. If you are working on the portfolio website, also check this Testimonial Slider for client reviews. Besides this, you can also implement this world map into your portfolio page to show the statics of your clients, etc. You can use this world map to filter the data across various continents or to display a general-purpose globe on the webpage. So, you can easily execute custom callbacks when a specific subcontinent is clicked. All logic of this world map is handled in jQuery. ![]() Users can highlight (or filter data of) each subcontinent by clicking the country name or map area. But in this tutorial, we are going to create a basic clickable world map based on HTML, CSS, and SVG.Īs you can check on the demo page this world map displays all subcontinents of the world. Basically, there are many plugins and services to embed a world map on the webpage. It is widely used in admin dashboards, analytics, and to visualize the data around the globe. Although the map is barely legible at the smallest screen sizes (due to the visual content provided), the implemented technique for scaling the map holds up across all screen sizes.The world map is used for various purposes on a webpage. The “responsive” aspect of the solution was the easiest of all as the width and height of the SVG isn’t set explicitly by inline attributes, it adapts automatically to the size of the container. (In SVG, you work with filland stroke, not borderand background.) path: The styling of each path in the map, which you can see by hovering over each region in the final version, was achieved through applying simple :hover rules in CSS. Once this was in place, I could add a JavaScript onclickevent to each path, which displays more information when the visitor clicks on the relevant map area. I used a secondary layer so that I could wrap each path in the overlay with an A link tag. Although the visitor can’t see the effect, the map is actually formed of two layers one for the visual aspect, and an overlay for the interaction. ![]() This meant that I could add the secondary, transparent SVG using p position: absolute and a higher z-index, thereby overlaying the original image and matching the original areas. For this example, I then duplicated the paths of the original SVG but without the background image. Once the main graphic has been prepared, you need to wrap it in a DIV or SECTION tag, which is styled using position: relative. This is how most graphic designers work, so adding the class name or ID to each path can fairly quickly be achieved once the SVG has been exported and optimised. (By preference a CSS class name, but alternatively a unique identifier ( id)). An SVG is, essentially, a type of XML file and so it’s easy enough to build a view like the one above in Adobe Illustrator (or the like), giving each path its own identifier. The previous solution depended on JavaScript to make it work at all sizes, but SVG are responsive by default, provided that you prepare your CSS and HTML appropriately. The implementation of the responsive image map Having developed a more advanced solution since 2017, it made sense to implement the most flexible and responsive alternative possible. We received the project after the managing consultant found my original blog post. The project which prompted me to write about the more up-to-date was an interactive map view for a for a company providing Toronto city council election results, which I programmed on behalf of our Swiss web agency Say Hello. ![]() Responsive imagemap with interactive highlighting function
0 Comments
Leave a Reply. |