Canvas-route-map NPM

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 = new canvasRouteMap.CanvasRouteMap({
 container: container,
  url: 'map.png',
  map: {
    startPoint: {
      coordinates: {x: 41, y: 442},
    },
    endPoint: {
      coordinates: {x: 833, y: 196},
    },
   
  },
});

Example with full options:

const map = new canvasRouteMap.CanvasRouteMap({
 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,
      }
    }
  },
});