Login

HTML5 Drill-Down Map - API reference

Table of Content

class FlaMap

Creates a map object with specified parameters. This method accepts only one parameter. Plain object with config options

Parameters:

  • config (object) plain object with following optional keys:
{
  mapWidth:       500, // Map width in pixels. If 0 - map width will be 100% (responsive mode)
                       // Also any percent value can be specified. I.e. '50%'
  mapHeight:      350, // Map height. If width = 0 or % - height will be ignored

  borderWidth:    1, // Border width for regions
  borderColor:    "#ffffff",
  borderColorOver:"#ffffff", // Color of the border for active region

  nameColor:      "#ffffff", // Name colors (used with short name)
  nameFontSize:   "11px", // Short names font size
  nameFontWeight: "bold", // Short name boldness. Can be "normal" or "bold"
  nameStroke:     false, // Whether short names should have stroke or note

  overDelay:      100, // animation duration in milliseconds

  pathToJSON: "data/", // path where all map data for sub regions is stored
  mainCfg: "main.cfg.js", // filename with configuration for the top-level region

  inputName: "", // Name of the input field in which selected states are stored (and can be sent to server)
  inputValue: "", // Default value for input field. Specified states will be selected.
  parseQueryString: true, // If true - query string will be parsed for searching "inputName" and founded values will be default values for "inputValue"

  multiSelect: false, // If false - only one state can be selected at a time

  backButtonTitle: 'back' // Text for back button

}
Region specific parameters:
{
  's1s1': {
      "name":"Afghanistan", // Region name
      "color":"#7798bb", // Normal color
      "color2":"#366CA3", // Highlighted color (mouse over)
      "color3":"#ff0000", // Selected color
      "popup_type" : "1", // Type of popup behavior. If 2 - url won't be opened,but popup will freeze (if url property not empty)
      "url" : "", // If not empty and popup_type - 1 this url will be opend by click
      "target" : "", // Target for opening url
      "popup": "", // Popup text
      "image": "" // Popup image
  },
...
}

Returns:

(object) instance of FlaMap

Usage example:

<div id="c"></div>
<link rel="stylesheet" href="map.css">
<script src="lib/raphael.js"></script>
<script src="lib/jquery-1.7.min.js"></script>
<script src="map.js"></script>
<script>
var map = new FlaMap(settings);
map.draw('c');
</script>

FlaMap.draw(container)

draw the map in specified container

Parameters:

  • containerId (string) id of html element. Ie: 'map_container'

or

  • container (HTMLElement) html element to which map will be appended

Usage example:

<div id="map_container"></div>
<script>
var map = new FlaMap(config);
map.draw('map_container');
</script>

FlaMap.drawOnDomReady(container)

delay draw call until document DOM is ready

Parameters:

Usage example:

map.drawOnDomReady('container');

FlaMap.stateModify(state, fillColor, strokeColor)

Change color properties of the state

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....
  • fillColor (string) color to fill the state ie. #11AABB
  • strokeColor (string) color to fill stroke ie. #000000

Usage example:

map.stateModify('s1s1', '#bbb', 'white');

FlaMap.stateLabelModifyText(state, text)

Change label text of the state

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....
  • text (string) text to go as label for that state

Usage example:

map.stateLabelModifyText('s1s1', 'My region!');

FlaMap.stateLabelModifyColor(state, fillColor, borderColor)

Change label text of the state

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....
  • fillColor (string) color to fill the state label ie. #11AABB
  • borderColor (string) color of the border for specified state label ie. #11AABB

Usage example:

map.stateLabelModifyColor('s1s1', 'red', 'black');

FlaMap.disableState(state)

Hide specified state

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....

Usage example:

map.disableState('s1s1');

FlaMap.selectState(state)

Highlight specified stated. It will be highlighted until stateHighlightOff is called.

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....

Usage example:

<a href="javascript:map.selectState('s1s2')">Select region 1</a>

FlaMap.unselectState(state)

Return the state to normal default color

Parameters:

  • state (string) name from settings.js ie. s1s1, s2s12, s1s10....

Usage example:

<a href="javascript:map.unselectState('s1s2')">Unselect region 1</a>

FlaMap.openState(state)

Open submap for specified stated if available. Specified region must present on opened map and must have submap.

Parameters:

  • state (string) name from settings.js ie. s1, s2, s10....

Returns:

(bool) return true on success, false otherwise.

Usage example:

<a href="javascript:map.openState('s1')">open region 1</a>

FlaMap.addText(text, x, y, fillColor, fontWeight, fontSize)

Add text to map

Parameters:

  • text (string) text to add
  • x (number) x coordinate for text
  • y (number) y coordinate for text
  • fillColor (string) color of the text ('black' or '#555' for ie)
  • fontWeight (string) one of: normal, bold, italic
  • fontSize (number) font size. 14 for ie.

Usage example:

map.addText('my map!', 0, 0, 'red', 'bold', 20);

FlaMap.reloadMap()

reload the map

Usage example:

map.reloadMap();

FlaMap.on(event, callback)

Set callback handlers for specified events

Parameters:

  • event (string) on of possible events: click, mousein, mouseout, push, pop
  • callback (function) function that that will be called. 3 parameters will be passed to callback: 1) - orginal event (null for push and pop), 2) sid (state id), 3) map object it self.

Usage example:

map.on('mousein', function(ev, sid, map) {
    var n = map.fetchStateAttr(sid, 'name');
    alert("You are now entering "+name+" state!");
});
Last updated on 17th May 2018