Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
mapbox-gl-compare
Advanced tools
Readme
Swipe and sync between two maps
Map movements are synced with mapbox-gl-sync-move.
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
});
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.
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>');
Tests require an MapboxAccessToken env variable to be set.
export MapboxAccessToken="YOUR ACCESS TOKEN"
Lastly, run the test command from the console:
npm test
npm run build
git tag -a vX.X.X -m 'vX.X.X'
git push --tags
npm publish
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
FAQs
Swipe and sync between two maps
The npm package mapbox-gl-compare receives a total of 1,202 weekly downloads. As such, mapbox-gl-compare popularity was classified as popular.
We found that mapbox-gl-compare demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 30 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.