{"_id":"@maplibre/maplibre-gl-compare","_rev":"9-39f7646699118c2c6858062c274f9b3f","name":"@maplibre/maplibre-gl-compare","dist-tags":{"latest":"0.5.0"},"versions":{"0.5.0":{"name":"@maplibre/maplibre-gl-compare","version":"0.5.0","keywords":["maplibre","maplibregl","maps","gl","ui"],"license":"ISC","_id":"@maplibre/maplibre-gl-compare@0.5.0","maintainers":[{"name":"maplibreorg","email":"YuriAstrakhan+maplibre@gmail.com"},{"name":"nyurik","email":"yuriastrakhan@gmail.com"},{"name":"klokan","email":"petr.pridal@maptiler.com"}],"homepage":"https://github.com/maplibre/maplibre-gl-compare#readme","bugs":{"url":"https://github.com/maplibre/maplibre-gl-compare/issues"},"dist":{"shasum":"040cba6925f7bc1b301b10d47499c3b31ac30ade","tarball":"https://registry.npmjs.org/@maplibre/maplibre-gl-compare/-/maplibre-gl-compare-0.5.0.tgz","fileCount":14,"integrity":"sha512-tJ5MtbMXhVstu85NSArkvZFewV0i19qBOP4TyO6JSNFY0qV3zwGLXxmxalg1QGdi18cmKnmZT86BoLCSS0rEPg==","signatures":[{"sig":"MEQCIGljUBZC3q7LpMXXSblVBVXns5dqn/Qz8AUnmxH+VY3uAiB9n1YY0oeLoec5Ht2WhCIRje0Do/CFhTealEMubDjAvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFDAdCRA9TVsSAnZWagAAgqsQAJSMsG3tK3l4kVbe1Anl\nDz6T7XmRxWXanbfLr0YcRyPSO+wPQcmNSAVpO3/acv9I3TLnefbuDxmt8XxJ\n7BG/bSNcI7Ubip4B06s5jHIauQNXlf4AYBp58cAmjPkdp7NxZ7J6w4eUU5DN\nEUrMfxkPN6GX4xPeh6ALk5EfCgAAkzA+QLI47zP56a7A3GO2USHUzLZwfFm+\nJtMrg7bFoWQu9iZOtnh7GKvbNH+toQDf2To/rk63gOFNoTMBtBNVwwrxTpkY\nH195ogyuvFlechvj5aBlKegC3uEmDEQhYOdtdm4O+Ih18fQ4ZjN3LEg3dmbL\nOy6IoFhbeMUDST2SbimJllxLMrSi1KzfhMq3/AueaYKgrP6CZCJE0jHZzXfz\n06tIqzrt/meB7v/YRz2YuD+3FA4fPvqPid/L+ZdafOSql0+UfK25rPbmG7rK\ngyPZ5gsZaOBzXu61mZrTIYubaWgwNmPyAYK76FM5J29I8lBKTogbEqrxNYAj\n8I5/2S0ggeX3UboujRHdPoWkoGEwzKi/KYTybd3RQAUUKkP75F0fK8oY/uJM\noJckrPPHmmoyQG+8k2Exc9drcqzy/LDoQrl9819wH5JU5eKSrlzaX+rFUDRP\n6vDU/mJuGvaSv0XNRSS/nAtckqPY91xGFtBP84pBiuCAJEBidDmMdGUTcc/S\nKRCl\r\n=cm7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"b63ab2dabf808b3594596b9fd8e6714840058dc3","scripts":{"docs":"documentation build index.js --format=md > API.md","lint":"eslint --no-eslintrc -c .eslintrc index.js example/index.js test/index.js","test":"npm run lint && browserify -t envify test/index.js | smokestack -b firefox | tap-status","build":"cp style.css dist/maplibre-gl-compare.css && NODE_ENV=production && browserify index.js | uglifyjs -c -m > dist/maplibre-gl-compare.js","start":"cp style.css example/style.css && budo example/index.js --serve example/bundle.js --dir example --live"},"_npmUser":{"name":"maplibreorg","email":"YuriAstrakhan+maplibre@gmail.com"},"repository":{"url":"git+https://github.com/maplibre/maplibre-gl-compare.git","type":"git"},"_npmVersion":"6.14.12","description":"Swipe and sync between two MapLibre maps","directories":{"example":"example"},"_nodeVersion":"10.24.1","dependencies":{"@mapbox/mapbox-gl-sync-move":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"budo":"^11.6.4","tape":"^5.2.2","envify":"^4.1.0","eslint":"^7.28.0","uglify-js":"^3.13.9","browserify":"^17.0.0","smokestack":"^3.6.0","tap-status":"^1.0.1","maplibre-gl":"^1.14.0","documentation":"^13.2.5"},"peerDependencies":{"maplibre-gl":">=1.14.0"},"_npmOperationalInternal":{"tmp":"tmp/maplibre-gl-compare_0.5.0_1628712989186_0.9118200598801596","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-08-11T20:16:29.129Z","modified":"2026-03-13T00:49:35.688Z","0.5.0":"2021-08-11T20:16:29.363Z"},"bugs":{"url":"https://github.com/maplibre/maplibre-gl-compare/issues"},"license":"ISC","homepage":"https://github.com/maplibre/maplibre-gl-compare#readme","keywords":["maplibre","maplibregl","maps","gl","ui"],"repository":{"url":"git+https://github.com/maplibre/maplibre-gl-compare.git","type":"git"},"description":"Swipe and sync between two MapLibre maps","maintainers":[{"email":"board@maplibre.org","name":"maplibreorg"},{"email":"ryan@scully.biz","name":"wayofthefuture"},{"email":"harel.mazor@gmail.com","name":"harelmazor"},{"email":"birk.skyum@pm.me","name":"birkskyum"},{"email":"mwilsnd@gmail.com","name":"mwilsnd"}],"readme":"## MapLibre GL Compare\n\nSwipe and sync between two MapLibre maps. This plugin was originally developed for Mapbox (https://github.com/mapbox/mapbox-gl-compare) and was migrated to MapLibre after Mapbox changed its license.\n\n## Code example\n\n### Examples\n\n#### Full Example without the need of a token\n\n```js\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Swipe between maps</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"../.env\"></script>\n    <script src=\"https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js\"></script>\n    <link\n      href=\"https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css\"\n      rel=\"stylesheet\"\n    />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n      }\n    </style>\n  </head>\n\n  <body>\n    <style>\n      body {\n        overflow: hidden;\n      }\n\n      body * {\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      }\n\n      .map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n      }\n    </style>\n    <script src=\"maplibre-gl-compare.js\"></script>\n    <link rel=\"stylesheet\" href=\"maplibre-gl-compare.css\" type=\"text/css\" />\n    <div id=\"comparison-container\">\n      <div id=\"before\" class=\"map\"></div>\n      <div id=\"after\" class=\"map\"></div>\n    </div>\n    <script>\n      var beforeMap = new maplibregl.Map({\n        container: \"before\",\n        style: \"https://demotiles.maplibre.org/style.json\",\n        center: [7.221275, 50.326111],\n        zoom: 5,\n      });\n\n      var afterMap = new maplibregl.Map({\n        container: \"after\",\n        style:\n          \"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json\",\n        center: [7.221275, 50.326111],\n        zoom: 5,\n      });\n\n      // A selector or reference to HTML element\n      var container = \"#comparison-container\";\n\n      var map = new maplibregl.Compare(beforeMap, afterMap, container, {\n        // Set this to enable comparing two maps by mouse movement:\n        // m ousemove: true\n      });\n    </script>\n  </body>\n</html>\n```\n\n#### Full Example with the need of a token\n\n```js\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Swipe between maps</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"../.env\"></script>\n    <script src=\"https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js\"></script>\n    <link\n      href=\"https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css\"\n      rel=\"stylesheet\"\n    />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n      }\n    </style>\n  </head>\n\n  <body>\n    <style>\n      body {\n        overflow: hidden;\n      }\n\n      body * {\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      }\n\n      .map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n      }\n    </style>\n    <script src=\"maplibre-gl-compare.js\"></script>\n    <link rel=\"stylesheet\" href=\"maplibre-gl-compare.css\" type=\"text/css\" />\n    <div id=\"comparison-container\">\n      <div id=\"before\" class=\"map\"></div>\n      <div id=\"after\" class=\"map\"></div>\n    </div>\n    <script>\n      var beforeMap = new maplibregl.Map({\n        container: \"before\",\n        style:\n          \"https://api.maptiler.com/maps/hybrid/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL\",\n        center: [7.221275, 50.326111],\n        zoom: 15,\n      });\n\n      var afterMap = new maplibregl.Map({\n        container: \"after\",\n        style:\n          \"https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL\",\n        center: [7.221275, 50.326111],\n        zoom: 15,\n      });\n\n      // A selector or reference to HTML element\n      var container = \"#comparison-container\";\n\n      var map = new maplibregl.Compare(beforeMap, afterMap, container, {\n        // Set this to enable comparing two maps by mouse movement:\n        // m ousemove: true\n      });\n    </script>\n  </body>\n</html>\n```\n\n### Usage\n\n```js\nvar beforeMap = new maplibregl.Map({\ncontainer: \"before\",\nstyle: \"https://demotiles.maplibre.org/style.json\",\ncenter: [7.221275, 50.326111],\nzoom: 5,\n});\n\nvar afterMap = new maplibregl.Map({\ncontainer: \"after\",\nstyle:\n    \"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json\",\ncenter: [7.221275, 50.326111],\nzoom: 5,\n});\n\n// A selector or reference to HTML element\nvar container = '#comparison-container';\n\nvar map = new maplibregl.Compare(beforeMap, afterMap, container, {\n  mousemove: true, // Optional. Set to true to enable swiping during cursor movement.\n  orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical\n});\n```\n\n### Methods\n\n```js\ncompare = new mapboxgl.Compare(beforeMap, afterMap, container, {\n  mousemove: true, // Optional. Set to true to enable swiping during cursor movement.\n  orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical\n});\n\n// Get Current position - this will return the slider's current position, in pixels\ncompare.currentPosition;\n\n// 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\ncompare.setSlider(x);\n\n//Listen to slider movement - and return current position on each slideend\ncompare.on('slideend', (e) => {\n  console.log(e.currentPosition);\n});\n\n//Remove - this will remove the compare control from the DOM and stop synchronizing the two maps.\ncompare.remove();\n```\n\n## Live examples\n\n[Compare hybrid with streets](https://rawcdn.githack.com/astridx/astridx.github.io/a9d7297a4fe1e3a4d7ebeb1e4e662fd1339ef3b5/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps.html)\n\n[Compare swisstopo with demotiles](https://rawcdn.githack.com/astridx/astridx.github.io/a9d7297a4fe1e3a4d7ebeb1e4e662fd1339ef3b5/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps_.html)\n\n## Installation\n\n### Native\n\nAdd tags referencing `maplibre-gl-compare` after adding `maplibre-gl` to your website:\n\n```html\n<!-- MapLibre GL -->\n<link href=\"https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css\" rel='stylesheet' />\n<link href=\"maplibre-gl-compare.css\" rel='stylesheet' />\n\n<script src=\"https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js\"></script>\n<script src=\"maplibre-gl-compare.js\"></script>\n```\n\n### Node \n\n\n\n## Motivation\n\nThis project makes it possible to easily compare two maps.\n\n## API Reference\n\n[API Reference](API.md)\n\n## Bug Reports & Feature Requests\n\nPlease use the [issue tracker](https://github.com/maplibre/maplibre-gl-compare/issues) to report any bugs or file feature requests.\n\n## Licence\nISC © [MapLibre](https://github.com/maplibre) © [Mapbox](https://github.com/mapbox)\n","readmeFilename":"README.md"}