0
私は、衛星とハイブリッドを開いて見えるようにするボタンが欲しいですが、地図がロードされるとすぐに地図レイヤーがボタンの上に表示されます。私は、私が突然動かすかズームアウトするときに、ボタンがまだそこにあるのを見ることができます。私はzのインデックスといくつかのCSSトリックで遊んだが、何もうまくいかないようだ。赤い線の下には、ボタンを含むdivがあります。 
角度のチュートリアルマップ、地図の下にある衛星ハイブリッドオプション？
"角度" を使用した： "1.5.9"、 "リーフレット"： "^ 1.0.3"、 "リーフレット - 雑食"： "^ 0.3.4"、 "leaflet.markercluster"： "^ 1.0.4"、 "UI-リーフレット"： "^ 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;
}