macapon/travel-marker

A google maps library to replay gps locations.

Travel Marker

A google maps library to replay gps locations with animations.

Features

• An out-of-box solution with minimum configuration.
• Compute intermediate gps points for smooth animation
• Animation Controls
  • Play/Pause
  • Next/Previous
  • Fast-Forward/Rewind
  • Reset
• Listen marker events like touch,mouseover etc.
• Listen Animation events like paused,finished etc.

Demo

Browser

Codepen

Angular

Stackblitz

Installation

  npm install travel-marker

For browser

  <script src="https://unpkg.com/travel-marker/dist/travel-marker.umd.js" async>

  var TravelMarker = travelMarker.TravelMarker;

Usage

Creating a marker

  // options
  var options = {
    map: map,  // map object
    speed: 50,  // default 10 , animation speed
    interval: 30, // default 10, marker refresh time
    speedMultiplier: 1, // default 1, for fast-forward/rewind
    cameraOnMarker: false,  // default false, move camera with marker
    markerType: 'default',  // default: 'default'
    markerOptions: { title: "Travel Marker" }
  };
  var marker = new TravelMarker(options);

Creating an overlay marker

  // options
  var options = {
    map: map,  // map object
    speed: 50,  // default 10 , animation speed
    interval: 30, // default 10, marker refresh time
    speedMultiplier: 1, // default 1, for fast-forward/rewind
    cameraOnMarker: false,  // default false, move camera with marker
    markerType: 'overlay',  // default: 'default'
    overlayOptions: {
      offsetX: 0, // default: 0, x-offset for overlay
      offsetY: 0, // default: 0, y-offset for overlay
      offsetAngle: 0, // default: 0, rotation-offset for overlay
      imageUrl: 'https://i.stack.imgur.com/lDrin.png', // image used for overlay
      imageWidth: 36, // image width of overlay
      imageHeight: 58, // image height of overlay
    }
  };
  var marker = new TravelMarker(options);

Add locations

  var locationArray = [new google.maps.LatLng(74,23), new google.maps.LatLng(74.02,23.02), new google.maps.LatLng(74.04, 23.04)];
  marker.addLocations(locationArray);

Play Animation

marker.play();

Pause animation.

marker.pause();

Reset animation

marker.reset();

Jump to next location

marker.next();

Jump to previous location

marker.prev();

Set Speed

marker.setSpeed(50);

Set Interval

marker.setInterval(20);

Set Animation multiplier to fast-forward/slow replay

marker.setSpeedMultiplier(2); // for 2x fast-forward
marker.setSpeedMultiplier(0.5); // for slow replay

Add Listener to marker like click,mouseover etc.

marker.addListener('click', function() {
  //  ...do something like show infobox
});

Listen Events

/*  EventType = 'play' | 'paused' | 'finished' | 'reset' | 'checkpoint' | 'previous' | 'next'; 
    // checkpoint - when marker arrives on a location present in locationArray
    TravelData = {
      location: LatLng; // marker current location
      playing: boolean; // is animation playing?
      index: number;  // index in locationArray
      status: 'reset' | 'playing' | 'paused' | 'finished';  // animation status
    }
*/
marker.event.onEvent((event: EventType, data: TravelData) => {
  // .... do something
});

Set Map on marker

marker.setMap(null);  // hide marker from map

Set MarkerOptions

marker.setMarkerOptions({ opacity: 0.8 });

Set Overlay Options

marker.setOverlayOptions({ offsetAngle: 90 });

Todo

• Add listeners to marker like click,hover etc.
• Add Examples
• Implement setMarkerOptions() and setOverlayOptions()
• Add jsdoc
• Custom events for play, pause, finished, checkpoint
• Add custom overlay markers with rotation
• Add images
• Write test cases