Opinion/help wanted: Create an interactive (SVG) map.

[Teun87]

Hi everybody,

 

At the moment we are looking for the best options/frameworks to create an interactive map with JS, HTML and CSS. At this point we're also considering to implement small animations. Since we do not have a lot of experience I would love to hear your opinion about the following:

 

The idea is to create a static (SVG) map with interactive buildings on it (with animated hover state). When you click on it a panel with more information and follow-up pages comes sliding in. Would GreenSock form a good base to setup the interactive map? We need to be able to select the buildings based on inside and outside-map clicks.

 

More ideas or suggestions? Please!

 

Kind regards,

Teun

[paper]

Hi Teun87!

look at this https://www.mapplic.com/

i've integrated it in a application... works fine

logically u can develop it your own in Adobe animate CC and GSAP...

 

[Teun87]

Thanks, but we're planning to build this from the ground up.

Without making use of any extra applications.

[PointC]

Hi @Teun87

 

Welcome to the forum.

 

GSAP can certainly handle the animation for your project -- no problem. Please keep in mind that GSAP is an animation engine and doesn't do any of the rendering. That's all done by the browser. From your description I think an SVG should work well. Depending on how complex and big the maps are going to be, you may also want to look at canvas instead of SVG. Browsers do have their limits. I'd say go ahead and download GSAP for a test run and see what you think. Good luck with your project.

 

Happy tweening.

[polygame]

I did this with Animate CC and tweenLite. If you are interested let me know I will send you the Code

https://leaptothetop.net/DevZone/eModule/formation/ubd/map-PointnClick_Zoom.html

Edited May 11, 2018 by polygame
missed a word