mapbox-gl-controls - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

src/compass/icon-ccw.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="#9E9E9E" width="11" height="28" viewBox="0 0 11 28">
+    <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"/>
+</svg>

src/compass/icon-cw.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="#9E9E9E" width="11" height="28" viewBox="0 0 11 28">
+    <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"/>
+</svg>

src/compass/icon-pointer.svg

+<svg viewBox="0 0 24 24" width="22" height="22" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <path fill="#505050" d="M12 3l4 8H8z"/>
+        <path fill="#9E9E9E" d="M12 21l-4-8h8z"/>
+    </g>
+</svg>

src/ruler/icon-ruler.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 22 12" fill="#505050">
+    <path fill-rule="evenodd" fill="none" d="M-1-6h24v24H-1z"/>
+    <path d="M20 0H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 10H2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v8z"/>
+</svg>

src/zoom/icon-minus.svg

+<svg fill="#232323" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 13H5v-2h14v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

src/zoom/icon-plus.svg

+<svg fill="#232323" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

lib/compass.js

@@ -23,7 +23,31 @@ function _classCallCheck(instance, Constructor) {
 
-var iconCCW = "\n<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>\n";
+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;
+}
 
-var iconCW = "\n<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>\n";
+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;
+}
 
-var iconPointer = "\n<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>\n";
+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;
+  if (attrs) {
+    Object.keys(attrs).forEach(function(key) {
+      node.setAttribute(key, attrs[key]);
+    });
+  }
+  return node;
+}
 
