AuraコンポーネントでMapを表示する

lightning:map では一度にプロットできるマーカーが10個と制限があります。　Google Mapだと有料ですので、無料のMapツールを探しているとよさそうなものがあります。

• Google Maps APIに頼らなくてもできる！「Leaflet」で地図を埋め込む
• Introduction of Leaflet Map in Salesforce Lightning Component

ソースをみるとcssなどを静的リソースに登録する必要がありそうです。
zipファイルを以下から入手し静的リソースに登録しておきます。

確かに表示できました。

プログラムはjsのロード時に指定しておけばデフォルトで表示されるようです。

jsLoaded : function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 2);
        L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{
                attribution: 'Tiles © Esri'
             }).addTo(map);
        component.set("v.map", map);
    },

attribution: 'Tiles © Esri'　は以下のとことみたい

使ってみてよくわからん

• LはLeafletJsのどこで定義されていますか?

Lはありませんが。リーフレットの src コードを見ると、 export されていますdefault。名前ではありません

import L from 'Leaflet'

を調べますnode_modules/leaflet/Leaflet.js。すべてが名前なしでインポートされるため、import Lマップ、ジオメトリ、およびその他のオブジェクトが既に含まれています。

jsLoadedメソッドの外で使えないのが痛い。
doInitの中でApex Classをコールしたいのだがどうやってもできないですね。

Lというのがどうやっても参照できない。

L.Icon is not a constructor

Icons.get is not a function

L.marker is not a function

地図タイルの変更

資料