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.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');
+  });
+});