Mapoid
Mapoid is a jQuery plugin to create responsive html map area highlighter with area selection. Minified version 8.5 kB
Requirements
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
Usage basic jsFiddle example for basic example
Styles
Usage - adding some styles to highlighted areas. jsFiddle example for styles example
Callback
Usage - callback functions. jsFiddle example for callback example
Select ALL
public API feature - Usage - select all feature. jsFiddle example for select all example
Deselect ALL
public API feature - Usage - deselect all feature. jsFiddle example for deselect all example
Options
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 |
