Clickable Interactive map tutorial - building & designing for BEGINNERS - HTML, CSS, JS

[@aduck2588]

In college rn, designing a website that needed this, will try to implement it i'll update if i remember

[@bluerags3368]

did you get it right? I am also making a website that need this.

[@alantapiaavila6374]

Excellent content ! I hope you keep doing more videos. Greetings from Mexico.

[@geohost6811]

Interesting piece of art in the background lol. Thanks for the tutorial

[@Staceynova]

Haha thanks 😊

[@Toast-M1]

nice thanks your expalanation is very clear. good luck with your personal projects.

[@aa1zz428]

is there a way to do this without adobe illustrator?

[@Staceynova]

If you have an SVG image/map then yes

[@josemariadiy6400]

Good video 👍 But what about responsive????🤔🤔 The Image and circles links are resized??? 🤔 How to do it... I would appreciate your answer..

[@zoesnyder1216]

How did you get the circles you drew to each have the class 'circle'? Was it because you used the circle tool to draw them in Illustrator?

[@BideaweeBideawee]

Awesome tutorial! Do you have a video on how to integrate into a Word Press website?

[@eshapilinja9568]

Fun, crisp and clear. Would love to see more videos 😊

[@Staceynova]

Thank uuu

[@samsonmabetho6103]

you just earned yourself a new subscriber. This was really helpful. Thank you

[@Cerulian]

Yes, it would be very helpful how to add this to a WordPress website. Please make a video on that. 😀

[@손민규-b8s]

Thank you for the awesome video!!

[@taptunia]

If coding were always explained so easily maybe I would’ve actually remembered something from my uni classes lmao. Thank you!

[@Staceynova]

Lol

[@Staceynova]

Well subscribe then 😉

[@taptunia]

@@Staceynova actually just did! It's both the coding and your hair, can't figure out which one influenced me more

[@rehanpetit]

Thank you so much. Been trying to learn this and this video just saved my life.

[@cynthiaguilera]

Hello! How did you get from cx= and the city=? Pardon my ignorance, but I'm following the tutorial and I'm stuck there... Help please 😢

[@ashtilbury8957]

This helped a lot - thanks! How can I add SVG icons over the top of a JPG image? I have a coloured picture of a map and I would like to add the icons at points of interest etc. When I adde the JPG image and then put the SVG icons over the top the file size came out massive - like 5x the original JPG image size so I think I did something wrong

[@Staceynova]

Yeah, the sizing is the problem in case your jpeg image is too complicate and you cannot trace it. You can try the following. First, open your jpg img in illustrator and locate your svg icons on top where you want them to appear in relation to the image. Remove the image and export the icons. They should be the right size and location. When adding both jpg image and svg icons make sure that the size of both is the same (for example 100%, 100vh, 1024px). Let me know if that worked 😊

[@Staceynova]

Or as I mentioned in the video (I also took a jpg map image) I traced it and then placed my icons/markers. You can do the same. You can trace your map in colours, it’ll also work

[@ashtilbury8957]

@@Staceynova Thanks for the reply - super helpful :) I tried the tracing method but the map is just too intricate for that so I'll use your first suggestion. The map I'm creating also needs to be viewed on a mobile device (but will be a webpage with its own URL). Will the modal type pop ups from the map be responsive to how zoomed in the user is? (as in always take up a certain % of screen size)

[@kenjik6029]

Hey, how are you doing? Can you suggest me another app or editors except Adobe illustrator? To achieve the things you did above.

[@saachipilinja477]

Thanks so much! This is very well explained and informative!!

[@nataliabarszcz7753]

This is so helpful, thank you! Didn’t know integrating a map would be so easy!

[@fornex5615]

I like how you learn when you try to learn us

[@Staceynova]

haha it's my first video, it's quite difficult to explain and do it at the same time 😅 done those maps 100 times!

[@kamirahmotley872]

How you get the map to display info in each box

[@shattv5102]

Nice this is so informative

[@ibrahimkhaled2489]

I have a question, could you interact with a live google maps? If yes how

[@joelfigueroa7127]

thank you this is perfect for my school proyect! so helpful!

[@Staceynova]

Glad it was helpful 😊

[@tarotbyderek8942]

Do you think that this could work with photos being toggled?

[@Staceynova]

Of course!

[@paulmorrison8608]

The functionality does not work on mac tho. how do I solve this?

[@Staceynova]

I did it on Mac in that video. Try copy paste the code from the link in the comments :)

[@paulmorrison8608]

@@Staceynova ah ok. its just that on my friends mac, the popups appear by default (the hidden is being ignored)

[@tobiaslukaschek932]

Nice video! Do you have a video tutorial showing how to add it to SquareSpace?

[@angelhugoramirezmorales3935]

Its so helpful. Im really grateful with you

[@Staceynova]

Glad to hear that 😊😊

[@angelhugoramirezmorales3935]

@@Staceynova I'm waiting for another new video 🙏

[@benjie-gt]

Great tutorial! Loved your approach. My only problem is that the text labels don't resize automatically when you zoom in or out of the map. Does that make sense? The positions of the labels don't grow or shrink or move with the map itself. So USA ends up being in Africa if you enlarge/shrink the map. What's the fix for that? Change absolute positions?

[@nataliesaundersart]

did you find the fix for this? im having the same issue

[@benjie-gt]

