I've created a component for a mapbox map inside my ember-cli
app.
I add the map, and some markers, in a didInsertElement
callback in my component, and would like to add an observer that updates the markers as the underlying data changes in real time.
However, I don't know how to access the map inside my observer. And I'd rather not redraw the whole map each time my markers change.
Here's my code:
import Ember from 'ember';
import ENV from 'ember-geofire-demo/config/environment';
export default Ember.Component.extend({
attributeBindings: ['id'],
id: 'map',
// this is what doesn't work
markersObserver: function() {
// retrieve the map - ??
// retrieve the markerLayer on the map - ??
var markerLayer = // ...
// regenerate the geoJSON with the new marker positions
var geoJSON = generateGeoJSON(markers);
// re-set the markerLayer's geoJSON
markerLayer.setGeoJSON(geoJSON);
}.observes('markers'),
// works! adds the map and markers as expected
didInsertElement: function() {
// create the map
L.mapbox.accessToken = ENV.mapboxAccessToken;
var map = L.mapbox.map('map', 'hchood.blahblah');
// add a featureLayer to hold all the markers
var markerLayer = L.mapbox.featureLayer().addTo(map);
// generate GeoJSON for a series of points to add onto the markerLayer
var markers = this.get('markers');
var features = [];
markers.map(function(marker) {
var latitude = marker.get('vehicle_lat');
var longitude = marker.get('vehicle_lon');
features.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [longitude, latitude]
},
properties: {
'marker-size': 'large',
'marker-symbol': 'rail-light',
'marker-color': '#f86767'
}
});
});
var geoJSON = {
type: 'FeatureCollection',
features: features
};
// set the markers as the GeoJSON on the markerLayer
markerLayer.setGeoJSON(geoJSON);
}
});
Any suggestions greatly appreciated!
Aucun commentaire:
Enregistrer un commentaire