FULL COURSE 🦁 CREATE AN INTERACTIVE MAP FROM SCRATCH WITH ADOBE ILLUSTRATOR, HTML, CSS & 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 ultimate guide on How to Create an Interactive Map from Scratch using Adobe Illustrator, HTML, CSS & Javascript!
🦁 Link to the Project
https://rubenduarte1994.github.io/zoo...
https://rubenduarte1994.github.io/zoo...
https://rubenduarte1994.github.io/zoo...
🗺️ 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...
🔗 SVG Icons from
https://icons8.com/
🎵Background Sound
https://drive.google.com/drive/folder...
During this 3 hour tutorial, 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 video, I will also work with the Canva platform to create images that will appear on the final map. 🖼️
⏱️ Timestamps
00:00 - Intro
04:21 - Basemap Download
06:28 - Starting with Adobe Illustrator
11:53 - Drawing Elements (Trees and Water Bodies)
25:24 - Drawing Elements (Houses, Coffee Shops and Others)
33:58 - Drawing Icons
45:02 - Images to Vector Format
49:59 - Renaming Layers and Export
52:12 - Setup Html, Css and Javascript
01:04:08 - Navigation Bar
01:17:28 - Animations to SVG Elements
01:30:07 - Popup Page
02:00:02 - Highlight Elements
02:14:35 - Making Objects Move
02:19:50 - Canva
02:21:09 - Dynamic Informations (Animal Details)
02:34:06 - YouTube Videos
02:41:47 - Social Media Icons
02:48:06 - Background Music
02:54:52 - Deploy
I can't thank you enough for watching this video, so if you feel this tutorial 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
____________________
On this page of the site you can watch the video online FULL COURSE 🦁 CREATE AN INTERACTIVE MAP FROM SCRATCH WITH ADOBE ILLUSTRATOR, HTML, CSS & JAVASCRIPT with a duration of hours minute second in good quality, which was uploaded by the user Maps by RGD 03 March 2025, share the link with friends and acquaintances, this video has already been watched 2,279 times on youtube and it was liked by 81 viewers. Enjoy your viewing!
