OpenLayers 3 Polymer 1.0 module

Question

Я пытаюсь создать модуль Polymer для работы с OpenLayers 3 и отображения openstreetmaps. Я знаю, что есть great module working with leaflet, но мне нужны некоторые специфические функции, такие как ориентация карты.

В любом случае, я что-то кодирую и работаю, кроме одной вещи, которую я не могу понять: когда страница загружается, отображаются только команды (Zoom +/Zoom -), а не карта (и не любая вещь, такая как маркер и т. д.). Но если я изменю размер окна (мое окно Chrome я имею в виду), карта появляется, и все работает нормально !! Я думал, может быть что-то в связи с DOM Загрузка ...

код модуля:

<dom-module id="openlayer-map"> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css"> 
    <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script> 


    <style> 
    :host { 
     display: block; 
    } 

    #map 
    { 
     position: absolute; 
     height: 100%; 
    } 

    </style> 
    <template> 

    <div id="map" class="map"></div> 

    <!-- Tests 
    <input is="iron-input" bind-value="{{latitude}}" placeholder="latitude"> 
    <input is="iron-input" bind-value="{{longitude}}" placeholder="longitude"> 
    --> 

    </template> 
</dom-module> 
<script> 
    (function() { 
    Polymer({ 
     is: 'openlayer-map', 

     properties: 
     { 
     currentCenter: Array, 
     currentView: ol.View, 
     olmap: ol.Map, 
     geolocation: ol.Geolocation, 
     layer: Object, 
     longitude: 
     { 
      type: Number, 
      value:12.889101100000062, 
      notify: true, 
      observer: '_updateLongitude' 

     }, 
     latitude: 
     { 
      type: Number, 
      value: 15.7622695, 
      notify: true, 
      observer: '_updateLatitude' 

     }, 
     geotracking: 
     { 
      value: false, 
      type: Boolean, 
      notify: true, 
     }, 

     elemReady: Boolean, 


     }, 


     ready: function() 
     { 

     console.log('openlayer-map ready'); 
     this.initialConfig(); 
     this.elemReady = true; 
     this.setCenter(this.latitude,this.longitude); 
     }, 


     initialConfig: function() 
     { 
      console.log('initial config for the map...'); 

      this.currentView = new ol.View({ 
       zoom: 14 
      }); 


      var source = new ol.source.OSM(); 
      this.layer = new ol.layer.Tile(); 
      this.layer.setSource(source); 
      this.olmap = new ol.Map({ 
       layers: [this.layer], 
       target: this.$.map, 
       controls: ol.control.defaults({ 
       attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
        collapsible: false 
       }) 
       }), 
       view: this.currentView 
      }); 

      // Localisation 
      this.geolocation = new ol.Geolocation({ 
       projection: this.currentView.getProjection() 
      }); 

      this.geolocation.setTracking(this.geotracking); 
      if(this.geolocation) 
      { 

       var accuracyFeature = new ol.Feature(); 

       this.geolocation.on('change:accuracyGeometry', function() { 
       accuracyFeature.setGeometry(this.geolocation.getAccuracyGeometry()); 
       }.bind(this)); 

       var positionFeature = new ol.Feature(); 
       positionFeature.setStyle(new ol.style.Style({ 
       image: new ol.style.Circle({ 
        radius: 6, 
        fill: new ol.style.Fill({ 
        color: '#3399CC' 
        }), 
        stroke: new ol.style.Stroke({ 
        color: '#fff', 
        width: 2 
        }) 
       }) 
       })); 
       this.geolocation.on('change:position', function() { 
       var coordinates = this.geolocation.getPosition(); 
       positionFeature.setGeometry(coordinates ? 
       new ol.geom.Point(coordinates) : null); 
       }.bind(this)); 

       var featuresOverlay = new ol.layer.Vector({ 
       map: this.olmap, 
       source: new ol.source.Vector({ 
        features: [accuracyFeature, positionFeature] 
       }) 
       }); 
      } 
     }, 


     _updateLatitude: function(newValue, oldValue) 
     { 
      if(this.elemReady) 
      { 
       console.log('update latitude from '+oldValue+' to '+newValue); 
       this.setCenter(newValue, this.longitude); 
      } 
      else 
      { 
       console.log('_updateLatitude: waiting element to be ready'); 
      } 
     }, 

     _updateLongitude: function(newValue, oldValue) 
     { 
      if(this.elemReady) 
      { 
      console.log('update longitude from '+oldValue+' to '+newValue); 
      this.setCenter(this.latitude, newValue); 
      } 
      else 
      { 
      console.log('_updateLatitude: waiting element to be ready'); 
      } 
     }, 

     setCenter: function(latitude, longitude) 
     { 

     var center = [longitude, latitude]; 
     this.currentCenter = ol.proj.fromLonLat(center); 
     console.log('update center of the map with latitude = '+latitude+' and longitude = '+longitude); 
     this.currentView.centerOn(this.currentCenter,[400,400], [0,0]); 

     }, 

    }); 
    })(); 
</script> 

и вызов в Polymer:

<openlayer-map latitude="48.853" longitude="2.35" geotracking></openlayer-map> 

Любые подсказки?

Answer 1

Найденный! Требуется выполнить инициализацию карты при асинхронном вызове

attached: function() 
{ 
    this.async(function() 
    { 
    this.initialConfig(); // Create your ol.Map here 
    }); 
},