mardi 21 avril 2015

Mapbox.js & Ember - retrieving & modifying the map in component

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