Login

HTML5 Locator Map - API reference

class: FlaMap

Version: 2.7.0
Members

* - This functions are deprecated. You should use setStateAttr.

# new FlaMap(config)

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

Params

  • config object - plain object with following optional keys:

    {
"mapWidth":        620,   // Map width in pixels. If 0 - map width will be 100% (responsive mode)
                          // Also any percent value can be specified. I.e. '50%'
"mapHeight":       360,   // Map height. If width = 0 or % - height will be ignored

"shadowAllow":     true,   // Whether draw shadow for active area or not
"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,   // 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":     false,  // Whether to open new links in new window or in current

"zoomEnable":      true,       // Whether zoom capabilities enabled or not
"zoomEnableControls": true,    // Whether zoom controls are available or not
"zoomIgnoreMouseScroll": false // Wether to ignore mouse scrolling or zoom in/out on mouse scroll
"zoomMax":         2,          // Maximum zoom level
"zoomStep":        0.2,        // This setting is used by scroll zooming and zoomIn and zoomOut methods

"color":           "#7798BA",  // State color
"colorOver":       "#366CA3",  // State color for active region
"colorDisabled":   "#ccc"
"borderWidth":     1,          // Border width for regions
"borderColor":     "#ffffff",
"borderColorOver": "#ffffff",  // Color of the border for active region
"borderColorDisabled": null,
"borderOpacity":   0.5,        // opacity of the border

"nameColor":       "#ffffff",  // Name colors (used with short name)
"nameColorOver":   "#ffffff",  // Name colors when state is hovered (used with short name)
"nameColorDisabled":null,
"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

"pointColor": "#FFC480",
"pointColorOver": "#DC8135",
"pointNameColor": "#000",
"pointNameColorOver": "#000",
"pointNameStrokeColor":  "#FFFFFF",
"pointNameStrokeColorOver": " #FFFFFF",
"pointNameFontSize": "10px",
"pointNameFontWeight": "bold",
"pointNameStroke": true,

"pointBorderWidth": 0.5,
"pointBorderColor": "#ffffff",
"pointBorderColorOver": "#ffffff",

"tooltipOnHighlightIn": true,  // Whether show tooltip on map.stateHighlightIn call or not.
                               // If true - map will be focused on highlighted state.
"freezeTooltipOnClick": false,

"overDelay":         300,  // animation duration in milliseconds

"map_data":         {...} // Region specific parameters.
                          // This is only required paramter!! All other params are optional.
}

Region specific parameters:

{
  "st1": {
       "id":             1,
       "name":           "Full region name",
       "shortname":      "SHT",
       "link":           "http://example.com",
       "comment":        "",
       "image":          "",
       "color":          "#7798BA", //Optional, prev. color_map
       "colorOver":      "#366CA3", //Optional,  prev. color_map_over
       "colorDisabled":  "grey", // Optional, not required. If doesn't exist disabled state will use "color",
       "borderColor":    null, // Optional
       "borderColorOver":null, // Optional
       "borderColorDisabled":null,// Optional
       "nameColor":    null, // Optional
       "nameColorOver":null, // Optional
       "nameColorDisabled":null,// Optional
       "nameStrokeColor":    null, // Optional
       "nameStrokeColorOver":null, // Optional
       "nameStrokeColorDisabled":null,// Optional
       "disabled":       true,       // Optional, not required. False by default
       "hidden":         true        // Optional. False by default
       },
...
}

Returns: object - FlaMap object Example 

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

FlaMap.on(event, callback)

Set callback handlers for specified events

Params

  • event string - one of possible events: click, dblclick, mousein, mouseout, mousemove, mousedown, mouseup.
  • callback function - function that that will be called. 3 parameters will be passed to callback:
  1. original event,
  2. sid (state id),
  3. map object it self.

Returns: FlaMap
Example 

map.on('mousein', function(ev, sid, map) { console.log(sid); });

