Commit 339b9bbf authored by Bertrand PINEL's avatar Bertrand PINEL
Browse files

Draw path on top of a Mapbox map

parent 552eab75
<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>
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);
}
}
}
}
.mapboxgl-map { height: 100vh; width: 100vw;}
<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}}
......@@ -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
......
This diff is collapsed.
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');
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment