CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapleaflet
sro5h
sro5h

Reputation: 322

Make a circle shaped LeafLet map

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.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();

What I get: Result

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

Upvotes: 2

Views: 3716

Answers (2)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

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

Upvotes: 7

YaFred
YaFred

Reputation: 10008

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

Upvotes: 0

Related Questions