0.2.0 • Published 3 years ago
marker-map v0.2.0
Marker Map
Marker Map is simple dynamic place marker by position to image and support responsive.
Features!
- Custom marker image and background.
- Set active or inactive of marker (will be opacity reduce).
- You can build game or event like treasure hunt.
- And it's responsive.
Usage
NPM:
npm install marker-mapimport MarkerMap from marker-mapCDN:
<script src="https://unpkg.com/marker-map"></script>Quick start
Put html for render.
<div id="show"></div>Prepare data and config.
const data = [
{
id: "myMarker1",
width: 12,
top: 34,
left: 54,
img: "./assets/place.svg" ,
meta: {
you: "customs data"
}
},
{
width: 12,
top: 53,
left: 38,
img: "./assets/home.svg"
},
]
const markerMap = new MarkerMap()
markerMap.render("#show", {
background: "./assets/treasure-map.jpg",
markers: data
})Methods
| Method | Description |
|---|---|
| .render(\ query selector, \ render options) | render with render options |
| .add(\ marker options) | add marker marker options |
| .remove(\ marker id) | remove marker |
| .removeAll() | remove marker |
| .active(\ marker id) | set marker active |
| .inactive(\ marker id) | set marker inactive |
| .activeAll() | set active all marker |
| .inactiveAll() | set inactive all marker |
| .getAll(\ filter, \ output type) | get list markers by filter all (default), active, inactive will return by output type json marker object (default), dom |
| .on(\ type event, \ callback function) | create event on markers (ex. click, hover), will return callback event object |
| .destroy() | destroy render |
Options
Render:
| Name | Type | Default | Description |
|---|---|---|---|
| background | string | required | background image path. |
| markers | array | [] | marker options array to include on render. |
| inactiveOpacity | number | 0.6 | opacity markers when inactive (0 - 1). |
Marker:
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | auto | will auto generate when empty. |
| width | number | required | set with import image by percent. |
| top | number | required | set potion from top by percent (0 - 100). |
| left | number | required | set position from left by percent (0 - 100). |
| img | string | required | marker image path. |
| meta | object | {} | add custom your meta data to marker. |
License
MIT