Login

HTML5 Locator - Map Customization

Map parameters

All map settings are configured during map initialization by passing a simple object with map parameters to a FlaMap class constructor. For more simplicity we will store all our map configuration in a separate file. In our case it will be the settings.js file. Also all configuration can be done in real-time by using API functions of the map object. To modify the default parameters of the map, open the settings.js file in any text editor, like Notepad++ or any other, set new values as described below, then save changes and upload the settings.js file back to the website via FTP or the control panel of your CMS.

Here is the list of map parameters you can change. The “Map” section specifies parameters of the entire map. The “Region” parameters allow you to tune the view and behavior of a specific region (state, county, area and other geographic units).

Parameter name Values Description
Map settings
mapWidth 400 Map width in pixels. If 0 - map width will be 100% (responsive mode)
mapHeight 450 Map height. If width = 0 - will be ignored
shadowWidth 2 Shadow width
shadowOpacity 0.3 Shadow opacity
shadowColor "black" Shadow color. Can be in #rgb format
shadowX 1 Shadow offset by X coordinate
shadowY 2 Shadow offset by Y coordinate
iPhoneLink true/false If 'true' - the URL is opened immediately. Useful if you don't need to display a popup window.
If 'false' - the first tap displays a popup window for the selected area. The second tap opens the URL.
isNewWindow true/false Whether to open new links in a new window or in the current one
zoomEnable true/false Whether zoom capabilities are enabled or not
zoomEnableControls true/false Whether zoom controls are available or not
zoomMax 2
zoomStep 0.2 This setting is used by scroll zooming and zoomIn and zoomOut methods
borderColor Hex value The color of region's borders
borderColorOver Hex value Color of the border for active region
nameColor Hex value Name colors (used with short name)
nameFontSize 11px Short name font size
nameFontWeight bold/normal Short name boldness. Can be "normal" or "bold"
nameStroke true/false Whether short names should have stroke or not
overDelay secs Animation duration in milliseconds
Region settings
id number The id of a region. Must not be changed
name text The name of a region
shortname text The abbreviated name of a region
link text The landing page URL. May include JS code
comment HTML formatted text The text of the popup window. May include HTML formatting
image text The file name of the image to display in a popup
color_map Hex value The color of a region. Default color #7798BA
color_map_over Hex value The color of a region when the mouse cursor is over it. Default color #366CA3

Example

var map_cfg = {
    ...
    map_data: {
        st1: {
            id: 1,
            name: "Alabama",
            shortname: "AL",
            link: "alabama_page.html",
            comment: "Name Surname<br>Business Development Manager<br>Phone: (000) 123-4567",
            image: "photo.jpg",
            color_map: "#7798BA",
            color_map_over: "#366CA3"
        },
        ...
    }
};

The region here is configured to open alabama_page.html when clicked, to display a tooltip with the name and phone number of a business development manager and a specified photo.jpg (should be uploaded as well). The non-active color of the region is set to #7798BA and if the mouse cursor is over the region its color changes to #366CA3.

Configuring parameters in real-time

You can adjust parameters when a map object is created using JavaScript. You can change any of map settings specified in the settings.js file by modifying values of the map_cfg variable:

    <div id='container'></div>
    <script>
    map_cfg.mapWidth = 0;
    map_cfg.zoomEnable = false;
    var map = new FlaMap(map_cfg);
    map.draw('container');
    </script>

Here we are making the map responsive by assigning zero to its mapWidth parameter and disable zooming. Then we create a map object as usual using the map_cfg variable.

Some parameters of the map can be configured in real-time via the map API. For example, the below code shows how to activate certain regions in response to user’s actions:

<body>

    <div id='container' style="width: 50%"></div>
    <script>
    var map = new FlaMap(map_cfg);
    map.draw('container');
    </script>

    <a href="javascript:map.stateHighlightOn('st28'); map.stateHighlightOn('st29');void(0);">Highlight states ON</a><br>
    <a href="javascript:map.stateHighlightOff('st28'); map.stateHighlightOff('st29');void(0);">Highlight states OFF</a><br>

</body>

The above code uses the stateHighlightOn() API function to force highlighting of the regions specified by their id. The other link uses stateHighlightOff() to turn highlighting off.

Please refer to the “API Reference” section for the complete list of API functions and usage examples.

Last updated on 12th Jan 2015