title: Make a circle shaped LeafLet map
body: <p>Im building a webpage using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Boostrap</a> and want to make a <a href="http://leafletjs.com/" rel="nofollow noreferrer">LeafLet</a> map that sits alongside some <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Boostrap</a> <code>img-circle</code>'s. I tried applying the <code>img-circle</code>class to the <code>map-preview</code> but it seems like <a href="http://leafletjs.com/" rel="nofollow noreferrer">LeafLet</a> just draws <strong>over</strong> the circle. I also tried to apply <code>border-radius:50%</code> with no effect.</p>
  
  <p>Map html:</p>
  
  <pre><code> &lt;div class="map-wrapper"&gt;
       &lt;div id="map-preview" class=" img-circle"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Map css:</p>
  
  <pre><code>.map-wrapper{
      position: relative;
      width: 200px;
      height: 200px;
      display: inline-block;
  }
  
  .map-wrapper #map-preview{
      width: 100%;
      height: 100%;
      border-radius: 50%;
  }
  </code></pre>
  
  <p>JavaScript to load the map:</p>
  
  <pre><code>var map = L.map('map-preview').setView([48.46477, 7.88112], 15);
  mapLink = '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;';
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&amp;copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
  var marker = L.marker([48.46477, 7.88112]).addTo(map);
  map.scrollWheelZoom.disable();
  </code></pre>
  
  <p>What I get:
  <a href="https://i.stack.imgur.com/k9MZQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k9MZQ.png" alt="Result"></a></p>
  
  <p>What I want (I would have to move the zoom buttons down, but i guess that should be no problem):
  <a href="https://i.stack.imgur.com/Uf9O3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uf9O3.png" alt="Desired"></a></p>