Q&A以下のコードでlayersコントロールクリックで
地図選択ラベルの配置が崩れるます。
leaflet.cssをそのままでstyleに加えるコードが不明です
どなたか御指示下さい
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>ドロアーメニュー</title> 6 7<link rel="stylesheet" href="leaflet/leaflet.css"> 8 9<style> 10body { 11 margin: 0; 12} 13 14#map { 15 margin-top: 60px; 16 width: auto; 17 height: 510px; 18 /*background: #f5deb3;*/ 19} 20 21/**************************************** 22 CSSのドロワーメニューのウエブサイト 23 https://lopan.jp/css-animation-drawer/ 24*****************************************/ 25 26#navTgl:checked ~ .contents { 27 transform: translateX(250px); 28} 29 30/* :::::: toggle button :::::: */ 31#navTgl { 32 display: none; 33} 34label { 35 cursor: pointer; 36 position: fixed; 37 top: 0; 38 left: 0; 39} 40.open { 41 z-index: 2000; /*2*/ 42 width: 48px; 43 height: 48px; 44 background: lightSeaGreen; 45 transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 46} 47.open::before, .open::after { 48 content: ""; 49} 50.open span, .open::before, .open::after { 51 content: ""; 52 position: absolute; 53 top: calc(50% - 1px); 54 left: 30%; 55 width: 40%; 56 border-bottom: 2px solid white; 57 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 58} 59.open::before { 60 transform: translateY(-8px); 61} 62.open::after { 63 transform: translateY(8px); 64} 65.close { 66 z-index: 1000; /*1*/ 67 width: 100%; 68 height: 100%; 69 pointer-events: none; 70 transition: background .6s; 71} 72#navTgl:checked + .open { 73 background: indianRed; 74 transform: translateX(250px); 75} 76#navTgl:checked + .open span { 77 transform: scaleX(0); 78} 79#navTgl:checked + .open::before { 80 transform: rotate(45deg); 81} 82#navTgl:checked + .open::after { 83 transform: rotate(-45deg); 84} 85#navTgl:checked ~ .close { 86 pointer-events: auto; 87 background: rgba(0,0,0,.3); 88} 89 90/* :::::: drawer menu :::::: */ 91.menu { 92 z-index: 1000; /*1*/ 93 position: fixed; 94 overflow: auto; 95 top: 0; 96 left: 0; 97 width: 250px; 98 height: 100%; 99 margin: 0; 100 padding: 10px; 101 box-sizing: border-box; 102 background: rgba(0,0,0,.6); 103 transform: translateX(-100%); 104 transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); 105} 106 107.menu h2, .menu a { 108 color: white; 109} 110 111.menu a:hover { 112 background: black; 113} 114 115#navTgl:checked ~ .menu { 116 transform: none; 117} 118 119/* :::::: change mechanism :::::: */ 120@media screen and (min-width: 768px) { 121 .open { 122 display: none; 123 } 124} 125@media screen and (max-width: 767px) { 126 header nav { 127 display: none; 128 } 129} 130 131</style> 132</head> 133<body> 134 135<input type="checkbox" id="navTgl"> 136<label for="navTgl" class="open"><span></span></label> 137<label for="navTgl" class="close"></label> 138 139<nav class="menu"> 140 <h2>menu</h2> 141 <ul> 142 <li><a href="#article1">きりぎりす。</a></li> 143 <li><a href="#article2">紙テクスチャ。</a></li> 144 </ul> 145</nav> 146 147 148<!-- マップ --> 149 <div id="map"></div> 150 151<script src="leaflet/leaflet.js"></script> 152<script> 153 /* ------------ onload ----------- */ 154 window.onload = function () { 155 map = L.map('map', { zoomControl: false }); 156 map.setView([33.58, 133.58], 10); 157 158 //スケールコントロールを最大幅200px、左下、m単位で地図に追加 159 //L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map); 160 //ズームコントロールを右下で地図に追加 161 //L.control.zoom({ position: 'bottomright' }).addTo(map); 162 163 164 //地理院地図の標準地図 165 var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 166 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 167 //地理院地図の淡色地図 168 var lig = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', 169 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 170 //地理院地図の写真地図 171 var hoto =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', 172 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 173 //オープンストリートマップのタイル 174 var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', 175 {attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"}); 176 177 //baseMapsオブジェクトのプロパティを設定 178 var baseMaps = { 179 "地理院地図 標準" : gsi, 180 "地理院地図 淡色" : lig, 181 "地理院地図 写真" : hoto, 182 "OpenStreetMap" : osm 183 }; 184 185 //layersコントロールにbaseMapsオブジェクトを設定して地図に追加 186 L.control.layers(baseMaps).addTo(map); 187 gsi.addTo(map); 188 }; 189</script> 190 191</body> 192</html>
回答1件
0
自己解決
別案 JQによるdrawer menu で解決しました
全code upしときます
JQ
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>ドロワーメニュー</title> 6 7<link rel="stylesheet" href="leaflet/leaflet.css"> 8 9<style> 10body { 11 margin: 0; 12} 13 14#map { 15 margin-top: 0px; 16 width: auto; 17 height: 510px; 18 /*background: #f5deb3;*/ 19} 20 21 22/****** JQ drawer menu *****/ 23 /* jquery-drawer v3.2.2 */ 24 /* Flexible drawer menu using jQuery, iScroll and CSS. */ 25 /* http://git.blivesta.com/drawer */ 26 /* License : MIT */ 27 /* Author : blivesta <design@blivesta.com> (http://blivesta.com/) */ 28 29/*-------- Base --------*/ 30.drawer-open { 31 overflow: hidden !important; 32} 33.drawer-nav { 34 position: fixed; 35 z-index: 1001; /*←101*/ 36 top: 0; 37 overflow: hidden; 38 width: 8rem; /*16.25rem; ------------------------この数値変更可*/ 39 height: 100%; 40 color: #222; 41 background-color: #fff; 42} 43.drawer-brand { 44 font-size: 1.5rem; 45 font-weight: bold; 46 line-height: 3.75rem; 47 display: block; 48 padding-right:.75rem; 49 padding-left: .75rem; 50 text-decoration: none; 51 color: #222; 52} 53.drawer-menu { 54 margin: 0; 55 padding: 0; 56 list-style: none; 57} 58.drawer-menu-item { 59 font-size: 1rem; 60 display: block; 61 padding: .75rem; 62 text-decoration: none; 63 color: #222; 64} 65.drawer-menu-item:hover { 66 text-decoration: underline; 67 color: #555; 68 background-color: transparent; 69} 70 71/*-------- roverlay --------*/ 72.drawer-overlay { 73 position: fixed; 74 z-index: 1000; /*←100*/ 75 top: 0; 76 left: 0; 77 display: none; 78 width: 100%; 79 height: 100%; 80 background-color: rgba(0, 0, 0, .2); 81} 82.drawer-open .drawer-overlay { 83 display: block; 84} 85 86/*-------- Left --------*/ 87.drawer--left .drawer-nav { 88 left: -8rem; /*16.25rem; kokohenkou*/ 89 -webkit-transition: left .8s cubic-bezier(0.190, 1.000, 0.520, 1.000); 90 transition: left .8s cubic-bezier(0.190, 1.000, 0.520, 1.000); 91} 92.drawer--left.drawer-open .drawer-nav, 93.drawer--left .drawer-hamburger, 94.drawer--left.drawer-open .drawer-navbar .drawer-hamburger { 95 left: 0; 96} 97.drawer--left.drawer-open .drawer-hamburger { 98 left: 8rem; /*16.25rem; -----------------------------この数値変更可*/ 99} 100 101/*-------- Hamburger --------*/ 102.drawer-hamburger { 103 position: fixed; 104 z-index: 1004; /*←104*/ 105 top: 0; 106 display: block; 107 box-sizing: content-box; 108 width: 2rem; 109 padding: 0; 110 padding-top: 10px; 111 padding-right: .55rem; 112 padding-bottom: 22px; 113 padding-left: .55rem; 114 115 -webkit-transition: all .8s cubic-bezier(0.190, 1.000, 0.520, 1.000); 116 transition: all .8s cubic-bezier(0.190, 1.000, 0.520, 1.000); 117 118 -webkit-transform: translate3d(0, 0, 0); 119 transform: translate3d(0, 0, 0); 120 border: 0; 121 outline: 0; 122 /*background-color: transparent;*/ 123 background-color: lightSeaGreen; /*add*/ 124} 125.drawer-hamburger:hover { 126 cursor: pointer; 127 /*background-color: transparent;*/ 128 background-color: lightSeaGreen; /*add*/ 129} 130.drawer-hamburger-icon { 131 position: relative; 132 display: block; 133 margin-top: 10px; 134} 135.drawer-hamburger-icon, 136.drawer-hamburger-icon:before, 137.drawer-hamburger-icon:after { 138 width: 100%; 139 height: 2px; 140 -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 141 transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 142 /*background-color: #222;*/ 143 background-color: white; /*add*/ 144} 145.drawer-hamburger-icon:before, 146.drawer-hamburger-icon:after { 147 position: absolute; 148 top: -10px; 149 left: 0; 150 content: ' '; 151} 152.drawer-hamburger-icon:after { 153 top: 10px; 154} 155.drawer-open .drawer-hamburger-icon { 156 background-color: transparent; 157} 158.drawer-open .drawer-hamburger-icon:before, 159.drawer-open .drawer-hamburger-icon:after { 160 top: 0; 161} 162.drawer-open .drawer-hamburger-icon:before { 163 -webkit-transform: rotate(45deg); 164 transform: rotate(45deg); 165} 166.drawer-open .drawer-hamburger-icon:after { 167 -webkit-transform: rotate(-45deg); 168 transform: rotate(-45deg); 169} 170 171/*-------- toggle --------*/ 172.sr-only { 173 position: absolute; 174 overflow: hidden; 175 clip: rect(0, 0, 0, 0); 176 width: 1px; 177 height: 1px; 178 margin: -1px; 179 padding: 0; 180 border: 0; 181} 182 183/*-------- @media screen --------*/ 184@media screen and (min-width: 768px) { 185 .drawer-hamburger { 186 display: none; 187 } 188} 189@media screen and (max-width: 767px) { 190 header nav { 191 //display: none; 192 } 193} 194 195</style> 196 197</head> 198<body class="drawer drawer--left"> 199 200 <!-- ドロワーメニュー --> 201 <button type="button" class="drawer-toggle drawer-hamburger"> 202 <span class="sr-only">toggle navigation</span> 203 <span class="drawer-hamburger-icon"></span> 204 </button> 205 206 <nav class="drawer-nav"> 207 <ul class="drawer-menu"> 208 <li><a href="#">menu1</a></li> 209 <li><a href="#">menu2</a></li> 210 <li><a href="#">menu3</a></li> 211 </ul> 212 </nav> 213 214<!-- マップ --> 215 <div id="map"></div> 216 217<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 218<script src="iscroll.js"></script> 219<script src="drawer.js"></script> 220<script> 221 $(function() { 222 $('.drawer').drawer(); 223 }); 224</script> 225 226 227<script src="leaflet/leaflet.js"></script> 228<script> 229 /* ------------ onload ----------- */ 230 window.onload = function () { 231 map = L.map('map', { zoomControl: false }); 232 map.setView([33.58, 133.58], 10); 233 234 //スケールコントロールを最大幅200px、左下、m単位で地図に追加 235 L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map); 236 //ズームコントロールを右下で地図に追加 237 L.control.zoom({ position: 'bottomright' }).addTo(map); 238 239 240 //地理院地図の標準地図 241 var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 242 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 243 //地理院地図の淡色地図 244 var lig = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', 245 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 246 //地理院地図の写真地図 247 var hoto =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', 248 {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}) 249 //オープンストリートマップのタイル 250 var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', 251 {attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"}); 252 253 //baseMapsオブジェクトのプロパティを設定 254 var baseMaps = { 255 "地理院地図 標準" : gsi, 256 "地理院地図 淡色" : lig, 257 "地理院地図 写真" : hoto, 258 "OpenStreetMap" : osm 259 }; 260 261 //layersコントロールにbaseMapsオブジェクトを設定して地図に追加 262 L.control.layers(baseMaps).addTo(map); 263 gsi.addTo(map); 264 }; 265</script> 266 267</body> 268</html>
投稿2019/09/13 05:45
総合スコア15
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。