1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
| 'use strict';
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
router: Ember.inject.service('-routing'),
map: null,
loaded: false,
loadPlugin: function() {
var that = this;
Ember.run.scheduleOnce('afterRender', this, function () {
Ember.$.getScript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js', function () {
that.set('loaded', true);
});
var cssLink = $('<link>');
$('head').append(cssLink);
cssLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css'
});
});
}.on('init'),
displayMap: function () {
if (!this.get('loaded')) { return; }
var markers = [];
$('#map_canvas').height($('.l-content').height());
this.get('records').forEach(function (record) {
var split = record.get('forest-adresse').coordinates;
console.log('adresse', split);
markers.push([split[0], split[1], record.get('id')]);
});
this.map = new L.Map('map');
var osmUrl='//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
this.map.setView(new L.LatLng(37.7869148, -122.3998675), 13);
this.map.addLayer(osm);
this.addMarker(markers);
}.observes('records.[]', 'loaded').on('didInsertElement'),
addMarker: function (markers) {
var that = this;
markers.forEach(function (marker) {
var lat = parseFloat(marker[0]);
var lng = parseFloat(marker[1]);
var recordId = marker[2];
var record = that.get('records').findBy('id', recordId);
var displayValue = record.get(
that.get('collection.displayFieldWithNamespace')) ||
record.get('forest-email') || record.get('id');
marker = L.marker([lat, lng]).addTo(that.map);
marker.bindPopup('<strong>Delivery man</strong><p>' + displayValue + '</p>')
marker.on('mouseover', function (e) { this.openPopup(); });
marker.on('mouseout', function (e) { this.closePopup(); });
marker.on('click', function () {
that.get('router')
.transitionTo('rendering.data.collection.list.viewEdit.details',
[that.get('collection.id'), recordId]);
});
setInterval(function () {
marker.setLatLng(new L.latLng(lat -= 0.0001, lng -= 0.0001));
}, Math.floor(Math.random() * 2000) + 300);
});
}
}); |