地図の中心を表示したい | とっても暇なブログw

とっても暇なブログw

ニコニコ動画の「踊ってみた」カテゴリーで活動する素敵な女の娘(こ)達を中心に、その文化?の展開を楽しく見守っていきたいと思います。
元気をもらえる彼女達のパワーは、本当に頼もしいですねw

ミニマップで場所を選び陣張りをする場合に、地図の中心がどこだか良くわからなくてちょっとストレスを感じたりします。

 

自拠点を選択している場合は中心マークが出ますが、地図を動かしたりすると中心が分からなくなります。

 

本当なら、地図画像上の上下中心と左右中心にグリッドラインが常に表示されていれば良いのですが、私の実力ではそれがうまくできませんでしたw

 

で、とりあえず、モーダルウインドウを出して、そこに中心を表示する様にしてみました。(微妙に中心からずれていますが、許容範囲?と言うことで細かな調整はしていません。)

 

下図の様に地図の下方にあるマップボタンのパネルに「中心表示」のボタンを配置しました。

 

このボタンをクリックするとモーダルウインドウが出て中心に「×」表示をします。

このボタンか地図画面をクリックするとモーダルウインドウは非表示になります。

 

もっと良い方法があったら、是非、教えて下さい。きっとその方法に乗り換えますw

 

① 関数の追加(ixa-moko.user.js)

 

// === 地図 ===

+ // 地図中心表示
+ function mapCenter(){
+ if (location.pathname != '/map.php') {
+ return;
+ }
+ $('#moko_vacant_panel').after('<button id="openModal">中心表示</button>');
+ var html = '<section id="modalArea" class="modalArea">' +
+ '<div id="modalBg" class="modalBg"></div>' +
+ '<div class="modalWrapper">×</div></section>';
+ $('.mapbox_container_wrap').after(html);
+ $(function () {
+ $('#openModal').on('click',function(){   
+ $('#modalArea').slideToggle();
+ });
+ $('#modalBg').on('click',function(){
+ $('#modalArea').fadeOut();
+ });
+ });
+ }


// ミニマップ
function mapMinimap(flag) {

 

 

② 関数の登録(ixa-moko.user.js)

 

// === execute function ===

allPageCheck();               // all
<中略>

mapCheck();                   // map
+ mapCenter();                // map

 

 

③ css の登録(main.css)

下記の記述を適当な場所に追加してください。

 

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 502;
  top: 326px;
  left: 36px;
  width: 740px;
  height: 359px;
}
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.3);
}
.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-80%,-80%);
  width: 10%;
  max-width: 0px;
  padding: 0px 0px;
  background-color: #fff;
  color: white;
}

/* モーダルボタンスタイル */
button#openModal {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676D7;
  color: #fff;
  padding: 3px 6px;
  font-size: 12px;
  position:relative;
  left:8px;
}

 

 

以上