Machen Sie eine kreisförmige LeafLet Karte

Question

Ich baue eine Webseite mit Boostrap und möchte eine LeafLet Karte, die neben einigen Boostrapimg-circle s sitzt. Ich habe versucht, die img-circle Klasse auf die map-preview anwenden, aber es scheint wie LeafLet zeichnet über den Kreis. Ich habe auch versucht, border-radius:50% ohne Wirkung anzuwenden.

Karte html:

<div class="map-wrapper"> 
    <div id="map-preview" class=" img-circle"></div> 
</div> 

Karte css:

.map-wrapper{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
} 

.map-wrapper #map-preview{ 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
} 

JavaScript, um die Karte zu laden:

var map = L.map('map-preview').setView([48.46477, 7.88112], 15); 
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map); 
var marker = L.marker([48.46477, 7.88112]).addTo(map); 
map.scrollWheelZoom.disable(); 

Was erhalte ich:

Was ich will (ich würde die Zoomtasten nach unten bewegen müssen, aber ich denke, dass sollte kein Problem sein):

Answer 1

Sie auch eine z-index Eigenschaft auf der Karte Container setzen soll

#mapid{ 
    width: 400px; 
    height: 400px; 
    border-radius: 200px; 
    position: relative; 
    z-index: 500 
} 

http://plnkr.co/edit/Gje2ndRFdKwubWgCsHXW?p=preview

Answer 2

Ihr Fehler in Ihrem CSS ist ...

Sie haben eine Dimension gesetzt zu Ihrer Karte (Quadrat in Pixeln) und setzen Sie Ihren Radius auf die Hälfte dieses Wertes.

Zum Beispiel

width: 400px; 
height: 400px; 
border-radius: 200px; 

Siehe http://plnkr.co/edit/jwpVbNqgk6V9xiZepHs5?p=preview

Hinweis: Dies scheint nicht auf allen Browsern zu arbeiten