Mapoid is a jQuery plugin to create responsive html map area highlighter with area selection. Minified version 8.5 kB
Mapoid plugin requires the latest version of jQuery. Also you can include waypoints plugin to execute the counting after you scroll to the countid element
Usage basic jsFiddle example for basic example
Usage - adding some styles to highlighted areas. jsFiddle example for styles example
Usage - callback functions. jsFiddle example for callback example
public API feature - Usage - select all feature. jsFiddle example for select all example
public API feature - Usage - deselect all feature. jsFiddle example for deselect all example
A complete listing of the plugin options.
Option | Data Attribute | Default | Description |
---|---|---|---|
strokeColor | data-stroke-color | black | strokeColor |
strokeWidth | data-stroke-width | 1 | strokeWidth |
fillColor | data-fill-color | black | fillColor |
fillOpacity | data-fill-opacity | 0.5 | fillOpacity |
fadeTime | data-fade-time | 500 | fadeTime |
selectedArea | data-select-on-click | false | selectedArea |
selectOnClick | data-select-on-click | true | selectOnClick |
click | data-select-on-click | callback function called on click | |
dblclick | data-select-on-click | callback function called on dblclick | |
mousedown | data-select-on-click | callback function called on mousedown | |
mouseup | data-select-on-click | callback function called on mouseup | |
mouseover | data-select-on-click | callback function called on mouseover | |
mouseout | data-select-on-click | callback function called on mouseout | |
mousemove | data-select-on-click | callback function called on mousemove | |
mouseleave | data-select-on-click | callback function called on mouseleave | |
hoverIn | data-select-on-click | callback function called on hoverIn | |
hoverOut | data-select-on-click | callback function called on hoverOut | |
selectAll | - | public API feature to select all areas | |
hoverOut | - | public API feature to deselect all areas |