Login

HTML5 Drill-Down Map - Customization

Customization of the map settings

All map settings are configured during map initialization by passing a simple object with map parameters to a FlaMap class constructor. All configuration parameters can be stored in a separate file (for example, settings.js). Also there is another way to customize the map in real time – using API functions of the map object.

To modify the default map parameters you will need to follow these steps:

  • Open the settings.js file in any text editor (for example, Notepad++).
  • Set the new values as described below.
  • Save the settings.js file and upload it to the website via FTP or control panel of your CMS.

See the list of map parameters that can be customized below. The “Map” section specifies parameters of the entire map. The “Region” parameters allow you to tune the view and behavior of a specific area (term “area” means country, state, county or any other related geographic unit).

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
borderWidth 1 Widths of the region borders
borderColor Hex value Border color
borderColorOver Hex value Border color when the region is hovered
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
pathToJSON string Path where all map data for sub regions is stored (default: "data/")
mainCfg string filename with configuration for the top-level region (default: "main.cfg.js")
inputName string Name of the input field in which selected states are stored (and can be sent to server)
inputValue string Default value for input field. Specified states will be selected
parseQueryString true/false If true - query string will be parsed for searching "inputName" and founded values will be default values for "inputValue"
multiSelect true/false If false - only one state can be selected at a time
backButtonTitle string Text for back button
Region settings
id number The id of a region. Must not be changed
name text The name of a region
popup_type 1 or 2 ype of popup behavior. If 2 - url won't be opened,but popup will freeze (if url property not empty)
url text The landing page URL. May include JS code
target text Target for opening url
popup 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 Hex value The color of a region. Default color #7798BA
color2 Hex value The color of a region when the mouse cursor is over it. Default color #366CA3
color3 Hex value The color of a region when it is selected. Default color "#ff0000"

Example

data/cont_eu.cfg.js - contains simple JSON data that describes EU region of the world map.

{
"s2s1":
    {
    "name":   "Albania",
    "color":  "#7798BA",
    "color2": "#366CA3",
    "color3": "#FF0000",
    "popup_type" : "1",
    "url" :   "albania_page.html",
    "target": "",
    "popup":  "Name Surname<br>Business Development Manager<br>Phone: (000) 123-4567",
    "image":  "photo.jpg"
    },
    ...
}

This configuration example demonstrates the following parameters of the map:

  • The region is configured to open albania_page.html when clicked;
  • The tooltip with the name and phone number of a development manager with a specified photo.jpg will be displayed (Note: photo should be uploaded on the website).
  • The non-active color of the region is set to #7798BA and the hover color of the region is set to #366CA3. Color #FF0000 specified as a color in case of selection, but this region will never be selected because it opens specified url.
Last updated on 27th Feb 2015