リーフレット：ポップアップのレイヤーグループは幅と高さを変更できません

Question

私の目的は、別のLayerGroupにすでに定義されているMarkerごとに追加のポップアップを追加することです。これらのPopupsはリーフレットLayerControlによって制御され、追加のポップアップを同時に表示/非表示にする必要があります。

リンク先の画像で見ることができるように、それは素晴らしい作品。私の問題は、今はが、これらのポップアップのサイズをに減らしたいと思うということです。 maxWidthとmaxHeight、それがすべてでは動作しません：

は、ここに私の別のLayerGroupにポップアップを追加する機能を使用しよう、とPopupOptionsリーフレットを使用しています。

私が意図したとおり、私は直接マップに新しいポップアップを追加する場合、それが動作ことに気づいたが、私はLayerControlからLayerGroupを制御できるようにする必要があります。私は目標を達成するためにCSSを通してハッキングを使用する必要がありますか？私の既存のコードでは簡単な解決策はありませんか？

layers.conf.ts

const markers: L.Marker[] = GlobalMapService.jsonToArray(globalMapService.markersLayer.getLayers()); 
    const labelsLayer = L.layerGroup(null); // LayerGroup containing my Popups 

    markers.forEach((marker, index) => { 
    L.popup({ 
     offset: [2, -25], // This works (needed for Angular integration). 
     closeButton: false, // This works (as you can see). 
     maxWidth: 30,  // This doesn't work at all with a LayerGroup. 
     maxHeight: 25  // Same as above. 
    }) 
     .setLatLng(marker.getLatLng()) 
     .setContent('ID : ' + (index + 1)) 
     .addTo(labelsLayer); 
    }); 

    return labelsLayer; 

layers.conf.ts

const overlays: L.Control.LayersObject = { 
    'Labels': labelsLayer 
    }; 
    globalMapService.overlays = overlays; 

LeafletMapComponent.ts

const map = L.map(this.mapEl.nativeElement, { 
    center: [51.505, -0.09], 
    zoom: 7, 
    layers: [ 
     this.leafletService.baseLayers['Standard'], // BaseLayer 
    ] 
    }); 

    L.control.layers(this.leafletService.baseLayers, this.globalMapService.overlays) 
    .addTo(map); 

Answer 1

markers.forEach((marker, index) => { 
    L.popup({ 
     className: 'small-popup', 
     offset: [2, -25], 
     closeButton: false 
    }) 
    .setLatLng(marker.getLatLng()) 
    .setContent('<div class="popup">ID : ' + (index + 1) + '</div>') 
    .addTo(labelsLayer); 
}); 

私はあなたがそれを必要としないが、あなたはまた、より多くの制御insideあなたのポップアップを持つことができ、あなたのポップアップ内部divを追加しました：何ができることはあなたのポップアップにカスタムCSSクラスを追加しています。

そして、このCSSを追加します。

.small-popup { 
    max-width: 30px; 
    max-height: 25px; 
} 

これは私がやったと私のために、それはあなたが簡単に後であなたのCSSを編集することができますので、最適なソリューションだものです。