javascript - Make a circle shaped LeafLet map - Stack Overflow

Im building a webpage using Boostrap and want to make a LeafLet map that sits alongside some Boostrap img-circle's. I tried applying the img-circleclass to the map-preview but it seems like LeafLet just draws over the circle. I also tried to apply border-radius:50% with no effect.

Map html:

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

Map css:

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

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

JavaScript to load the map:

var map = L.map('map-preview').setView([48.46477, 7.88112], 15);
mapLink = '<a href="">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap/{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();

What I get:

What I want (I would have to move the zoom buttons down, but i guess that should be no problem):

Im building a webpage using Boostrap and want to make a LeafLet map that sits alongside some Boostrap img-circle's. I tried applying the img-circleclass to the map-preview but it seems like LeafLet just draws over the circle. I also tried to apply border-radius:50% with no effect.

Map html:

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

Map css:

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

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

JavaScript to load the map:

var map = L.map('map-preview').setView([48.46477, 7.88112], 15);
mapLink = '<a href="http://openstreetmap">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap/{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();

What I get:

What I want (I would have to move the zoom buttons down, but i guess that should be no problem):

• javascript
• html
• css
• twitter-bootstrap
• leaflet

Share Improve this question Follow edited Apr 3, 2016 at 12:51 sro5h asked Apr 2, 2016 at 17:30 sro5hsro5h 32222 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You should also set a z-index property to the map container:

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

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

Your mistake is in your CSS ...

You have to set a dimension to your map (square in pixels) and set your radius to half of this value.

For example

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

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

Note: this does not seem to work on all browsers