Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deconstructing an Open Layers 3 map

So, I am using Open Layers 3 with Ember.js to make a dashboard, and I've made the map load dynamically but I want it do be destroyed when I leave the route, the only thing I found was map.destroy() but its for an old version of the API and there don't seem to be one in the new version.

I used the chrome debugger after going to the map page a couple of times and found that I had 29 ol.Map objects.

This is what I have so far

App.MapView = Ember.View.extend({
  map: null,
  didInsertElement: function() {
    this.map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
        })
      ],
      view: new ol.View({
        center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
        zoom: 4
      })
    });
  },
  willDestroyElement: function() {
    // destroy this.map
  }
});

I cant find anything in the docs about removing maps.

Thanks in advance.

like image 268
Henrik Avatar asked Sep 23 '14 12:09

Henrik


1 Answers

You should try to do something like this:

App.MapView = Ember.View.extend({
  // if you are not using Ember.get/set you'd better make this "private"
  _map: null,
  didInsertElement: function() {
    this._map = new ol.Map(...);
  },
  willDestroyElement: function() {
    this._map.setTarget(null);
    this._map = null;
  }
});

It detach the map from its element and allows correct garbage collection. Don't forget to remove any other references to the map object too if any.

like image 174
Huafu Avatar answered Sep 29 '22 01:09

Huafu