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
Angular
Installation
npm install travel-marker
For browser
script src="https://unpkg.com/travel-marker/dist/travel-marker.umd.js" async ;
Usage
Creating a marker
// options ; ;
Creating an overlay marker
// options ; ;
Add locations
; marker.addLocationslocationArray;
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.setSpeed50;
Set Interval
marker.setInterval20;
Set Animation multiplier to fast-forward/slow replay
marker.setSpeedMultiplier2; // for 2x fast-forwardmarker.setSpeedMultiplier05; // for slow replay
Add Listener to marker like click,mouseover etc.
marker.addListener'click', ;
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;
Set Map on marker
marker.setMapnull; // hide marker from map
Set MarkerOptions
marker.setMarkerOptions;
Set Overlay Options
marker.setOverlayOptions;
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