@@ -44,5 +68,2 @@ /**
     this.instant = typeof options.instant === 'boolean' ? options.instant : true;
-    this.nodeCCW = new DOMParser().parseFromString(iconCCW, 'text/xml').firstChild;
-    this.nodeCW = new DOMParser().parseFromString(iconCW, 'text/xml').firstChild;
-    this.nodePointer = new DOMParser().parseFromString(iconPointer, 'text/xml').firstChild;
     this.toggle = this.toggle.bind(this);
@@ -56,11 +77,14 @@ }
       this.compassButton = document.createElement('button');
-      this.pointer = this.nodePointer;
-      this.pointer.classList.add('mapboxgl-ctrl-compass-pointer');
-      this.arrowCCW = this.nodeCCW;
-      this.arrowCCW.classList.add('mapboxgl-ctrl-compass-ccw');
-      this.arrowCW = this.nodeCW;
-      this.arrowCW.classList.add('mapboxgl-ctrl-compass-cw');
       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'
+      });
 
@@ -73,4 +97,4 @@ if (this.instant) {
       this.compassButton.appendChild(this.pointer);
+      this.compassButton.appendChild(this.arrowCW);
       this.compassButton.appendChild(this.arrowCCW);
-      this.compassButton.appendChild(this.arrowCW);
     }
@@ -77,0 +101,0 @@ }, {

lib/ruler.js

@@ -26,3 +26,11 @@ import mapboxgl from 'mapbox-gl';
 
-var iconRuler = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"12\" viewBox=\"0 0 22 12\" fill=\"#505050\">\n    <path fill-rule=\"evenodd\" fill=\"none\" d=\"M-1-6h24v24H-1z\"/>\n    <path fill-rule=\"nonzero\" d=\"M20 0H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 10H2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v8z\"/>\n</svg>\n";
+function iconRuler(attrs) {
+  var node = (new DOMParser().parseFromString("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"12\" viewBox=\"0 0 22 12\" fill=\"#505050\">\n    <path fill-rule=\"evenodd\" fill=\"none\" d=\"M-1-6h24v24H-1z\"/>\n    <path d=\"M20 0H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 10H2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v8z\"/>\n</svg>", 'text/xml')).firstChild;
+  if (attrs) {
+    Object.keys(attrs).forEach(function(key) {
+      node.setAttribute(key, attrs[key]);
+    });
+  }
+  return node;
+}
 
@@ -67,3 +75,3 @@ var LAYER_LINE = 'controls-layer-line';
       this.button = document.createElement('button');
-      this.button.innerHTML = iconRuler;
+      this.button.appendChild(iconRuler());
       this.container.appendChild(this.button);
@@ -70,0 +78,0 @@ }

lib/zoom.js

@@ -23,5 +23,21 @@ function _classCallCheck(instance, Constructor) {
 
-var iconPlus = "\n<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>\n";
+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;
+  if (attrs) {
+    Object.keys(attrs).forEach(function(key) {
+      node.setAttribute(key, attrs[key]);
+    });
+  }
+  return node;
+}
 
-var iconMinus = "\n<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>\n";
+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;
+  if (attrs) {
+    Object.keys(attrs).forEach(function(key) {
+      node.setAttribute(key, attrs[key]);
+    });
+  }
+  return node;
+}
 
@@ -43,5 +59,5 @@ var Zoom =
       this.zoomIn = document.createElement('button');
-      this.zoomIn.innerHTML = iconPlus;
+      this.zoomIn.appendChild(iconPlus());
       this.zoomOut = document.createElement('button');
-      this.zoomOut.innerHTML = iconMinus;
+      this.zoomOut.appendChild(iconMinus());
       this.container.appendChild(this.zoomIn);
@@ -48,0 +64,0 @@ this.container.appendChild(this.zoomOut);

package.json

 {
   "name": "mapbox-gl-controls",
-  "version": "1.3.2",
-  "license": "MIT",
-  "homepage": "https://bravecow.github.io/mapbox-gl-controls/",
+  "version": "1.3.3",
+  "description": "Controls for mapbox-gl",
   "scripts": {
@@ -14,6 +13,6 @@ "lint": "eslint src",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "documentation": "^12.1.1",
-    "eslint": "^6.1.0",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "documentation": "^12.1.2",
+    "eslint": "^6.4.0",
     "eslint-config-airbnb-base": "^14.0.0",
@@ -25,5 +24,6 @@ "eslint-plugin-import": "^2.18.2",
     "postcss-nested": "^4.1.2",
-    "rollup": "^1.19.4",
+    "rollup": "^1.21.4",
+    "rollup-inline-svg": "^1.0.3",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.2",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0"
@@ -35,5 +35,7 @@ },
   "peerDependencies": {
-    "mapbox-gl": "^0.54.0 <2.0.0"
+    "mapbox-gl": "^1.0.0 <2.0.0"
   },
-  "repository": "bravecow/mapbox-gl-controls"
+  "homepage": "https://bravecow.github.io/mapbox-gl-controls/",
+  "repository": "bravecow/mapbox-gl-controls",
+  "license": "MIT"
 }

src/compass/compass.js

@@ -1,4 +0,4 @@
-import iconCCW from './icon-ccw';
-import iconCW from './icon-cw';
-import iconPointer from './icon-pointer';
+import iconCCW from './icon-ccw.svg';
+import iconCW from './icon-cw.svg';
+import iconPointer from './icon-pointer.svg';
 
@@ -13,5 +13,2 @@ /**
     this.instant = typeof options.instant === 'boolean' ? options.instant : true;
-    this.nodeCCW = (new DOMParser().parseFromString(iconCCW, 'text/xml')).firstChild;
-    this.nodeCW = (new DOMParser().parseFromString(iconCW, 'text/xml')).firstChild;
-    this.nodePointer = (new DOMParser().parseFromString(iconPointer, 'text/xml')).firstChild;
     this.toggle = this.toggle.bind(this);
@@ -23,11 +20,8 @@ }
     this.compassButton = document.createElement('button');
-    this.pointer = this.nodePointer;
-    this.pointer.classList.add('mapboxgl-ctrl-compass-pointer');
-    this.arrowCCW = this.nodeCCW;
-    this.arrowCCW.classList.add('mapboxgl-ctrl-compass-ccw');
-    this.arrowCW = this.nodeCW;
-    this.arrowCW.classList.add('mapboxgl-ctrl-compass-cw');
     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' });
     if (this.instant) {
@@ -38,4 +32,4 @@ this.container.classList.add('-active');
     this.compassButton.appendChild(this.pointer);
+    this.compassButton.appendChild(this.arrowCW);
     this.compassButton.appendChild(this.arrowCCW);
-    this.compassButton.appendChild(this.arrowCW);
   }
@@ -42,0 +36,0 @@

src/ruler/ruler.js

 import mapboxgl from 'mapbox-gl';
 import distance from '@turf/distance';
-import iconRuler from './icon-ruler';
+import iconRuler from './icon-ruler.svg';
 
@@ -36,3 +36,3 @@ const LAYER_LINE = 'controls-layer-line';
     this.button = document.createElement('button');
-    this.button.innerHTML = iconRuler;
+    this.button.appendChild(iconRuler());
     this.container.appendChild(this.button);
@@ -39,0 +39,0 @@ }

src/zoom/zoom.js

@@ -1,3 +0,3 @@
-import iconPlus from './icon-plus';
-import iconMinus from './icon-minus';
+import iconPlus from './icon-plus.svg';
+import iconMinus from './icon-minus.svg';
 
@@ -11,5 +11,5 @@ class Zoom {
     this.zoomIn = document.createElement('button');
-    this.zoomIn.innerHTML = iconPlus;
+    this.zoomIn.appendChild(iconPlus());
     this.zoomOut = document.createElement('button');
-    this.zoomOut.innerHTML = iconMinus;
+    this.zoomOut.appendChild(iconMinus());
     this.container.appendChild(this.zoomIn);
@@ -16,0 +16,0 @@ this.container.appendChild(this.zoomOut);

LICENSE.md

-The MIT License (MIT)
-=====================
-
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation
-files (the “Software”), to deal in the Software without
-restriction, including without limitation the rights to use,
-copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following
-conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.

src/compass/icon-ccw.js

-export default `
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9E9E9E" width="11" height="28" viewBox="0 0 11 28">
-    <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"/>
-</svg>
-`;

src/compass/icon-cw.js

-export default `
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9E9E9E" width="11" height="28" viewBox="0 0 11 28">
-    <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"/>
-</svg>
-`;

src/compass/icon-pointer.js

-export default `
-<svg viewBox="0 0 24 24" width="22" height="22" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#505050" d="M12 3l4 8H8z"/>
-        <path fill="#9E9E9E" d="M12 21l-4-8h8z"/>
-    </g>
-</svg>
-`;

src/ruler/icon-ruler.js

-export default `
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 22 12" fill="#505050">
-    <path fill-rule="evenodd" fill="none" d="M-1-6h24v24H-1z"/>
-    <path fill-rule="nonzero" d="M20 0H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 10H2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v4h2V2h2v8z"/>
-</svg>
-`;

src/zoom/icon-minus.js

-export default `
-<svg fill="#232323" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19 13H5v-2h14v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
-`;

src/zoom/icon-plus.js

-export default `
-<svg fill="#232323" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
-`;

No alert changes

Improved metrics

Lines of code

1270

0.47%

Worsened metrics

Total package byte prevSize

52159

-0.93%

Dev dependency count

15

7.14%

Number of package files

26

-3.7%

No dependency changes