Draw path on top of a Mapbox map

app/components/path-editor.hbs

+<div>{{yield}}</div>
+{{! Second div to display the current lattitude and longitude with binding attributes }}
+<div>
+<p>Latitude: <code>{{lat}}</code> / Longitude: <code>{{lng}}</code></p>
+</div>
+{{! Right column to contain the map}}
+<div class="flex">
+<MapboxGl class='map-container' initOptions=(hash pitch=30) as |map|>
+ {{map.on 'click' (action 'mapClicked')}}
+</MapboxGl>
+</div>

app/components/path-editor.js

+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import mapboxgl from 'mapbox-gl';
+ 
+export default class PathEditorComponent extends Component {
+ 
+ @tracked lat = 0
+ @tracked lng = 0
+ @tracked polyline = []
+ startPoint
+ geoJsonPolyline = {
+   "geometry": {
+     "coordinates": this.polyline,
+     "type": "LineString"
+   },
+   "type": "Feature",
+   "properties": {
+     "name": "Cyclo path"
+   }
+ }
+ initLayer = false
+  
+ @action
+ async mapClicked({ target:map, point}) {
+   let clickCoord = map.unproject(point);
+   this.lat = clickCoord.lat;
+   this.lng = clickCoord.lng;
+   let newCoord = [this.lng, this.lat];
+   this.polyline.push(newCoord);
+ 
+   if (this.polyline.length == 1) {
+     // First point special processing --> add a marker as starting point
+     this.startPoint = new mapboxgl.Marker()
+       .setLngLat([this.lng, this.lat]).addTo(map);
+   } else {
+       if (!this.initLayer) {
+         map.addSource('cycling-path', { 'type': 'geojson', 'data': this.geoJsonPolyline });
+         map.addLayer({
+           'id': 'Drawn_cycling_path',
+           'type': 'line',
+           'source': 'cycling-path',
+           'layout': {
+             'line-cap': 'round'
+           },
+           'paint': {
+               'line-dasharray': [1, 2],
+               'line-color': '#f77',
+               'line-width': 3
+           }
+       });
+         this.initLayer=true;
+       } else {
+         map.getSource('cycling-path').setData(this.geoJsonPolyline);
+       }
+   }
+ }
+}

app/styles/app.css

+.mapboxgl-map {  height: 100vh;  width: 100vw;}

app/templates/application.hbs

-<h2 id="title">Welcome to Ember</h2>
-
-{{outlet}}
\ No newline at end of file
+<h2 id="title">Simple Path Editor</h2>
+<PathEditor>Path Editor</PathEditor>
+{{outlet}}

config/environment.js

@@ -6,6 +6,15 @@ module.exports = function(environment) {
     environment,
     rootURL: '/',
     locationType: 'auto',
+    'mapbox-gl': {
+      accessToken: process.env.MAPBOX_TOKEN,
+      map: {
+        style: 'mapbox://styles/mapbox/basic-v9',
+        zoom: 18,
+        center: [ 2.3488, 48.8534 ]
+      }
+    },
+ 
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build

package-lock.json

@@ -2818,6 +2818,107 @@
       "integrity": "sha512-rR7tJoSwJ2eooOpYGxGGW95sLq6GXUaS1UtWvN7pei6n2/okYvCGld9vsUTvkl2migxbkszsycwtMf/GEc1k1A==",
       "dev": true
     },
+    "@mapbox/geojson-rewind": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.0.tgz",
+      "integrity": "sha512-73l/qJQgj/T/zO1JXVfuVvvKDgikD/7D/rHAD28S9BG1OTstgmftrmqfCx4U+zQAmtsB6HcDA3a7ymdnJZAQgg==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "~2.0.0",
+        "minimist": "^1.2.5"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "inherits": "^2.0.3",
+            "readable-stream": "^3.0.2",
+            "typedarray": "^0.0.6"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
+    "@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==",
+      "dev": true
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
+      "dev": true
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
+      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
+      "dev": true
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
+      "dev": true
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz",
+      "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg==",
+      "dev": true
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
+      "dev": true
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dev": true,
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -7245,6 +7346,12 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "dev": true
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
+      "dev": true
+    },
     "cssom": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
@@ -7586,6 +7693,12 @@
         }
       }
     },
+    "earcut": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
+      "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==",
+      "dev": true
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -9769,6 +9882,163 @@
         }
       }
     },
