Leaflet: LayerGroup von Popups kann keine Breite/Höhe haben

Question

Mein Ziel ist es, zusätzliche Popups für jede bereits definierte Marker in einer anderen LayerGroup hinzuzufügen. Diese Popups sollten dann durch ein Leaflet LayerControl gesteuert werden, das alle zusätzlichen Popups zur gleichen Zeit anzeigt/versteckt.

Wie Sie in der verknüpften Bild sehen können, es funktioniert super. Mein Problem ist, dass ich jetzt die Größe die Größe dieser Popups reduzieren möchte, weil sie ziemlich groß für die kleinen Informationen sind, die sie enthalten.

Hier ist mein Versuch, mit der Funktion, die Popups zu einem anderen LayerGroup zugibt und mit dem Prospekt PopupOptions: maxWidth und maxHeight, aber es funktioniert nicht bei allen.

Ich bemerkte, dass es funktioniert wie vorgesehen, wenn ich die neuen Popups auf der Karte direkt, fügen aber Ich brauche die LayerGroup vom LayerControl steuern zu können. Muss ich Hacks über CSS verwenden, um mein Ziel zu erreichen? Gibt es keine einfache Lösung mit meinem bestehenden Code?

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

Was können Sie tun, ist eine benutzerdefinierte CSS-Klasse zu Ihrem Popup hinzu:

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); 
}); 

Ich habe ein div in Ihrem Popup hinzugefügt, Sie brauchen es nicht, aber Sie können auch mehr Kontrolle inside Ihr Popup haben.

Dann diese CSS hinzufügen:

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

Das ist, was ich für mich getan und es ist eine großartige Lösung, da Sie ganz einfach Ihre CSS später bearbeiten können.