I need to create a rollover interactive map that can be seen in both apple devices and windows and macintosh computers. It would be nice if it were responsive. I already have started one and need to make it better, and also realized a little too late that flash catalyst is not compatible with apple.

The map I already have is on the page: www.campcedarbrook.net/camp-life/camp-tour
and its done in illustrator and flash catalyst so is only visible on a windows computer.

Do you know of
1) a joomla extension that will allow me to import and premade map image - illustrator file OR png/jpeg file and let me put markers on it and rollover images? AND is compatible with Apple Devices? OR where I can find the proper coding?

2) OR the proper code to do it myself? I tried to code it with finding the x and y axis and combine it with the jce pop up image code and it wasn't quite working.... Is there someone that could code it or let me know and how much would it cost?

the code I tried and was only partly successful is attached in a txt file. When I activate a page with that code, I click on the whole map it takes me to the image that I put there. I want to click on the image with those x and y coordinates to see that picture. And the picture gets stuck ont he screen as well.

I am sure this is more than a general forum. But if you could direct me ---much appreciated.


Thank you,
Rachel

have a check at zhuk.cc/ for interactive maps

and downloaded in extention directory Joomla here : extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/street-maps/16900

regards,

Bert

Thanks, do you know if this extension can use a custom image of a camp, made from illustrator rather than Google Maps?

Not sure , but they use using www.openstreetmap.org/ as well

Hi,

If you want to use a google map then the jbmaps 2 module has an option for adding a kml overlay file.

For standard image maps there are a few online tools to help you create one.

www.image-maps.com/

Image maps are not responsive by default but there are some javascript workarounds.

mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Hope that helps.

Rob

You could have a look at this extension:
www.joomlart.com/joomla/extensions/ja-image-hotspot-module

We have used it for custom images (and styled Maps), it is responsive, works for us. We did custom code a responsive solution for an image map but this is much simpler and easier to manage. You can customise the icons with a little hacking and the documentation is good. You can add links by adding html directly to the hotspots text.

Hope it helps
Ian

Thanks all! I found a combined way to use a custom image and make image maps that works really well and will be easily updatable- no code or javascript necessary.

I used the JA imagemap extension and then I put a jcepopup class in the class box for the link to the text. I already had jce pop up image extension installed. So for anyone that ever needs to do the same thing- it works pretty well without editing any code. And yes, responsive.

Its hard to see the text in the map image--an expensive software package would obviously be more professional, but for free it works pretty well for a non-profit!

www.campcedarbrook.net/interactive-map

Thank you all again!

Thanks folks

and thanks for the update

Cheers
Paul

That extension looks great.

It looks like you can add custom markers, so you could remove the buildings from the map and then put them back as the marker icons.

What a cool idea of removing the buildings from the image. I won't try becuase the illustrator map was done by a graphic designer....but that is a cool idea. Next project.

Good luck with it

You could cheat and create a transparent .png as a custom marker. Cursor will still change when you rollover the spot subject to css and you still see the original artwork. It will work for most clients.

Even better. Same effect with practically no work