I would like to display a circle object under the OSMbuildings layer with OSMBuildings . I was trying to change zIndex, bringToBack(), bringToFront() but it doesn't work. I don't use my own GeoJSON data to create 3d buildings. Any help?

2 Answers 2


I tested a few things in the "Classic 2.5D" version of OSMBuildings which integrates with Leaflet.

I was able to achieve what you wanted by starting/loading OSMBuildings quite late. If you want to add circles late or during runtime, you will need to have a FeatureGroup with a dummy circle before calling new OSMBuildings(map).load(), or else they end up on top of everything. The map code looks like this:

var map = new L.Map('map').setView([52.51860, 13.37610], 17);
new L.TileLayer('http://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png',
  { attribution: 'Map tiles &copy; <a href="http://mapbox.com">MapBox</a>', maxZoom: 17 }).addTo(map);

// group where all markers go into
var circleGroup = L.featureGroup();

// circle with no radius & transparent color
var dummycircle = L.circle([52.52020, 13.37570], 0, {
    color: "rgba(0,0,0,0)",
    fillColor: "rgba(0,0,0,0)"

new OSMBuildings(map).load();

// add another circle that is visible
var circle1 = L.circle([52.51860, 13.37610], 120, {
    color: "#f00",
    fillColor: "#f00"

Demo: http://jsfiddle.net/chk1/w513wsej/ (if you don't see buildings it may be because OSMuildings does not support HTTPS)



I've also found this solution after a few days by accident. I've just put a second GeoJSON and L.grid() object before new OSMBuildings(map).load(). It's not elegant solution but it works, thank you for your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.