【android・leaflet】leafletがandroidで表示されない時の対処法

leafletとは、無料でマップ機能を提供してくれるオープンソースJavaScriptライブラリの一つです。

様々なプラグインが用意されており、カスタマイズ次第でgooglemapApiと

同等の機能を使えるようになります。

reactでは、公式のleafletを使うのではなくreact-leafletなるものを

使うことが推奨されています。要領は通常のleafletと同じです。

npm install react-leafletでインストールすることができます。

Leaflet本体はjqueryのようにCDNからダウンロードすることができるのですが、以下の形式

だとandroidで地図が表示されない若しくは地図のタイルが消えるといった現象が

起きてしまいます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

代替え手段として以下の方法でダウンロードすることでこれを回避することができます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

すぐに使いたい場合はこちらを使ってくださいね。