Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including mapbox-gl-compare with all npm packages installed. Try it out:

require("mapbox-gl/package.json"); // mapbox-gl is a peer dependency. var mapboxGlCompare = require("mapbox-gl-compare")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mapbox-gl-compare v0.2.1

Swipe and sync between two maps

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

new mapboxgl.Compare(before, after, {
  mousemove: true // Optional. Set to true to enable swiping during cursor movement.
});

Methods

compare = new mapboxgl.Compare(before, after, {
  mousemove: true // Optional. Set to true to enable swiping during cursor movement.
});

//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 of viewport
compare.setSlider(x);

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

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

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 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free