Mapbox GL JS - стилизация кнопок - PullRequest
Новая
       14

Mapbox GL JS - стилизация кнопок

0 голосов
/ 27 августа 2018

У меня есть несколько простых кнопок, которые я добавляю (полноэкранный контроль и местоположение GPS), но мне нужно как минимум переместить их и, если возможно, иметь возможность их стилизовать.Я не могу найти документацию в Интернете, чтобы сделать это.Я надеюсь, что смогу сделать это через CSS, как любой другой элемент, если это возможно.

Мой код для обеих кнопок: 

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


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

Помимо этого, возможно ли также изменить фактический значок местоположения GPS с помощью CSS?(Синий кружок показывает, где вы находитесь?) На этот вопрос не нужно отвечать, потому что это скорее очень необязательная вещь, о которой я думаю, но я должен как-то двигать кнопки, потому что они мешают другим ярлыкам.

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

простое и лучшее решение CSS идеально подходит для северной стрелы. 

.mapboxgl-ctrl-group{
    border-radius: 1px;
}
.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;
}

Изображение

Если вы хотите изменить значок для увеличения и уменьшения масштаба, измените эти классы. 

 .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");}
0 голосов
/ 27 августа 2018

Вы можете указать общую позицию ваших элементов управления с помощью параметра position addControl : map.addControl(new mapboxgl.FullscreenControl(), 'top-right');

Элемент управления будет добавлен к: 

<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>

Таким образом, вы можете стилизовать его с правильным путем к классу: 

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