Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mapbox-gl-controls
Advanced tools
mapbox-gl-controls - npm Package Compare versions
Comparing version 1.5.7 to 1.5.8
@@ -23,24 +23,4 @@ function _classCallCheck(instance, Constructor) { | ||
| function iconCCW(attrs) { | ||
| var node = (new DOMParser().parseFromString("<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#9E9E9E\" width=\"11\" height=\"28\" viewBox=\"0 0 11 28\">\n <path d=\"M7.2 20.5C6.4 18.6 6 16.4 6 14.2c.2-4.1 2-7.8 4.9-10.4L7.5 0C3.7 3.5 1.2 8.4 1 13.9c-.1 3.3.6 6.4 1.9 9.1L.2 24.6l.5.9L8.2 28l.8-.4 1.2-7.8-.5-.9-2.5 1.6z\"/>\n</svg>", 'text/xml')).firstChild; | ||
| if (attrs) { | ||
| Object.keys(attrs).forEach(function(key) { | ||
| node.setAttribute(key, attrs[key]); | ||
| }); | ||
| } | ||
| return node; | ||
| } | ||
| function iconCW(attrs) { | ||
| var node = (new DOMParser().parseFromString("<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#9E9E9E\" width=\"11\" height=\"28\" viewBox=\"0 0 11 28\">\n <path d=\"M8.2 23.1c1.3-2.8 2-5.9 1.9-9.1C9.9 8.4 7.4 3.5 3.6 0L.1 3.7C3 6.3 4.8 10 5 14.1c.1 2.2-.3 4.4-1.2 6.3l-2.6-1.5-.5.9L2 27.6l.9.5 7.5-2.5.5-.9-2.7-1.6z\"/>\n</svg>", 'text/xml')).firstChild; | ||
| if (attrs) { | ||
| Object.keys(attrs).forEach(function(key) { | ||
| node.setAttribute(key, attrs[key]); | ||
| }); | ||
| } | ||
| return node; | ||
| } | ||
| function iconPointer(attrs) { | ||
| var node = (new DOMParser().parseFromString("<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M0 0h24v24H0z\"/>\n <path fill=\"#505050\" d=\"M12 3l4 8H8z\"/>\n <path fill=\"#9E9E9E\" d=\"M12 21l-4-8h8z\"/>\n </g>\n</svg>", 'text/xml')).firstChild; | ||
| var node = (new DOMParser().parseFromString("<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M0 0h24v24H0z\"/>\n <path fill=\"#f44336\" d=\"M12 3l4 8H8z\"/>\n <path fill=\"#9E9E9E\" d=\"M12 21l-4-8h8z\"/>\n </g>\n</svg>", 'text/xml')).firstChild; | ||
| if (attrs) { | ||
@@ -68,3 +48,3 @@ Object.keys(attrs).forEach(function(key) { | ||
| this.instant = typeof options.instant === 'boolean' ? options.instant : true; | ||
| this.toggle = this.toggle.bind(this); | ||
| this.onRotate = this.onRotate.bind(this); | ||
| } | ||
@@ -76,15 +56,7 @@ | ||
| this.container = document.createElement('div'); | ||
| this.compassButton = document.createElement('button'); | ||
| this.button = document.createElement('button'); | ||
| this.container.classList.add('mapboxgl-ctrl'); | ||
| this.container.classList.add('mapboxgl-ctrl-group'); | ||
| this.container.classList.add('mapboxgl-ctrl-compass'); | ||
| this.pointer = iconPointer({ | ||
| "class": 'mapboxgl-ctrl-compass-pointer' | ||
| }); | ||
| this.arrowCW = iconCW({ | ||
| "class": 'mapboxgl-ctrl-compass-cw' | ||
| }); | ||
| this.arrowCCW = iconCCW({ | ||
| "class": 'mapboxgl-ctrl-compass-ccw' | ||
| }); | ||
| this.pointer = iconPointer(); | ||
@@ -95,6 +67,4 @@ if (this.instant) { | ||
| this.container.appendChild(this.compassButton); | ||
| this.compassButton.appendChild(this.pointer); | ||
| this.compassButton.appendChild(this.arrowCW); | ||
| this.compassButton.appendChild(this.arrowCCW); | ||
| this.container.appendChild(this.button); | ||
| this.button.appendChild(this.pointer); | ||
| } | ||
@@ -108,28 +78,10 @@ }, { | ||
| this.insertControls(); | ||
| this.compassButton.addEventListener('click', function () { | ||
| this.button.addEventListener('click', function () { | ||
| _this.map.easeTo({ | ||
| pitch: 0, | ||
| bearing: 0 | ||
| bearing: 0, | ||
| pitch: 0 | ||
| }); | ||
| }); | ||
| this.arrowCW.addEventListener('click', function (e) { | ||
| e.stopPropagation(); | ||
| if (!_this.map.isRotating()) { | ||
| _this.map.easeTo({ | ||
| bearing: _this.map.getBearing() - 45 | ||
| }); | ||
| } | ||
| }); | ||
| this.arrowCCW.addEventListener('click', function (e) { | ||
| e.stopPropagation(); | ||
| if (!_this.map.isRotating()) { | ||
| _this.map.easeTo({ | ||
| bearing: _this.map.getBearing() + 45 | ||
| }); | ||
| } | ||
| }); | ||
| this.map.on('rotate', this.toggle); | ||
| this.toggle(); | ||
| this.map.on('rotate', this.onRotate); | ||
| this.onRotate(); | ||
| return this.container; | ||
@@ -144,4 +96,4 @@ } | ||
| }, { | ||
| key: "toggle", | ||
| value: function toggle() { | ||
| key: "onRotate", | ||
| value: function onRotate() { | ||
| var angle = this.map.getBearing() * -1; | ||
@@ -148,0 +100,0 @@ |
@@ -8,1 +8,2 @@ export { default as CompassControl } from './compass'; | ||
| export { default as ZoomControl } from './zoom'; | ||
| export { default as PitchControl } from './pitch'; |
@@ -66,4 +66,4 @@ function _classCallCheck(instance, Constructor) { | ||
| this.mapContainer.appendChild(this.node); | ||
| this.cursorStyle = this.map.getCanvas().style.cursor; | ||
| this.map.getCanvas().style.cursor = 'pointer'; | ||
| this.cursorStyle = this.canvas.style.cursor; | ||
| this.canvas.style.cursor = 'pointer'; | ||
| this.map.on(mapMoveEvent, this.updatePosition); | ||
@@ -76,3 +76,3 @@ } | ||
| this.mapContainer.removeChild(this.node); | ||
| this.map.getCanvas().style.cursor = this.cursorStyle; | ||
| this.canvas.style.cursor = this.cursorStyle; | ||
| this.map.off(mapMoveEvent, this.updatePosition); | ||
@@ -79,0 +79,0 @@ } |
@@ -24,3 +24,3 @@ function _classCallCheck(instance, Constructor) { | ||
| function iconPlus(attrs) { | ||
| var node = (new DOMParser().parseFromString("<svg fill=\"#232323\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>", 'text/xml')).firstChild; | ||
| var node = (new DOMParser().parseFromString("<svg fill=\"#505050\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>", 'text/xml')).firstChild; | ||
| if (attrs) { | ||
@@ -35,3 +35,3 @@ Object.keys(attrs).forEach(function(key) { | ||
| function iconMinus(attrs) { | ||
| var node = (new DOMParser().parseFromString("<svg fill=\"#232323\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 13H5v-2h14v2z\"/>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>", 'text/xml')).firstChild; | ||
| var node = (new DOMParser().parseFromString("<svg fill=\"#505050\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 13H5v-2h14v2z\"/>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>", 'text/xml')).firstChild; | ||
| if (attrs) { | ||
@@ -38,0 +38,0 @@ Object.keys(attrs).forEach(function(key) { |
| { | ||
| "name": "mapbox-gl-controls", | ||
| "version": "1.5.7", | ||
| "version": "1.5.8", | ||
| "main": "./lib/index.js", | ||
@@ -5,0 +5,0 @@ "description": "Controls for mapbox-gl", |
@@ -1,3 +0,1 @@ | ||
| import iconCCW from './icon-ccw.svg'; | ||
| import iconCW from './icon-cw.svg'; | ||
| import iconPointer from './icon-pointer.svg'; | ||
@@ -13,3 +11,3 @@ | ||
| this.instant = typeof options.instant === 'boolean' ? options.instant : true; | ||
| this.toggle = this.toggle.bind(this); | ||
| this.onRotate = this.onRotate.bind(this); | ||
| } | ||
@@ -19,16 +17,12 @@ | ||
| this.container = document.createElement('div'); | ||
| this.compassButton = document.createElement('button'); | ||
| this.button = document.createElement('button'); | ||
| this.container.classList.add('mapboxgl-ctrl'); | ||
| this.container.classList.add('mapboxgl-ctrl-group'); | ||
| this.container.classList.add('mapboxgl-ctrl-compass'); | ||
| this.pointer = iconPointer({ class: 'mapboxgl-ctrl-compass-pointer' }); | ||
| this.arrowCW = iconCW({ class: 'mapboxgl-ctrl-compass-cw' }); | ||
| this.arrowCCW = iconCCW({ class: 'mapboxgl-ctrl-compass-ccw' }); | ||
| this.pointer = iconPointer(); | ||
| if (this.instant) { | ||
| this.container.classList.add('-active'); | ||
| } | ||
| this.container.appendChild(this.compassButton); | ||
| this.compassButton.appendChild(this.pointer); | ||
| this.compassButton.appendChild(this.arrowCW); | ||
| this.compassButton.appendChild(this.arrowCCW); | ||
| this.container.appendChild(this.button); | ||
| this.button.appendChild(this.pointer); | ||
| } | ||
@@ -39,26 +33,7 @@ | ||
| this.insertControls(); | ||
| this.compassButton.addEventListener('click', () => { | ||
| this.map.easeTo({ | ||
| pitch: 0, | ||
| bearing: 0, | ||
| }); | ||
| this.button.addEventListener('click', () => { | ||
| this.map.easeTo({ bearing: 0, pitch: 0 }); | ||
| }); | ||
| this.arrowCW.addEventListener('click', (e) => { | ||
| e.stopPropagation(); | ||
| if (!this.map.isRotating()) { | ||
| this.map.easeTo({ | ||
| bearing: this.map.getBearing() - 45, | ||
| }); | ||
| } | ||
| }); | ||
| this.arrowCCW.addEventListener('click', (e) => { | ||
| e.stopPropagation(); | ||
| if (!this.map.isRotating()) { | ||
| this.map.easeTo({ | ||
| bearing: this.map.getBearing() + 45, | ||
| }); | ||
| } | ||
| }); | ||
| this.map.on('rotate', this.toggle); | ||
| this.toggle(); | ||
| this.map.on('rotate', this.onRotate); | ||
| this.onRotate(); | ||
| return this.container; | ||
@@ -72,3 +47,3 @@ } | ||
| toggle() { | ||
| onRotate() { | ||
| const angle = this.map.getBearing() * (-1); | ||
@@ -75,0 +50,0 @@ if (!this.instant) { |
@@ -37,4 +37,4 @@ const defaultGetContent = (event) => { | ||
| this.mapContainer.appendChild(this.node); | ||
| this.cursorStyle = this.map.getCanvas().style.cursor; | ||
| this.map.getCanvas().style.cursor = 'pointer'; | ||
| this.cursorStyle = this.canvas.style.cursor; | ||
| this.canvas.style.cursor = 'pointer'; | ||
| this.map.on(mapMoveEvent, this.updatePosition); | ||
@@ -46,3 +46,3 @@ } | ||
| this.mapContainer.removeChild(this.node); | ||
| this.map.getCanvas().style.cursor = this.cursorStyle; | ||
| this.canvas.style.cursor = this.cursorStyle; | ||
| this.map.off(mapMoveEvent, this.updatePosition); | ||
@@ -49,0 +49,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.96%
83617
- Number of package files
- increased by5.56%
38
- Lines of code
- increased by2.39%
2058
No dependency changes