PART 15 - INTERACTIVE MAP TUTORIAL 🔴 CREATING DYNAMIC INFORMATIONS WITH JAVASCRIPT
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 fifteenth video in the series on how to create an interactive map.
In this video, we started by defining the HTML structure, including div containers for displaying animal cards, and moved on to JavaScript, where we created an array to store animal data such as names, categories, conservation statuses, and image sources. We dynamically generated cards for each animal and styled them with CSS, ensuring that information appears on the screen when hovering over specific areas on the map. Status bars were implemented for animals with individual habitats, using the same colors as the zoo’s official website.
Basemap: https://drive.google.com/drive/folder...
SVG Map: https://drive.google.com/drive/folder...
Sound Effect: https://drive.google.com/drive/folder...
Images: https://drive.google.com/drive/folder...
This is the fifteenth 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
____________________
Nesta página do site você pode assistir ao vídeo on-line PART 15 - INTERACTIVE MAP TUTORIAL 🔴 CREATING DYNAMIC INFORMATIONS WITH JAVASCRIPT duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Maps by RGD 20 Janeiro 2025, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 165 vezes e gostou 5 espectadores. Boa visualização!
