Polymer + PubNubで「マップコンテナが見つかりません」というエラーが発生しました

Question

現在、PubNubのEONマップライブラリで実験中です。 MapBoxと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ページで新しいEON-map要素を定義します。その後

<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>