Ошибка «Карта контейнера не найдена» с помощью Polymer + PubNub

Question

В настоящее время я экспериментирую с библиотекой EON Map PubNub. Это библиотека отображения в реальном времени, которая использует инфраструктуру потоков данных LiveBox и PubNub.

Я пытаюсь создать простую PWA, которая публикует строку при каждом изменении местоположения.

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="shared-styles.html"> 
<link rel="import" href="../bower_components/geo-location/geo-location.html"> 
<link rel="import" href="../bower_components/google-map/google-map.html"> 

<link rel="stylesheet" type="text/css" href="../bower_components/mapbox.js/mapbox.css"> 
<script src="../bower_components/mapbox.js/mapbox.js"></script> 
<script src="../bower_components/pubnub/dist/web/pubnub.min.js"></script> 
<script src="../bower_components/eon-map/pubnub-mapbox.js"></script> 

<!-- Instantiate PubNub --> 
<script type="text/javascript"> 

    console.log('Init PubNub'); 
    var channel = 'pubnub-mapbox'; 
    var pub = new PubNub({ 
     publishKey: 'myPubKey', 
     subscribeKey: 'mySubKey', 
     logVerbosity: true 
    }); 

</script> 

<dom-module id="my-view1"> 
    <template> 

    <div id='map'></div> 

<script type="text/javascript"> 
    var map = eon.map({ 
     pubnub: pub, 
     id: 'map', 
     mbToken: 'myToken', 
     mbId: 'myId', 
     channels: [channel] 
    }); 

</script> 

    </template> 

    <script> 
Polymer({ 
    is: 'my-view1', 
}); 

Проблема возникает, когда браузер пытается создать экземпляр карты EON. Несмотря на то, есть DIV элемент, я получаю сообщение об ошибке:

Uncaught Error: Map container not found. 
    at e._initContainer (leaflet-src.js:1979) 
    at e.initialize (leaflet-src.js:1532) 
    at e.initialize (map.js:37) 
    at new e (leaflet-src.js:229) 
    at Object.module.exports.map (map.js:233) 
    at new create (pubnub-mapbox.js:79) 
    at Object.window.eon.map (pubnub-mapbox.js:291) 
    at <anonymous>:2:19 
    at HTMLElement._createLocalRoot (polymer-mini.html:1998) 
    at HTMLElement._setupRoot (polymer-mini.html:1703) 

Я чувствую, что я что-то очень простое, но не хватает я не могу показаться, чтобы поймать мою ошибку. Любая помощь будет принята с благодарностью.

Answer 1

я смог EON-карты для визуализации с помощью следующих действий:

Определить новый элемент эон-карту в eon.html странице, которая содержит пример кода.

<link rel="stylesheet" type="text/css" href="./bower_components/mapbox.js/mapbox.css"> 
 
<script src="./bower_components/mapbox.js/mapbox.js"></script> 
 
<script src="./bower_components/pubnub/dist/web/pubnub.min.js"></script> 
 
<script src="./bower_components/eon-map/pubnub-mapbox.js"></script> 
 

 
<dom-module id="eon-map"> 
 

 
    <template> 
 

 
    <style type="text/css"> 
 
     #map { 
 
     height: 200px; 
 
     } 
 
    </style> 
 
    <div id='map'></div> 
 

 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 
     is: 'eon-map', 
 
     ready: function() { 
 

 
     var channel = 'pubnub-mapbox'; 
 
     var pub = new PubNub({ 
 
      publishKey: 'your_pub_key', 
 
      subscribeKey: 'your_sub_key', 
 
      logVerbosity: true 
 
     }); 
 

 
     var map = eon.map({ 
 
      pubnub: pub, 
 
      id: 'map', 
 
      mbToken: 'your_mb_token', 
 
      mbId: 'your_mb_id', 
 
      channels: [channel], 
 
      debug: true 
 
     }); 
 

 
     } 
 
    }); 
 
    </script> 
 
</dom-module>

Затем включают eon.html в корневом каталоге и использовать eon-map элемент.

<link rel="import" href="./bower_components/polymer/polymer.html"> 
 
<!-- <link rel="import" href="shared-styles.html"> --> 
 
<link rel="import" href="./bower_components/geo-location/geo-location.html"> 
 
<link rel="import" href="./bower_components/google-map/google-map.html"> 
 
<link rel="import" href="eon.html"> 
 

 
<eon-map></eon-map>