I create sidebar, and want to add (append) it to map using L.DomUtil
**This JS Code:
**
//Create Custom Bar Left
L.Control.MyControl = L.Control.extend({
onAdd: function(map) {
var custombar = L.DomUtil.create('div', 'map-custombar-left');/*
ulcustombar = L.DomUtil.create('ul', 'ul-menu-map-custombar-nav', custombar),
licustombar = L.DomUtil.create('li', 'li-menu-map-custombar-nav', custombar),
ahrefcustombar = L.DomUtil.create('a', 'navbar-map-custombar-link', custombar),
inputcustombar = L.DomUtil.create('input', 'btn-check', custombar); */
selectmaptype = L.DomUtil.create('select', 'form-select', custombar);
let html = document.getElementById("custombarmap").innerHTML;
custombar.innerHTML = html;
return custombar;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.customLeftBar = function(opts) {
return new L.Control.MyControl(opts);
}
L.control.customLeftBar({
position: 'topleft'
}).addTo(map);
After create that, the result as picture below:
My issue is not about how to display, because i can hide Original Div with remove z-index.
My issues are, 1 and 2 so like a mirror with duplicate ID and everything. I give one example as picture below:
Its so complicated. My point is i want using Sidebar that added to map before, not original sidebar.
I still learning about leaflet, and need help for fix this.
You need to sign in to view this answers
Leave feedback about this