在传单中自定义属性

Question

I am new to leaflet and have used leaflet Routing Machine for the routing service in open street map. I want to customize the default layout. For example, from API documentation, I could change the default location of zoom icons:

var zoom=L.control.zoom({
        position:'topright',

        }).addTo(map);  

But I want to make more changes to the default properties like display the zoom buttons inline, or change the background properties.

I tried getting the div from inspect element and changed the look some how but it is very limited. Is there any way i can fully access and alter the layout properties in leaflet ?

Answer 1

There is no other logic you can use than the position option, as you already found out. The leaflet zoom control is nothing more than the following markup:

<div class="leaflet-control-zoom leaflet-bar leaflet-control">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a>
    <a class="leaflet-control-zoom-out" href="#" title="Zoom out">-</a>
</div>

All styling is done through CSS and that's the way to go when you want to customize it. For instance switching to inline and changing the background-color.

.leaflet-control-zoom a {
    display: inline-block;
    background-color: blue;
}