Weebly is a ridiculously easy and free way to get your website up in just minutes. It’s a hosting service and a CMS in one.
Some of our users asked how to embed map into a Weebly page. Here’s a walkthrough for you.
Prerequisites
We assume that you have downloaded amMap package and extracted it to some directory on your computer.
We also assume that you have a very basic understanding of what XML is and will not freak out when told to take any text editor to edit the data files.
We also fairly believe that David Gilmour and Roger Waters will reunite for one final Pink Floyd album. Without it your Weebly page may not function properly.
1. Create a new page for map assets
- Add Page;
- Name it: amMap assets (or anything else you fancy);
- Save Settings.
2. Prepare your map settings and data files
The explanation on configuring and preparing data for amMap is beyond the scope of this article. Feel free to visit our online documentation or review bundled samples located in “examples” subdirectory of the amMap package you downloaded.
The best way to start is to look for the example that matches your target map functionality as closely as possible. Use it as base. Every example directory contains at least two files: ammap_settings.xml and ammap_data.xml.
ammap_settings.xml contains settings that control how amMap looks and behaves. For now let’s leave it as it is.
ammap_data.xml is the file that is responsible for telling amMap what map to use and what information to display. Let’s use “examples/grouped_areas” example for the purpose of the lab rat.
Theoretically you should edit this file with your actual information. For now let’s just make one important change to it required for Weebly. Open the file in any simple text editor (Notepad is just fine). Then remove any directory path info in the <map map_file=”…..” …> just so the file portion remains.
Make a note what map file is used in the example. (world3.swf in our case) You will need it in further steps.
You have your amMap assets ready. Now let’s…
3. Upload your amMap assets to Weebly
To upload your amMap assets, select “amMap assets” page for editing.
Go to Elements and Multimedia.
Drag a File icon to the page.
Click the icon so that file upload control appears.
Click Upload new file.
Select ammap_settings.xml from the directory you have your settings in (“examples/grouped_areas” in our case)
Repeat this routine for ammap_data.xml and for the map file used in the examle (world3.swf in our case).
Hint: all map files are located in “ammap/maps” directory.
There, your assets are ready:
4. Find out the base URL for your assets
You will need to reference your map assets from another page(s). Therefore you will need to note paths (URLs) to them.
Here’s how to do it:
- Roll over one of the files;
- The browser will display a link to the file in it’s status bar;
- The link will look like this: http://www.weebly.com/uploads/8/6/5/3/8653370/world3.swf;
- We need only the part that starts with /uploads… and ends with the last backslash: http://www.weebly.com/uploads/8/6/5/3/8653370/world3.swf;
- Make a note of it, copy it to some temporary file, remember it, whatever works for you.
5. Create a page for the map
Let’s create a new page that will display the actual map. I cleverly named it “Map”. You know why? No? Because it contains… wait for it… a map. Duh!
6. Add amMap
And now Ladies and Gentlemen, comes the part you’ve all been waiting for: adding the actual map.
In “Map” page edit mode select Elements –> Multimedia.
Drag Flash icon to the page:
Click the Flash placeholder to upload amMap.
Click Upload new File.
Select “ammap/ammap.swf”.
Weebly will upload the file and will display nasty error in place of the map. Something like this:
Do not despair. amMap is grumpy because we haven’t supplied it with its daily dose of settings and data, yet.
Click map area again so that it’s properties control appears on top of the screen.
While we’re there you can edit Width and Height settings. Please note that dimensions can either by in fixed pixels (px) or relative (%). I’ll change the width to “100%” just so it takes the whole width of the site nicely.
Click Advanced button.
Now we need to tell amMap where to look for it’s data and settings. The field Flash Vars is there for just the purpose.
Here’s what you should enter there:
settings_file=[path_to_assets][your_settings_file_name]&data_file=[path_to_assets][your_data_file_name]&path=[path_to_assets]
Replace [path_to_assets] with whatever you got in Step #4 (Finding the base URL of your assets). Replace [your_settings_file_name] and [your_data_file_name] with the actual file names of the respective files you uploaded in Step #3.
Here’s what I got for my sample:
settings_file=/uploads/8/6/5/3/8653370/ammap_settings.xml&data_file=/uploads/8/6/5/3/8653370/ammap_data.xml&path=/uploads/8/6/5/3/8653370/
Enter it all into Flash Vars field.
Voila!
7. Finishing up
Now before you break out the champagne let’s do a couple of wrap-up tasks.
First of all we need to hide our amMap assets page so it does not show on site menu. To do that:
- Go to Pages tab;
- Select amMap assets;
- Check Hide page in navigation menu; (if you will ever need to reupload updated assets you can enable this page by unchecking this checkbox)
- Save Settings.
Now all we have left to do is to publish our site. For that you will need to perform a very complicated task of clicking this button:
And we’re done.
Here’s the link to my result Weebly page.
