Create a Map view
The example below shows how to display a map view:
component.js
1
import Component from '@glimmer/component';
2
import { inject as service } from '@ember/service';
3
import { scheduleOnce } from '@ember/runloop';
4
import { action } from '@ember/object';
5
import { observes } from '@ember-decorators/object';
6
import { tracked } from '@glimmer/tracking';
7
import { guidFor } from '@ember/object/internals';
8
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';
9
10
export default class extends Component {
11
@service router;
12
@service store;
13
14
@tracked map = null;
15
@tracked loaded = false;
16
17
constructor(...args) {
18
super(...args);
19
20
this.loadPlugin();
21
}
22
23
@observes('records.[]')
24
onRecordsChange() {
25
this.displayMap();
26
}
27
28
get mapId() {
29
return `map-${guidFor(this)}`;
30
}
31
32
async loadPlugin() {
33
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css');
34
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css');
35
36
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js');
37
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js');
38
39
this.loaded = true;
40
this.displayMap();
41
}
42
43
@action
44
displayMap() {
45
if (!this.loaded) { return; }
46
47
if (this.map) {
48
this.map.off();
49
this.map.remove();
50
this.map = null;
51
}
52
53
const markers = [];
54
55
this.args.records.forEach(function (record) {
56
markers.push([
57
record.get('forest-lat'),
58
record.get('forest-lng'),
59
record.get('id'),
60
]);
61
});
62
63
this.map = new L.Map(this.mapId);
64
65
const osmUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png';
66
const osmAttrib = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>';
67
const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
68
const drawnItems = new L.FeatureGroup();
69
this.map.addLayer(drawnItems);
70
71
const drawControl = new L.Control.Draw({
72
draw: {
73
polygon: false,
74
polyline: false,
75
rectangle: false,
76
circle: false,
77
circlemarker: false,
78
marker: true
79
},
80
edit: {
81
featureGroup: drawnItems
82
},
83
});
84
85
this.map.setView(new L.LatLng(48.8566, 2.3522), 2);
86
this.map.addLayer(osm);
87
this.map.addControl(drawControl);
88
89
this.map.on(L.Draw.Event.CREATED, (event) => {
90
const { layer, layerType: type } = event;
91
92
if (type === 'marker') {
93
const coordinates = event.layer.getLatLng();
94
const newRecord = this.store.createRecord('forest_delivery', {
95
'forest-is_delivered': false,
96
'forest-lng': coordinates.lng,
97
'forest-lat': coordinates.lat
98
});
99
100
newRecord.save()
101
.then((savedRecord) => {
102
layer.on('click', () => {
103
this.router.transitionTo(
104
'project.rendering.data.collection.list.view-edit.details',
105
this.args.collection.id,
106
savedRecord.id,
107
);
108
});
109
});
110
}
111
112
this.map.addLayer(layer);
113
});
114
115
this.addMarkers(markers);
116
}
117
118
addMarker(marker) {
119
const lat = Number.parseFloat(marker[0]);
120
const long = Number.parseFloat(marker[1]);
121
122
const recordId = marker[2];
123
marker = L.marker([lat, long])
124
.addTo(this.map);
125
126
marker.on('click', () => {
127
this.router.transitionTo(
128
'project.rendering.data.collection.list.view-edit.details',
129
this.args.collection.id,
130
recordId,
131
);
132
});
133
}
134
135
addMarkers(markers) {
136
markers.forEach(marker => this.addMarker(marker));
137
}
138
139
@action
140
triggerSmartAction(...args) {
141
return triggerSmartAction(this, ...args);
142
}
143
144
@action
145
deleteRecords(...args) {
146
return deleteRecords(this, ...args);
147
}
148
}
Copied!
template.hbs
1
<style>
2
.c-map {
3
width: 100%;
4
height: 100%;
5
z-index: 4;
6
}
7
</style>
8
9
<div id={{this.mapId}} class="c-map" {{did-insert this.displayMap}}></div>
Copied!
Last modified 3mo ago
Copy link