Route map on canvas
About
It's a library for creating route from point A to point B by image. The library uses A Search Algorithm(javascript-astar) to make a route.
Features
- Draw a route on map;
- Animate route by use image;
- There are available zoom and touch events;
- Add image to point;
This library is written in Vanilla JS.
Installing
NPM
npm install canvas-route-map
Options
- Required attributes:
- container : container - it's a DOM element to render canvas;
- url: 'image.png/jpeg/gif/bmp/tiff' - path to image.
- Canvas attributes:
- width(default: 1080) - canvas width;
- height(default: 608) - canvas height;
- initialWidth(Default: 1080) - image width;
- scale(default: true) - scalability of canvas;
- zoom(default: 2) - canvas zoom, zoom in and zoom out.
- Map attributes:
- trackColor(default: r: 255, b: 255, g: 255) - rgb color value for map, free route in map;
- diagonal(default: true) - route in direct line.
- Points(startPoint, endPoint):
- coordinates(required): {x,y} - coordinates where point is located on canvas.
- Image - image of point;
- url(required): 'image.png/jpeg/gif/bmp/tiff' - path to image of point;
- width(default: 20) - image width;
- height(default: 20) - image height;
- position(default: 'up') - image position('center','up').
- Route:
- animateSpeed(default: 50) - speed of animation;
- step(default: 20) - step between.
- Drawing(default):
- color(default: '#f00') - route color;
- printWeight(default: 5) - weight of print step.
- Image - image of point;
- url(required): 'image.png/jpeg/gif/bmp/tiff' - path to image of point;
- width(default: 20) - image width;
- height(default: 20) - image height.
Callbacks
- ready(callback) - when canvas is ready.
Usage
- Simple example:
const map = container: container url: 'map.png' map: startPoint: coordinates: x: 41 y: 442 endPoint: coordinates: x: 833 y: 196 ;
- Example with full options:
const map = container: container url: 'map.png' canvas: width: 1080 height: 608 initialWidth: 1080 scale: true zoom: 2 map: trackColor: r: 255 b: 255 g: 255 diagonal: true startPoint: coordinates: x: 41 y: 442 image: url: 'pointA.png' width: 50 height: 50 position: 'up' endPoint: coordinates: x: 833 y: 196 image: url: 'pointB.png' width: 50 height: 50 position: 'up' route: animateSpeed: 50 step: 20 drawing: color: '#f00' printWeight: 5 image: url: 'feet.png' width: 13 height: 8 ;
Authors
Eugene Artsiukhevich
Acknowledgments
Maybe, it will be useful for somebody.