+    "ember-in-element-polyfill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ember-in-element-polyfill/-/ember-in-element-polyfill-1.0.0.tgz",
+      "integrity": "sha512-0eSfWWgkOMvj7lcjo20VX8uX4HYxSOxm6MY3bAzqW5RpnHcpcrRf6o4y80xLGh5pp9z8FobiUfFwubphACP8mQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "ember-cli-babel": "^7.19.0",
+        "ember-cli-htmlbars": "^4.3.1",
+        "ember-cli-version-checker": "^5.0.2"
+      },
+      "dependencies": {
+        "babel-plugin-htmlbars-inline-precompile": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-3.2.0.tgz",
+          "integrity": "sha512-IUeZmgs9tMUGXYu1vfke5I18yYJFldFGdNFQOWslXTnDWXzpwPih7QFduUqvT+awDpDuNtXpdt5JAf43Q1Hhzg==",
+          "dev": true
+        },
+        "broccoli-output-wrapper": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/broccoli-output-wrapper/-/broccoli-output-wrapper-2.0.0.tgz",
+          "integrity": "sha512-V/ozejo+snzNf75i/a6iTmp71k+rlvqjE3+jYfimuMwR1tjNNRdtfno+NGNQB2An9bIAeqZnKhMDurAznHAdtA==",
+          "dev": true,
+          "requires": {
+            "heimdalljs-logger": "^0.1.10"
+          }
+        },
+        "broccoli-plugin": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/broccoli-plugin/-/broccoli-plugin-3.1.0.tgz",
+          "integrity": "sha512-7w7FP8WJYjLvb0eaw27LO678TGGaom++49O1VYIuzjhXjK5kn2+AMlDm7CaUFw4F7CLGoVQeZ84d8gICMJa4lA==",
+          "dev": true,
+          "requires": {
+            "broccoli-node-api": "^1.6.0",
+            "broccoli-output-wrapper": "^2.0.0",
+            "fs-merger": "^3.0.1",
+            "promise-map-series": "^0.2.1",
+            "quick-temp": "^0.1.3",
+            "rimraf": "^2.3.4",
+            "symlink-or-copy": "^1.1.8"
+          }
+        },
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ember-cli-htmlbars": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-4.4.0.tgz",
+          "integrity": "sha512-ohgctqk7dXIZR4TgN0xRoUYltWhghFJgqmtuswQTpZ7p74RxI9PKx+E8WV/95mGcPzraesvMNBg5utQNvcqgNg==",
+          "dev": true,
+          "requires": {
+            "@ember/edition-utils": "^1.2.0",
+            "babel-plugin-htmlbars-inline-precompile": "^3.2.0",
+            "broccoli-debug": "^0.6.5",
+            "broccoli-persistent-filter": "^2.3.1",
+            "broccoli-plugin": "^3.1.0",
+            "common-tags": "^1.8.0",
+            "ember-cli-babel-plugin-helpers": "^1.1.0",
+            "fs-tree-diff": "^2.0.1",
+            "hash-for-dep": "^1.5.1",
+            "heimdalljs-logger": "^0.1.10",
+            "json-stable-stringify": "^1.0.1",
+            "semver": "^6.3.0",
+            "strip-bom": "^4.0.0",
+            "walk-sync": "^2.0.2"
+          }
+        },
+        "ember-cli-version-checker": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-5.1.1.tgz",
+          "integrity": "sha512-YziSW1MgOuVdJSyUY2CKSC4vXrGQIHF6FgygHkJOxYGjZNQYwf5MK0sbliKatvJf7kzDSnXs+r8JLrD74W/A8A==",
+          "dev": true,
+          "requires": {
+            "resolve-package-path": "^2.0.0",
+            "semver": "^7.3.2",
+            "silent-error": "^1.1.1"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.3.2",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+              "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+              "dev": true
+            }
+          }
+        },
+        "fs-tree-diff": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fs-tree-diff/-/fs-tree-diff-2.0.1.tgz",
+          "integrity": "sha512-x+CfAZ/lJHQqwlD64pYM5QxWjzWhSjroaVsr8PW831zOApL55qPibed0c+xebaLWVr2BnHFoHdrwOv8pzt8R5A==",
+          "dev": true,
+          "requires": {
+            "@types/symlink-or-copy": "^1.2.0",
+            "heimdalljs-logger": "^0.1.7",
+            "object-assign": "^4.1.0",
+            "path-posix": "^1.0.0",
+            "symlink-or-copy": "^1.1.8"
+          }
+        },
+        "matcher-collection": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-2.0.1.tgz",
+          "integrity": "sha512-daE62nS2ZQsDg9raM0IlZzLmI2u+7ZapXBwdoeBUKAYERPDDIc0qNqA8E0Rp2D+gspKR7BgIFP52GeujaGXWeQ==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "minimatch": "^3.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "resolve-package-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-package-path/-/resolve-package-path-2.0.0.tgz",
+          "integrity": "sha512-/CLuzodHO2wyyHTzls5Qr+EFeG6RcW4u6//gjYvUfcfyuplIX1SSccU+A5A9A78Gmezkl3NBkFAMxLbzTY9TJA==",
+          "dev": true,
+          "requires": {
+            "path-root": "^0.1.1",
+            "resolve": "^1.13.1"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        },
+        "strip-bom": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+          "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+          "dev": true
+        },
+        "walk-sync": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",
+          "integrity": "sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "ensure-posix-path": "^1.1.0",
+            "matcher-collection": "^2.0.0",
+            "minimatch": "^3.0.4"
+          }
+        }
+      }
+    },
     "ember-inflector": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ember-inflector/-/ember-inflector-3.0.1.tgz",