FlaMap.fetchStateAttr(sid, attr)

get attribute from config for specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • attr string - valid attributes (id, name, shortname, link, comment, image, color, colorOver, ...)

Returns: string - returns value for selected config parameter.
Example 

var name = map.fetchStateAttr('st1', 'name');

FlaMap.fetchPointAttr(pid, attr)

get attribute from config for specified point

Params

  • pid string - point key from settings.js ie. p1, p2, p0....
  • attr string - valid attributes (id, name, shortname, link, comment, image, color, colorOver, ...)

Returns: string - returns value for selected config parameter.
Since: 2.4.0
Example 

var name = map.fetchPointAttr('p1', 'name');

FlaMap.stateModify(sid, fillColor, borderColor)

Change color properties of the state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • fillColor string - color to fill the state ie. #11AABB
  • borderColor string - color to fill stroke ie. #000000

Deprecated
Better to use setStateAttr

Example 

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

FlaMap.stateLabelModifyText(sid, text)

Change label text of the state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • text string - text to go as label for that state

Deprecated
Better to use setStateAttr

Example 

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

FlaMap.hideState(sid)

Hide specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

map.hideState('st1');

FlaMap.showState(sid)

Show specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

map.showState('st1');

FlaMap.isStateHidden(sid)

Returns whether specified state is hidden. Returns true if hidden, false if not and undefined if specified state doesn't exists

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: Boolean | undefined
Example 

if (map.isStateHidden('st1')) alert('State with id st1 is hidden!');

FlaMap.disableState(sid)

Disables any interaction with this state.

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

map.disableState('st1');

FlaMap.enableState(sid)

Enables specified state if it was disabled.

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

map.enableState('st1');

FlaMap.isStateEnabled(sid)

Enables specified state if it was disabled.

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: boolean
Example

map.isStateEnabled('st1');

FlaMap.stateLabelModifyColor(sid, fillColor, borderColor)

Change label text of the state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • fillColor string - color to fill the state label ie. #11AABB
  • borderColor string - color of the border for specified state label ie. #11AABB

Deprecated
Better to use setStateAttr

Example 

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

FlaMap.stateHighlightOn(sid, fillColor, borderColor)

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

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • fillColor string - fill color for highlighted state. Optional.
  • borderColor string - border color for highlighted state. Optional.

Returns: FlaMap
Example 

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

FlaMap.stateHighlightOff(sid)

Return the state to normal default color

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

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

FlaMap.stateHighlightIn(sid, fillColor, borderColor)

Highlight specified stated. It will be highlighted until stateHighlightOut or any other stateHighlight appear

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • fillColor string - fill color for highlighted state. Optional.
  • borderColor string - border color for highlighted state. Optional.

Returns: FlaMap
Example 

<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>

FlaMap.stateHighlightOut(sid)

Return the state to normal default color after stateHighlightIn

Params

  • sid string - state key from settings.js ie. st1, st2, st10....

Returns: FlaMap
Example 

<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>

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

Add text to map

Params

  • 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.

Example 

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

FlaMap.setColor(sid, color)

set default color for specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • color string - color for inactive state: '#bbb' or 'red'

Deprecated
Better to use setStateAttr

Example 

map.setColor('st1', 'green');

FlaMap.setColorOver(sid, color)

set default highlight color for specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • color string - color for inactive state: '#bbb' or 'red'

Deprecated
Better to use setStateAttr

Example 

map.setColorOver('st1', 'red');

FlaMap.setLink(sid, url)

Set new url for specified state

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • url string - new link for specified state.

Deprecated
Better to use setStateAttr

Example 

map.setLink('st1', 'http://example.com');

FlaMap.setComment(sid, comment)

Set new url for specified state. If popup for specified stated already drown new comment won't be applied unless new redraw.

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • comment string - new comment for specified state.

Deprecated
Better to use setStateAttr

Example 