@@nataliesaundersart nope. I let it go and moved on to other interests haha!

[@Staceynova]

Hi, yeah you need to use media queries and reposition the elements based on the screen width. Sorry for the late response.

[@paulmorrison8608]

also why do the popups appear in different positions on different screens?

[@paulmorrison8608]

so will the popups appear in different locations depending upon the users screen size (aspect ratio) - it looks fine on my device using percentages but do we need to use pixels instead to overcome this - thanks again

[@paulmorrison8608]

sent my html file to another user who is viewing on a different device and the location of the popups are not consistent with mine

[@Staceynova]

Add media queries for different screens or limit the width of your container

[@paulmorrison8608]

@@Staceynova ah ok. and of course d'oh! thank you :)

[@caleasthetic]

@@Staceynova you missed one little thing. this wil not make the image map coordinates responsive. You need to add a script from cdnjs called image map resizer. This will recalculate the coordinates of you elements when you resize the screen. image maps are not responsive by itself. yes you can make the image itself responsive by using a % based unit for th image, but the coordinates of the elements can only be recalculated if you include that js script in your html.

[@juanpabloflorezsuarez4483]

This tutorial is just so perfect

[@Staceynova]

Thank you!! I’m glad it was useful 🥰

[@RumbidzaiGonyora]

Hi-which software did you use for this?can i use arcgis?

[@umahatokula9586]

I really love you tutorial. At the begining, what is Adobe Photoshop you used to generate the SGV? Also, was the map image a normal image like .jpg .png?

[@Staceynova]

Thank you! I used illustrator to create the svg. And yes, the map I took from the internet was jpg (or you can use png too).

[@yu11757]

Love your video. Please make more!

[@Staceynova]

Hahah okay. Let me know if you are interested in anything in particular. The new one is coming on how to make a navigation bar.

[@msun3182]

I LOVE your tutorial, just I would like to understand better what you say on the fast seed parts

[@Staceynova]

Thank you! Sorry my bad, I just thought it was so slow so I increased the speed. I understood from the comments that it was a mistake 😅 well it was a first time, I won’t do that anymore haha

[@msun3182]

@@Staceynova because all you say is very interesting. I would like to learn mire about the maps❣️

[@natashabennett6930]

I am having a problem and I could really use some advice! So I’m adding the SVG map as part of a website so it’s not alone in my html index. When I pasted the svg in, it was laid on top of my website at the top, I have tried moving it down by adding a margin but all that does is create an empty white space where it was before, rather than moving the whole doc down and showing what is under it. Do you have any idea why this might be happening?

[@Staceynova]

I'm afraid it's difficult to say straight away what can cause the issue. Margin definitely won't help it. Probably need to fix the positioning. Do you have a link to the website so I could have a look?

[@RosalitoUdtohan_01]

will the display mess up if i view it on my mobile device?

[@Staceynova]

The map and markers will stay the same and all functionality will work. However the pop up windows with description might be a bit off. To solve it just relocate them in css for smaller screen. Use @media only screen and (max-width: 600px) {} *copy the txt boxes elements from the css that are already made here. Change the top and left values. For example: @media only screen and (max-width: 600px) { .russia-txt{ top: 2%; left: 30%;} } You can google media queries for more info. This will do the trick. Good luck!

[@sawnumlock195]

can we make all things dynamic?

[@Staceynova]

Sure. What exactly do you have in mind?

[@juniapenido7673]

Stacey, you are incredible!!! Thank you so much! Do you know how can I let only the selected marker in a different color? If you don’t, how can I search this on the internet? I don’t even know how to formulate the question Thank you again ❤️

[@Staceynova]

Thank you! Probably very late to answer but also in JS using toggle. Just need to specify the marker id.

[@primarilywebxyz]

Thank you so much.

[@rahulbakmeewewa4672]

Super!

[@bdm9ja230]

wow i enjoyed your tutoria but i want to learn more from you can this work..?

[@anugrahyulianto_]

The problems of this code are: 1. You couldn't click again the button to hide the paragraph or description box. I think it is because of the hide after the click. 2. I don't know it is only my problem or everyone also has the same problem. I found that the css codes to arrange the description boxes with percentages are always changing places. When I change the view of my code in full screen the description box position is moving away. I think you could help me with those problems. Thank you! Anyway the tutorial is great. Keep it up!

[@kristinavdovina5989]

Thank you🙏🏻

[@kuzmin_vitaliy]

Thank u so much!

[@kasmeneyes2227]

whats up with chipmunk voice

[@webdeveloperninja9220]

Thank you!!!!!!

[@AsadTheContestine]

Ur my fav

[@stupidaaryan]

thank you so muchhhhhhhhhhhhhhhhhh

[@AsadTheContestine]

Miss Ur such a beautiful perosn i wish i am Ur next door neighbor ...

[@kidscodera3043]

what's wrong with voice , am I the only one hearing the kidish voice ?

[@thekwoka4707]

Probably shouldn't be teaching jQuery for such simple things in 2021

[@Staceynova]

Well in 2021 I don’t think css and html is such an essential skill too, but I was getting a lot of people/clients who didn’t want to pay for plugins or wanted something custom, so I made this video. There are plenty of ways to do this, but this is the way I make them 🤷🏻‍♀️

[@jessymusinga4491]

Thank you so much. Been trying to learn this and this video just saved my life.