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,
      }
    }
  },
});

Authors

Eugene Artsiukhevich

Acknowledgments

Maybe, it will be useful for somebody.