map.setComment('st1', 'This is really great place!');

FlaMap.setStateAttr(sid, attr, [value])

This methods allows you to change value of any state specific attribute.

Params

  • sid string - state key from settings.js ie. st1, st2, st10....
  • attr string | Object - can be either a name of a single attribute or an object, containing set of attributes and values Possible attributes: color, colorOver, colorDisabled, borderColor, borderColorOver, borderColorSelected, borderColorDisabled, nameColor, nameColorOver, nameColorDisabled, nameStrokeColor, nameStrokeColorOver, nameStrokeColorDisabled, link, isNewWindow, target, shortname, nameFontSize, name, comment, image.
  • [value] string - new value for the attribute (if single attribute name specified). If value isn't specified for a single attribute, than attribute value will be reset to default.

Returns: FlaMap
Since: 2.4.0
Example 

map.setStateAttr('st1', 'color', '#fff');
map.setStateAttr('st1', {'name': 'New state name', 'comment': 'new comment value'});
map.setStateAttr('st1', 'color'); // reset state color to a default value

FlaMap.setPointAttr(pid, attr, [value])

This methods allows you to change value of any point specific attribute.

Params

  • pid string - point id from settings.js ie. p1, p2, p10....
  • attr string | Object - can be either a name of a single attribute or an object, containing set of attributes and values Possible attributes: color, colorOver, colorDisabled, borderColor, borderColorOver, borderColorSelected, borderColorDisabled, nameColor, nameColorOver, nameColorDisabled, nameStrokeColor, nameStrokeColorOver, nameStrokeColorDisabled, link, isNewWindow, target, shortname, nameFontSize, name, comment, image, x, y, textPos, radius
  • [value] string - new value for the attribute (if single attribute name specified). If value isn't specified for a single attribute, than attribute value will be reset to default.

Returns: FlaMap
Since: 2.4.0
Example 

map.setPointAttr('p1', 'color', '#fff');
map.setPointAttr('p1', {'name': 'New point name', 'comment': 'new comment value'});
map.setPointAttr('p1', 'color'); // reset point color to a default value

FlaMap.addPoint(x, y, name, [id])

This methods allows you to add point to a specified position

Params

  • x int
  • y int
  • name string
  • [id] string - id for a new point. If not specified - will be automatically generated.

Returns: string - returns point id
Since: 2.4.0

FlaMap.deletePoint(id)

Removes specified point.

Params

  • id string - id of the point to delete

Returns: FlaMap
Since: 2.4.0

FlaMap.reloadMap()

reload the map

Example 

map.reloadMap();

FlaMap.draw(container)

draw the map in specified container

Params

  • container string | HTMLElement - id of html element or html element it's self. Ie: 'map_container'

Returns: FlaMap
Example 

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

flaMap.drawOnDomReady(container, [callback])

delay draw call until document DOM is ready

Params

  • container string - See @FlaMap.draw
  • [callback] function - Function that will be called after map will be drawn. Map object will be passed as the only parameter.

Returns: FlaMap
Example 

map.drawOnDomReady('container', function(map) {
  map.on('click', function() { alert("Map is clicked!"); });
});

FlaMap.enableZoom(enable, enableControls)

enable or disable zoom capabilities

Params

  • enable boolean - enable or disable zoom capabilities
  • enableControls boolean - show or not built-in zoom controls.

Returns: FlaMap
Example 

map.enableZoom(true, false);

FlaMap.updateZoom(zoom)

Set zoom level to specified level. Will be automatically corrected to min or max value

Params

  • zoom number - zoom level. Ie: 2.

Returns: FlaMap
Example 

map.updateZoom(2);

FlaMap.zoomIn()

One step zoom-in

Returns: FlaMap
Example 

map.zoomIn();

FlaMap.zoomOut()

One step zoom-out

Returns: FlaMap
Example 

map.zoomOut();
Last updated on 6th May 2021