imagemap

imagemap is a Javascript library for work with image as map. jQuery is required. It is possible to zoom on image and create clickable markers. See the demonstrations.

Current version

0.0.5.0

Demo

www.safeprk.com.br/imagemap/imageMap.html

Quick Start

1. Import JQuery <script type="text/javascript" src="jquery.min.js"></script>
2. Import ImageMap javascript file <script type="text/javascript" src="imageMap.js"></script>

Examples

1. Creating a map

var map = new imagemap.Map({
  container: 'map',
  image: 'path/to/image/map_image.png',
  size: [4660, 3050],
  zoom: 9,
  nivel: 19
});

Atribute	Explanation
container	Div to create map
image	Path to image
size	Image original size [ width, height ]
zoom	Zoom image start
nivel	Max zoom level

2. Creating a marker

var marker1 = map.addMarker({
  image: 'marker_red.png',
  position: [680, 720]
});

Atribute	Explanation
image	Makert path to image
position	Marker position on original image [ left, top ]
width	Marker width
height	Marker height
reference	Users value control
description	Users description
onclick	Marker onclick event

3. Update a marker

map.updateMarker({
  id: markerSelected.id, 
  image: "path/to/new_image.png", 
  width: 20,
  height: 20
});

Atribute	Explanation
image	Makert path to image
position	Marker position on original image [ left, top ]
width	Marker width
height	Marker height
onclick	Marker onclick event

3. Remove a marker

map.removeMarker(markerSelected.id);

Atribute	Explanation
id	Id marker

Authros

Fernando Moralles

• https://www.linkedin.com/in/fhmoralles

Copyright

License