CODEWITHSUNDEEP
cssmapboxmapbox-gl-js
David
David

Reputation: 815

Mapbox GL JS - Styling buttons

I have some simple buttons I am adding (fullscreen control and GPS location) but I need to move them around at a minimum, and if possible be able to style them. I can't find documentation online to do this. I hope to be able to do this via CSS like any other element if possible.

My code for both buttons : 

topleftmapbox.addControl(new mapboxgl.FullscreenControl());   


topleftmapbox.addControl(new mapboxgl.GeolocateControl({  // 
positionOptions: {
    enableHighAccuracy: true
},
trackUserLocation: true
}));

Beyond this, is it also possible to change the actual GPS location icon with CSS? (The blue circle showing where you are?) This question is not required to be answered because it's more of a very optional thing I am thinking of, but I must somehow move the buttons because they interfere with other labels.

Upvotes: 0

Views: 4423

Answers (2)

Muhammad Imran Siddique
Muhammad Imran Siddique

Reputation: 509

simple and best solution CSS perfect for the north arrow.

.mapboxgl-ctrl-group{
    border-radius: 1px;
}
.mapboxgl-ctrl-group button:focus{
    box-shadow: none;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon {
    width: 24px;
    height: 24px;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon > button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 2px !important;
}
.mapboxgl-ctrl-compass-arrow {
    margin: 0.1em 2px !important;
}

Image

if you want to change the icon for zoom in and out control, modify these classes.

 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABjSURBVEhLYxgFtAQOQHwRStMMtAPxfyhNMzBqCUlg1BIU4AjEHXjwcSAGWQKiscnDsD0Q4wSXgRhkCKUYlGFxApALsLkMhqniE0Jg6EQ8ITBqCUlg+FgCqxkpygejAA9gYAAASnVG42Lr1P0AAAAASUVORK5CYII=");}


 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVEhLYxgFo2AUjALSwVEg/k8hPgLEOMFhIMamiRQMMmMUjIJRMAqIBwwMALVbIvDMYvl8AAAAAElFTkSuQmCC");}

Icon for fullscreen and exit fullscreen.

.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1zm0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1v2zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1z'/%3E%3C/svg%3E");}
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M6 16h2v2c0 .55.45 1 1 1s1-.45 1-1v-3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm2-8H6c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1s-1 .45-1 1v2zm7 11c.55 0 1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm1-11V6c0-.55-.45-1-1-1s-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1h-2z'/%3E%3C/svg%3E");
}

Upvotes: 1

MeltedPenguin
MeltedPenguin

Reputation: 797

You can specify the general position of your controls via the position parameter of addControl: map.addControl(new mapboxgl.FullscreenControl(), 'top-right');

The control will be added to:

<div class="mapboxgl-ctrl-top-right">
    <div class="mapboxgl-ctrl mapboxgl-ctrl-group">
        <button class="mapboxgl-ctrl-icon mapboxgl-ctrl-fullscreen" aria-label="Toggle fullscreen" type="button"></button>
    </div>
</div>

So you can style it with the right class path:

.mapboxgl-ctrl-top-right .mapboxgl-ctrl-fullscreen {
  background-color: red;
}

Upvotes: 3

Related Questions