Frontend engineering
12/05/2020
Interactive maps in 30 lines of code

Interactive maps are a great way to represent your data, and today more than ever it’s important to properly and effectively visualize geographic information to your users. Although projects like Google maps or MapBox provide great out-of-the-box solutions, sometimes you might want to avoid the hassle that comes from using these tools, especially if you are concerned about pricing due to high volume of traffic on your websites.

In this talk, I will explain how you can create your own SVG maps that are lightweight, easy to use, and very customizable. Using live examples you will see step by step how to create a simple world map, and how you can style different parts of the map based on certain criteria using just CSS. All of that in just 30 lines of code!

Note: Basic knowledge of JS, HTML, and CSS is good to have for better understanding

Tags
CSS
HTML
JavaScript
SVG