Vector under OSMbuildings

Question

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?

Answer 1

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

// 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)"
});
circleGroup.addLayer(dummycircle);

new OSMBuildings(map).load();

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

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

Answer 2

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.