0
donc je veux le bouton qui me laisse choisir satellite et hybride pour rester ouvert et vu, mais dès que la carte se charge, la couche de carte va sur le bouton. Je peux voir le bouton est toujours là quand je me déplace soudainement ou dézoomer où la carte affiche le bouton apparaît pour une seconde aussi sur les outils de développement que je peux voir. J'ai joué avec z index et quelques astuces css, rien ne semble fonctionner. Au-dessous de la ligne rouge se trouve la div contenant le bouton. 
Carte ui-foliaire angulaire Carte, option hybride satellite passant sous la carte?
utilisant "angulaire": "1.5.9" "feuillet": "^ 1.0.3" "notice-omnivore": "^ 0.3.4" "leaflet.markercluster": "^ 1.0.4", "ui-brochure": "^ 1.0.3"
constructor(leafletData, siMapUtils, $rootScope, $log, siMapRam, $mdSidenav) {
"ngInject";
this.name = 'map';
this.loading = false;
this.map = {};
this.showNotification = false;
this.mapId = 'map-dashboard';
this.leafletData = leafletData;
this.siMapUtils = siMapUtils;
this.siMapRam = siMapRam;
this.$rootScope = $rootScope
this.$log = $log;
this.$mdSidenav = $mdSidenav;
this.defaulLayerName = 'Hybrid',
this.defaultLayerUrl = 'http:***********.png',
this.layersType = 'xyz',
this.xyzLayerName = 'Satellite',
this.xyzLayerUrl = 'http://*********';
}
$onInit =() => {
this.initMap();
this.map = {
options:{},
layers:{
baselayers: {
defaultLayer: { name: this.defaulLayerName, url: this.defaultLayerUrl, type: this.layersType,layerOptions:{maxZoom:21 , maxNativeZoom: 18} },
xyz: { name: this.xyzLayerName, url: this.xyzLayerUrl, type: this.layersType, layerOptions:{maxZoom: 21, maxNativeZoom: 17} }
},
overlays: {}
},
center:{ lat: this.loadData.map.latitude, lng: this.loadData.map.longitude, zoom: this.loadData.map.zoomLevel | 1}
}
}
toggleEvents =() => {
this.$mdSidenav('right').toggle();
}
initMap =() => {
var self = this;
//save data in ram service to pull elsewhere (like in search)
this.siMapRam.saveAssets(this.loadData.assets);
let markersGroup = this.siMapUtils.buildMarkerLayer(this.loadData.assets);
this.leafletData.getMap(this.mapId).then(function(map) {
//coordinates = document.getElementById('coordinates');
/*if(self.previousLayer != null){
map.removeLayer(self.previousLayer);
}*/
map.options.minZoom = 3; //change to constant
map.options.maxZoom = 21; //change to constant
//mapDet = map;//?
//build marker layer
map.addLayer(markersGroup);
//_PL = markersGroup;
/*map.on('baselayerchange', function (event) {
_rs.$broadcast('baselayerchange', { layerName: event.name });
});*/
}, (err) => {
self.$log.error(`error fetching map during initialization`)
}).
then(function(){
self.$log.info('done loading markers ...');
//getLegend();
}, (err) => {
self.$log.error(`error initializing map: ${err.message}`);
});
}
}.angular-leaflet-map{
z-index:0;
}
.leaflet-top, .leaflet-bottom {
z-index: 1000 !important;
position: relative;
}
.map-wrapper {
position: relative;
}
.marker {
background-color: black;
line-height: 1;
max-height: 48px;
max-width: 48px;
border: solid;
border-width: 6px;
border-radius: 100px;
}
.marker-dot {
background-color: black;
height: 15px;
max-width: 15px;
border-radius: 100px;
left: 22px;
position: absolute;
bottom: -85px;
border: solid;
border-color: #F5F5F5;
border-width: 2px;
}
.icon-badge {
display: block;
position: absolute;
top: -11px;
right: -21px;
line-height: 24px;
height: 25px;
max-width: 13px;
padding: 0 5px;
font-family: Arial, sans-serif;
color: white !important;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
border: 1px solid;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
text-align: center;
z-index: 2;
}
.button-icon {
margin: auto 3px auto 0;
}
.auto-overflow {
overflow: auto;
}
.bottom-right-filter {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 5;
}
.bottom-left-layer {
position: absolute;
color: $dark-font;
bottom: 8px;
left: 8px;
z-index: 5;
}
.filter-button-background {
background-color: white !important;
}
.top-left-button-margin {
margin-top: 8px;
}
.search-controller-layout {
position: absolute;
}
.search-autocomplete {
width: 300px;
border-radius: 0;
}
.search-filter{
background-color: white;
margin-left:10px;
& > md-autocomplete {
& > md-autocomplete-wrap {
box-shadow: none;
}
}
}
#dashboard-ts{
& > md-select {
& > md-select-value{
color: $dark-font;
}
}
}
.autocomplete-asset-name {
font-size: x-large;
color: black;
}
.map-top-right-ctrl {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
}
.status-legend {
background-color: #FAFAFA;
padding-left: 5px;
padding-right: 10px;
}
.leaflet-top{
z-index: 5;
}
.leaflet-control-attribution {
display: none;
}
.leaflet-control-zoom {
position: absolute;
top: 40vh;
margin-left:10px !important;
}
.map-wrapper {
&#dashboard {
height: 100vh;
width: 100%;
}
&#asset-detail {
height: 200px;
width: 100%;
}
&#asset-location {
height: 60vh;
width: 100%;
}
}
.leaflet-top, .leaflet-bottom {
z-index: 10 !important;
}
.legend {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
background: rgba(255,255,255, 0.9);
line-height: 18px;
border-radius: 5px;
color: #555;
width:100%;
i{
color: #777;
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
}
.leaflet-draw-toolbar a {
background-image: url('/content/png/spritesheet.png');
background-repeat: no-repeat;
}
.leaflet-control-layers-toggle {
background-image: url('/content/png/layers.png');
width: 36px;
height: 36px;
bottom: 25px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url('/content/png/layers-2x.png');
background-size: 26px 26px;
bottom: 25px;
}
.leaflet-right .leaflet-control {
float: right;
top: 40vh;
font: 14px/16px Arial, Helvetica, sans-serif;
color: #555;
}
.leaflet-draw-toolbar{
margin-top: 5vh;
}
.cursorCardContent{
background-color: white;
color: black;
width: 350px;
}
.cursorCardStyle{
bottom: 35px;
right: 15px;
box-shadow: 2px 2px 5px #999
}
.cursorCardTitles{
margin: 6px;
font-weight: bold;
}
.anchorsStyle{
height: 100px;
width: 350px;
margin: 6px ;
overflow-x: hidden;
overflow-y: inherit;
}
.leaflet-bottom-card {
position: absolute;
z-index: 10;
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
.dg-modal{
width:650px !important;
}
}
@media only screen
and (max-width:350px)
and (min-width:320px){
.search-autocomplete{
width:246px;
}
}
@media only screen
and (min-width:350px)
and (max-width:360px){
.search-autocomplete{
width:287px;
}
}
.zoomLevel{
margin-left: 10px;
}
.updateLocationMap{
width: 600px;
height: 600px;
}
.selectdemoSelectHeader .demo-header-searchbox {
border: none;
outline: none;
height: 48px;
width: 222px;
padding: 0;
margin-left: 5px;
}
.selectdemoSelectHeader .demo-select-header {
cursor: pointer;
width: 222px;
margin-left: 5px;
}
#tenantSelector{
display: flex;
margin: 8px 3px 9px 3px !important;
}
.alert-icon {
height: 150px;
width: 150px;
}