2

I want to createa a sample custom button to appear on my openlayers map.

 <div id="map" class="map">
   <div class="ol-custom ol-unselectable ol-control">
     <button class="ol-zoom-in" type="button" title="Show Me">O</button>
   </div>
 </div>

And my css is like this

.map {
    width: 100%;
    height: 300px;
}
.ol-custom{
  top: 4.5em;
  left: .5em;
}

But my custom button does not appears. I used openlayers css classes that used for other controls but did not work.

Demo

Improve this question

1 Answer 1

Reset to default
0

Your CSS should be like this (by adding the z-index), it's also preferable to add (position) but not required. 

.map {
    width: 100%;
    height: 300px;
}
.ol-custom{
   z-index: 1000;
  top: 4.5em;
  left: .5em;
}

Your DEMO

The Z-index determines the rendering order; [Example]

Improve this answer
2
  • why do we need z-index? Default css classes of openlayers des not include z-index. For example .ol-zoom {top:.5em;left:.5em}
    – barteloma
    Commented Apr 3, 2018 at 6:38
  • 1
    @barteloma As you said that Default CSS with just the zoom is shown without z-index and as the DEMO shown in your question. but when you tried to add additional button, you need to show it over the layer (base map) so in this case, we need z-index.
    – Moh
    Commented Apr 3, 2018 at 10:36

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.