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-map

import MarkerMap from marker-map

CDN:

<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(<string> query selector, <object> render options)	render with render options
.add(<object> marker options)	add marker marker options
.remove(<string> marker id)	remove marker
.removeAll()	remove marker
.active(<string> marker id)	set marker active
.inactive(<string> marker id)	set marker inactive
.activeAll()	set active all marker
.inactiveAll()	set inactive all marker
.getAll(<string> filter, <string> output type)	get list markers by filter all (default), active, inactive will return by output type json marker object (default), dom
.on(<string> type event, <function> 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