Creating an interactive map with HTML5,CSS3,Javascript
Solution 1
Since I've been searching on this I found this interesting site where u can draw your own svg images. http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
You can easily get the svg code for the diagram.
And easily we can integrate click events,whatever java script code with the svg image. cheers!!
Solution 2
Try FLDraw Interactive Image Creator Lite, it's free, use it to create a mobile-friendly interactive map of your school, I have used it for some of my projects (not the Lite edition, because I needed some advanced features too)
It's really simple:
- Start a new project and choose your school map image as your base image
- Use the Shape tool to create a hotspot
- Double-click your new shape element to open the events window
- Select an event type (tooltip, image infobox, HTML info box, ...)
- Save the project and Publish to HTML5
open the created HTML file in your browser.
Sample Interactive Map from their homepage
Amila Iddamalgoda
• Senior Full-Stack Developer • IT Consulting • Java/Angular/AWS • Technology Enthusiast • AWS Certified Solutions Architect – Associate #SOreadytohelp LinkedIn : https://www.linkedin.com/in/amila-iddamalgoda-81055a61 GitHub : https://github.com/amilaI
Updated on July 09, 2022Comments
-
Amila Iddamalgoda almost 2 years
I'm going to build and develop an interactive map of my school.Map should be fully interactive where there should be clickable event.When a user wants to view the laboratory details,he/she should be click on the specific lab region.So that clickable events,pop ups should be applied to the map.
I have started this task with SVG/CSS and HTML5.And also I have so far searched it and found this interesting link for this. http://jvectormap.com/examples/mall/
If anybody know a better tutorial or a site to accomplish my task,it will be very grateful.If so please share some tutorial/url links
Thanks