@@ -10100,6 +10370,18 @@
         }
       }
     },
+    "ember-mapbox-gl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ember-mapbox-gl/-/ember-mapbox-gl-1.0.1.tgz",
+      "integrity": "sha512-splqlBR0yP5Tr9800IJNkFZTjajzSGiA7YwGgE7V1Vt42z38BzBo10IzLjT0Ufnzvz+Tv5rAlu4BjtORECLfUA==",
+      "dev": true,
+      "requires": {
+        "ember-auto-import": "^1.5.3",
+        "ember-cli-babel": "^7.19.0",
+        "ember-cli-htmlbars": "^5.1.0",
+        "ember-in-element-polyfill": "^1.0.0"
+      }
+    },
     "ember-maybe-import-regenerator": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/ember-maybe-import-regenerator/-/ember-maybe-import-regenerator-0.1.6.tgz",
@@ -12536,6 +12818,12 @@
       "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
       "dev": true
     },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -12601,6 +12889,12 @@
         }
       }
     },
+    "gl-matrix": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz",
+      "integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==",
+      "dev": true
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -12752,6 +13046,12 @@
       "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
       "dev": true
     },
+    "grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
+      "dev": true
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -13822,6 +14122,12 @@
         "verror": "1.10.0"
       }
     },
+    "kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+      "dev": true
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -14318,6 +14624,37 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mapbox-gl": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.12.0.tgz",
+      "integrity": "sha512-B3URR4qY9R/Bx+DKqP8qmGCai8IOZYMSZF7ZSvcCZaYTaOYhQQi8ErTEDZtFMOR0ZPj7HFWOkkhl5SqvDfpJpA==",
+      "dev": true,
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.0",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.5.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.1",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.2",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.2.1",
+        "grid-index": "^1.1.0",
+        "minimist": "^1.2.5",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.1",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^7.1.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.1"
+      }
+    },
     "markdown-it": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
@@ -14724,6 +15061,12 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=",
+      "dev": true
+    },
     "mustache": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz",
@@ -15738,6 +16081,16 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dev": true,
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "pbkdf2": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -15893,6 +16246,12 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
+    "potpack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
+      "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw==",
+      "dev": true
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -15974,6 +16333,12 @@
       "integrity": "sha512-0qhWYyCV9TYDMSooYw1fShIb7R6hsWYja7JLqbeb1MvHqDTvP/uy/R1RsyVqDi6GCiHOI4G5p2Hpr3IA+/l/+Q==",
       "dev": true
     },
+    "protocol-buffers-schema": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
+      "integrity": "sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA==",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -16097,6 +16462,12 @@
         "underscore.string": "~3.3.4"
       }
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "dev": true
+    },
     "qunit": {
       "version": "2.11.3",
       "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.11.3.tgz",
@@ -16621,6 +16992,15 @@
         "path-is-absolute": "1.0.1"
       }
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dev": true,
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -16732,6 +17112,12 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
+      "dev": true
+    },
     "rxjs": {
       "version": "6.6.3",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
@@ -17944,6 +18330,15 @@
         }
       }
     },
+    "supercluster": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.0.tgz",
+      "integrity": "sha512-LDasImUAFMhTqhK+cUXfy9C2KTUqJ3gucLjmNLNFmKWOnDUBxLFLH9oKuXOTCLveecmxh8fbk8kgh6Q0gsfe2w==",
+      "dev": true,
+      "requires": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18381,6 +18776,12 @@
         }
       }
     },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "dev": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -18909,6 +19310,17 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "vt-pbf": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",
+      "integrity": "sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==",
+      "dev": true,
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.0.5"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -38,6 +38,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.0.1",
     "ember-load-initializers": "^2.1.1",
+    "ember-mapbox-gl": "^1.0.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^8.0.0",
@@ -47,6 +48,7 @@
     "eslint-plugin-ember": "^8.6.0",
     "eslint-plugin-node": "^11.1.0",
     "loader.js": "^4.7.0",
+    "mapbox-gl": "^1.12.0",
     "npm-run-all": "^4.1.5",
     "qunit-dom": "^1.2.0"
   },

tests/integration/components/path-editor-test.js

+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | path-editor', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<PathEditor />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <PathEditor>
+        template block text
+      </PathEditor>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});