Tutorial 6 : Locally Hosted Maps

Select a locally hosted map script when editing the map channel. This option allows you to download a zipped file containing all the files needed to host the map on your own website (instead of the default remotely hosted method).

To create a local script edit your map channel settings then select the Local Script option in section 2 Script Settings and click Update.

The Map Script section then displays a link to a zip file containing the files required for your map. Download this file and extract the contents into a folder of your website.

There is an HTML file in the script files named [ChannelName].local.htm. You can edit this file to add additional content and formatting.

Alternatively you can copy and paste from this HTML file into another file on your website, note that this file must be in the same folder as your other map script files.

Full Screen Locally Hosted Maps

Add a div with an id of 'fsDiv' to your HTML to make the map full screen. The map will adjust size as the window changes.

e.g. <div id='fsDiv'></div>

Including off-map toolbar sections

By default the toolbar of the map contains a number of control sections accessible by clicking the 'Toolbar' link. You can relocate some of these control sections to a <div> elsewhere on the web page. Using off-map sections improves the prsentation of map features by displaying the control options when the page is loaded instead of when the user clicks on 'Toolbar'.

To use off-map sections create a div with an id corresponding to the toolbar section you want to display.

channelsDiv : e.g. <div id="channelsDiv"></div> - displays the channels list within this div.

filtersDiv : e.g. <div id="filtersDiv"></div> - displays the filters list within this div.

navToolsDiv : e.g. <div id="navToolsDiv"></div> - displays the navigation tools within this div.

intSearchDiv : e.g. <div id="intSearchDiv"></div> - displays the map search control within this div.

You can customize the html style within the div, e.g. to change font and colours.

Adding additional channels

You can add or change the data displayed on your locally hosted map without the need to generate a new script.

Edit the channelname.js file and add an mc_addChannel command:

mc_addChannel(channelName, channelTitle, visible)


channelName (string)    The file name of the channel. If no file extension is supplied then '.xml' is automatically added to the name. The file must be in the same domain as the web page (no external Urls).

channelTitle (string)    The title displayed beside the channel selection checbox.

visible (int)    0 if the channel is initially hidden, 1 if the channel is initially visible.

Return to the Tutorials Index


Map Channels Events  • Map Channels Hotels  • TripGeo  • Team Maps  • Street Cities  • My Maps Plus (c) www.mapchannels.com, 2007-2017   Terms