mapbox-gl-compare

0.4.1 • Public • Published

mapbox-gl-compare

Swipe and sync between two maps

Swipe example

Map movements are synced with mapbox-gl-sync-move.

Usage

var before = new mapboxgl.Map({
  container: 'before', // Container ID
  style: 'mapbox://styles/mapbox/light-v9'
});

var after = new mapboxgl.Map({
  container: 'after', // Container ID
  style: 'mapbox://styles/mapbox/dark-v9'
});

// A selector or reference to HTML element
var container = '#comparison-container';

new mapboxgl.Compare(before, after, container, {
  mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
  orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
});

Methods

compare = new mapboxgl.Compare(before, after, container, {
  mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
  orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
});

//Get Current position - this will return the slider's current position, in pixels
compare.currentPosition;

//Set Position - this will set the slider at the specified (x) number of pixels from the left-edge or top-edge of viewport based on swiper orientation
compare.setSlider(x);

//Listen to slider movement - and return current position on each slideend
compare.on('slideend', (e) => {
  console.log(e.currentPosition);
});

//Remove - this will remove the compare control from the DOM and stop synchronizing the two maps.
compare.remove();

Demo: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

See API.md for complete reference.

Developing

npm install & npm start & open http://localhost:9966

You'll need a Mapbox access token stored in localstorage. Set it via

localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');

Testing

Tests require an MapboxAccessToken env variable to be set.

export MapboxAccessToken="YOUR ACCESS TOKEN"

Lastly, run the test command from the console:

npm test

Deploying

npm registry

  • npm run build
  • Update the version key in package.json
  • Update CHANGELOG.md
  • Commit and push
  • git tag -a vX.X.X -m 'vX.X.X'
  • git push --tags
  • npm publish
  • Update version number in GL JS example

mapbox cdn

  • aws s3 cp --acl public-read ./dist/mapbox-gl-compare.js s3://mapbox-gl-js/plugins/mapbox-gl-compare/v$(node --print --eval "require('./package.json').version")/mapbox-gl-compare.js
  • aws s3 cp --acl public-read ./dist/mapbox-gl-compare.css s3://mapbox-gl-js/plugins/mapbox-gl-compare/v$(node --print --eval "require('./package.json').version")/mapbox-gl-compare.css

Dependencies (1)

Dev Dependencies (10)

Package Sidebar

Install

npm i mapbox-gl-compare

Weekly Downloads

1,167

Version

0.4.1

License

ISC

Unpacked Size

44.7 kB

Total Files

15

Last publish

Collaborators

  • mbx-npm-ci-production
  • mbx-npm-ci-staging
  • mbx-npm-advanced-actions-production
  • mbx-npm-advanced-actions-staging
  • mbx-npm-09-production
  • mbx-npm-08-production
  • mbx-npm-07-production
  • mbx-npm-06-production
  • mbx-npm-05-production
  • mbx-npm-04-production
  • mbx-npm-03-production
  • mbx-npm-02-production
  • mbx-npm-01-production
  • mbx-npm-02-staging
  • mapbox-npm-01
  • mapbox-npm-02
  • mapbox-npm-07
  • mapbox-npm-03
  • mapbox-npm-04
  • mapbox-npm-09
  • mapbox-npm-05
  • mapbox-npm-06
  • mapbox-npm-08
  • mapbox-npm-advanced-actions
  • mapbox-npm-ci
  • mapbox-npm
  • mapbox-admin
  • mapbox-machine-user