new FlaMap(config)
Creates a map object with specified parameters.
This method accepts only one parameter. Plain object with config options
Name | Type | Description |
---|---|---|
config |
object |
plain object with following optional keys:
|
- Version:
- 2.3.0
Returns:
FlaMap
object
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>
Methods
-
addText(text, x, y, fillColor, fontWeight, fontSize)
-
Add text to map
Name Type Description 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, 'bold', 'red', 20);
-
disableState(sid)
-
Disables any interaction with this state.
Name Type Description sid
string state id name from *cfg.js ie. st1, st2, st10.... - Since:
- 2.3.2
Example
map.disableState('st1');
-
draw(container, container)
-
draw the map in specified container
Name Type Description container
string id of html element. Ie: 'map_container' or container
HTMLElement html element to which map will be appended Example
<div id="map_container"></div> <script> var map = new FlaMap(config); map.draw('map_container'); </script>
-
drawOnDomReady(container, callback)
-
delay draw call until document DOM is ready
Name Type Description container
string See @FlaMap.draw callback
function optional Optional callback that will be executed after draw is done. FlaMap object will be passed to callback. (since 2.3.3) Example
map.drawOnDomReady('container', function(map) { alert('Map is drawn!'); });
-
enableState(sid)
-
Enables specified state if it was disabled.
Name Type Description sid
string state id name from *cfg.js ie. st1, st2, st10.... - Since:
- 2.3.2
Example
map.enableState('st1');
-
enableZoom(enable, enableControls)
-
enable or disable zoom capabilities
Name Type Description enable
bool enable or disable zoom capabilities enableControls
bool show or not built-in zoom controls. Example
map.enableZoom(true, false);
-
fetchStateAttr(sid, attr){string}
-
get attribute from config for specified state. Options from second-level states will be available after that state will be opened first time.
Name Type Description sid
string state id from *cfg.js ie. st1, st2, st10.... attr
string valid attributes (name, shortname, url, popup, image, color, color2, ...) - Since:
- 2.3.2
Returns:
value for selected config parameter.
Example
var name = map.fetchStateAttr('name');
-
getSelectedStates(){Array}
-
Returns array of ids of selected states.
-
hideState(sid)
-
Hide specified state
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... Example
map.hideState('s1s1');
-
isStateEnabled(sid){boolean}
-
Enables specified state if it was disabled.
Name Type Description sid
string state id name from *cfg.js ie. st1, st2, st10.... - Since:
- 2.3.2
Example
map.isStateEnabled('st1');
-
on(event, callback)
-
Set callback handlers for specified events
Name Type Description 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) original event (null for push and pop events), 2) sid (state id), 3) map object it self. Example
map.on('mousein', function(ev, sid, map) { console.log(sid); });
-
openState(sid)
-
Open submap for specified stated if available. Specified region must present on opened map and must have submap.
Name Type Description sid
string state id from *cfg.js ie. s1, s2, s10.... Returns:
true on success, false otherwise.
Example
<a href="javascript:map.openState('s1')">open region 1</a>
-
reloadMap()
-
reload the map
Example
map.reloadMap();
-
selectAllStates(noEvent)
-
Highlight all states on current map.
Name Type Description noEvent
bool don't fire event (otherwise will be fired for every selected state). Example
<a href="javascript:map.selectAllStates(false)">Select all regions on current map</a>
-
selectState(sid, noEvent)
-
Highlight specified stated. It will be highlighted until unselected.
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... noEvent
bool don't fire event. Example
<a href="javascript:map.selectState('s1s2')">Select region 1</a>
-
showState(sid)
-
Show specified state
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... Example
map.showState('s1s1');
-
stateHighlightIn(sid, fillColor, borderColor)
-
Highlight specified stated. It will be highlighted until stateHighlightOut or any other stateHighlight appear
Name Type Description sid
string state id from *cfg.js ie. st1, st2, st10.... fillColor
string fill color for highlighted state. Optional. borderColor
string border color for highlighted state. Optional. Example
<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>
-
stateHighlightOut(sid)
-
Return the state to normal default color after stateHighlightIn
Name Type Description sid
string state name from *cfg.js ie. st1, st2, st10.... Example
<a href="javascript:void(0)" onmouseover="map.stateHighlightIn('st1','#366CA3','#ffffff')" onmouseout="map.stateHighlightOut('st1')">region 1</a>
-
stateLabelModifyColor(sid, fillColor, borderColor)
-
Change label text of the state
Name Type Description sid
string state id from *cfg.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 Example
map.stateLabelModifyColor('s1s1', 'red', 'black');
-
stateLabelModifyText(sid, text)
-
Change label text of the state
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... text
string text to go as label for that state Example
map.stateLabelModifyText('s1s1', 'My region!');
-
stateModify(sid, fillColor, borderColor)
-
Change color properties of the state
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... fillColor
string color to fill the state ie. #11AABB borderColor
string color to fill stroke ie. #000000 Example
map.stateModify('s1s1', '#bbb', 'white');
-
unselectAllStates(noEvent)
-
Unselect all states on current map.
Name Type Description noEvent
bool don't fire event (otherwise will be fired for every selected state). Example
<a href="javascript:map.unselectAllStates(false)">Unselect all regions on current map</a>
-
unselectState(sid, noEvent)
-
Return the state to normal default color
Name Type Description sid
string state id from *cfg.js ie. s1s1, s2s12, s1s10.... noEvent
bool don't fire event. Example
<a href="javascript:map.unselectState('s1s2')">Unselect region 1</a>
-
updateZoom(zoom)
-
Set zoom level to specified level. Will be automaticly corrected to min or max value
Name Type Description zoom
number zoom level. Ie: 2. Example
map.updateZoom(2);
-
zoomIn()
-
One step zoom-in
Example
map.zoomIn();
-
zoomOut()
-
One step zoom-out
Example
map.zoomOut();