import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { scheduleOnce } from '@ember/runloop';
import { action } from '@ember/object';
import { observes } from '@ember-decorators/object';
import { tracked } from '@glimmer/tracking';
import { guidFor } from '@ember/object/internals';
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';
export default class extends Component {
return `map-${guidFor(this)}`;
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css');
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css');
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js');
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js');
if (!this.loaded) { return; }
this.args.records.forEach(function (record) {
record.get('forest-lat'),
record.get('forest-lng'),
this.map = new L.Map(this.mapId);
const osmUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png';
const osmAttrib = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>';
const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
const drawnItems = new L.FeatureGroup();
this.map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
this.map.setView(new L.LatLng(48.8566, 2.3522), 2);
this.map.addControl(drawControl);
this.map.on(L.Draw.Event.CREATED, (event) => {
const { layer, layerType: type } = event;
const coordinates = event.layer.getLatLng();
const newRecord = this.store.createRecord('forest_delivery', {
'forest-is_delivered': false,
'forest-lng': coordinates.lng,
'forest-lat': coordinates.lat
layer.on('click', () => {
this.router.transitionTo(
'project.rendering.data.collection.list.view-edit.details',
this.map.addLayer(layer);
this.addMarkers(markers);
const lat = Number.parseFloat(marker[0]);
const long = Number.parseFloat(marker[1]);
const recordId = marker[2];
marker = L.marker([lat, long])
marker.on('click', () => {
this.router.transitionTo(
'project.rendering.data.collection.list.view-edit.details',
markers.forEach(marker => this.addMarker(marker));
triggerSmartAction(...args) {
return triggerSmartAction(this, ...args);
return deleteRecords(this, ...args);