How To Build A Fully Interactive World Map From Scratch | HTML, CSS, JavaScript

Показать описание

Let's develop an interactive world map from scratch, using only HTML, CSS, JavaScript and a blank SVG world map. You will see how we can add a hover effect to each country, even those that are made up of multiple SVG paths in different places, and we will also make each country clickable. When the country is clicked a side menu will open, revealing the basic information about the country which we will fetch from the "restcountries" API, and we will also make the map zoomable. You will be able to zoom in and out of the map and move it around with scrollbars.
Hope you find it useful. Let me know if you face issues or don't quite understand some of the concepts in the video.

Get The Source Code From All Of My Videos:

Project Dependencies:
-----------------
World Map SVG File:

Font Awesome:

Rest Countries API:

-----------------

Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)

All of my project are made from scratch by yours truly. I don't take anyone's code as my own, but I do often see my code being copied and pasted into other channels for their tutorials, so of you see an exact copy of a project on another tutorial, just know that the one on my channel is the original one.

Timestamps
0:00 Intro
0:11 Preview
2:27 Setup
2:50 HTML
4:48 CSS
9:59 JavaScript

Extra Links:
-----------------

Follow me on Instagram:

My Products:

Support Me To Keep Creating And Improving My Content:

Tags:
-----------------
#world
#map
#coding