PART 11 - INTERACTIVE MAP TUTORIAL 🔴 CREATING A POPUP PAGE USING JAVASRIPT AND CSS

Hello everyone, my name is Rúben Duarte. 👋

I work as a GIS Specialist, but I have been increasingly passionate about the world of programming.

This is the eleventh video in the series on how to create an interactive map.

In this video I used CSS to define the appearance and layout of the popup, including its size, position, background, and other visual styles. This ensures the popup is visually appealing and properly aligned on the page. Additionally, I used CSS to manage the initial hidden state of the popup, making it invisible until triggered.

JavaScript was used to handle the interactivity of the popup. This includes attaching event listeners to specific elements, such as a button to open the popup and a close button to hide it. JavaScript dynamically manipulates the popup's visibility by modifying its CSS properties, such as changing the display or opacity. It also enables additional functionality, like closing the popup when clicking outside its boundaries or adding animations for a smoother user experience.

Basemap: https://drive.google.com/drive/folder...
SVG Map: https://drive.google.com/drive/folder...

This is the eleventh tutorial video in a series of 19 episodes that will culminate in the online publication of the Santo Inácio Zoo Interactive Map. 🐅

During this process, I will cover various areas I am passionate about. I will start by working in Adobe Illustrator, where I will illustrate all the elements of a static map into vector format, and then I will transform this project into SVG format. 🎨

Finally, in Visual Studio Code, using CSS and JavaScript, I will bring this map to life by embedding it in HTML for desktop. 🖥️

Midway through this journey, I will also work with the Canva platform to create images that will appear on the final map. 🖼️

I can't thank you enough for watching this video, so if you feel these tutorials have brought you something valuable, give it a like, subscribe, and if you have any questions, don't hesitate to ask in the comments section. 👍👍👍

#interactivemap #svgmap #adobeillustrator #ai #canva #html #css #javascript #github #illustratedmap #map #codemap #coding #zoomap #santoinacio #santoinaciomap

Like, share, and subscribe for more insightful tutorials and tips! 📈🔍🌟

🌍Socials
🔸LinkedIn:   / rubenduarte94  
🔸GitHub: https://github.com/rubenduarte1994
🔸Instagram:   / rubenduarte94  

____________________
Music: Motivational Upbeat Corporate by RinkevichMusic
/ rinkevichmusic
https://protunes.net/
Video Link: https://bit.ly/3NNqGTs
____________________