How to Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder

Apart from using map templates that the digital mapping editor offer, it is also possible for users to import their own custom map images such as the floor plan and street map into the software. Then add placemark to define the location, with infobox and tooltips showing additional information on a mouseover or mouse click. This tutorial takes you through the steps of creating a clickable map using your own image.

Steps

  1. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 1
    1
    Download the interactive map building software from its official website and install in your computer.
  2. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 2
    2
    Run the software, click the icon "Create" to create a new map.
  3. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 3
    3
    Click 'Import a custom map image' to import image in JPG, GIF or PNG format.
  4. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 4
    4
    In the Map Options tab,set the map title, background color, layout and map size. You can check the box "Zooming Function" to allow the users to zoom in/out and navigate the maps.
  5. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 5
    5
    Click 'Custom map options' tab and enter the desirable width/height of the map. Click 'Update Map Size' when done.
  6. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 6
    6
    Add labels/icons/points/lines/infobox/tooltips by pressing the icons under point,line,text section
  7. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 7
    7
    Click "Preview" in the menu bar to see how it will look in the browser.
  8. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 8
    8
    Select File->Publish and select the folder you would like to publish the map.
  9. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 9
    9
    After publishing the map, a "Publishing" pop-up window will be displayed. Copy and paste the embed code into your existing webpage using Dreamweaver/Frontpage or any other HTML editors.
  10. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 10
    10
    Save the webpage (e.g myWebPage.html), navigate to the publish folder and copy the "imapbuilder" folder to the same directory as the myWebPage.html
  11. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 11
    11
    Click Ftp Setting to set the ftp information.(Please do not fill in http:// or ftp:// in the Ftp Host)Default Host Directory is the path to your root directory of your server, you can leave it blank if you don't have this information. (Usually, it will be /public_html, /htdocs, /var/www/html, you may contact with your web hosting to get this information.)
  12. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 12
    12
    After you set the ftp information, click Upload in the publishing screen.
  13. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 13
    13
    Select Remote Folder if necessary and click Upload to start uploading.
  14. Image titled Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder Step 14
    14
    After upload finish, you can browse the flash map by clicking the url link and you can modify the url link if not appropriate.

Sources and Citations

Article Info

Categories: Graphics