Introducing ZoomMap 0.9 (the beta version)
I found a cool jQuery interactive map (
http://www.newmediacampaigns.com/page/a-jquery-plugin-for-zoomable-interactive-maps) and I created a MODx snippet for it, that does almost all of the work for you. Now you can make interactive maps just by adding documents to MODx!
Setup:
Upload zoommap.zip and unzip into the
assets/snippets/ directory.
Create a snippet:
Snippet name:
ZoomMap
Description:
<b>0.9</b> a jQuery interactive map
Snippet code:
copy and paste from snippet.txt
Create a template for your data:
It is probably easiest to just duplicate an existing template and put [!ZoomMap!] in the template where you want the map to appear.
Create these template variables and assign them to the template:
(
Variable name /
Caption /
Input Type)
zmX / X / Number
zmY / Y / Number
zmMap /Map / Image
If you want to to zoom into a more detailed map, add these template variables:
zmAreaWidth / Area Width / Number
zmAreaHeight / Area Height / Number
If you want to use different colored location margers, add another template variable
zmBulletStyle / Bullet Style / Dropdown List Menu
Input Option Values:
Gold Star==||Red Star==redstar||Green Star==greenstar||Blue Star==bluestar
Now create a page, and use the new template you created. Assign an image to the map tv.
To create a location on the map, create a new page as a child of the main document. Add a title and some content, and assign some numbers to the x and y tvs.
When you view the main map page, you should see a star appear at the location you specified. If you click on the star, a box will pop up with the title and content.
If you want to zoom into a part of the map, add another document as a child of the main map. Assign a different image to the map tv, and give the x and y coordinates for the upper left corner of the clickable zone, and the width and height of the clickable zone.
You can add as many points of interest as you like, and you can nest these maps as many levels deep as you want. This is the beta version, so please give feedback if you find any problems. There are a lot of parameters that you can use to config this snippet too, but I don’t have time to document them now.
June 3: Updated zip file to fix problem with IE
☆ A M B ☆
it doesn’t work in IE...Am I the only one with that problem?
