Leaflet センタークロス表示

地図の中心に十字マークを表示して中心がわかるようにします。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

センタークロス画像を画面中心に表示します。クロス画像上でのクリック操作は直下のマーカーに通過します。

<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid'); 
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
    L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
    L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
    L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");
    mymap.setView([35.6896, 139.6918], 9);
 
 
 
    //表示するセンタークロス画像を登録
    var crossIcon = L.icon({
      iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
      iconSize: [32, 32],
      iconAnchor: [16, 16]
    });
 
    //センタークロス画像を登録と表示
    var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false}).addTo(mymap);
 
    //ムーブイベントでセンタークロスを移動
    mymap.on('move', function(e) {
      crossMarker.setLatLng(mymap.getCenter());
    });
 
 
});
</script>

マップの基本部分についてはLeaflet - OpenStreetMap表示をご覧ください。マーカー部分についてはLeaflet マーカーとポップアップ表示をご覧ください。

センタークロス画像をL.iconに登録します

var crossIcon = L.icon({
  iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
  //↑センタークロス画像のURL
  iconSize: [32, 32],  //アイコン表示サイズ(画像サイズと違えば拡大縮小されます)
  iconAnchor: [16, 16] //十字の中心位置を指定、0,0にするとアイコンの左上がセンターに表示されます
});

センタークロス画像を登録と表示、getCenter() で中心座標を取得するので必ず setView()より後に記述して下さい。

var crossMarker = L.marker( mymap.getCenter(),{
  icon:crossIcon,    //アイコン画像を指定
  zIndexOffset:1000, //センタークロスを他のマーカーより上側表示します。
                     //マーカーが多数ある場合はより大きな値を指定して下さい10000など
  interactive:false  //センタークロスのクリックイベントを下側のマーカーに通過させます
}).addTo(mymap);

マップが移動した場合にイベントでセンタークロスを移動させます。

mymap.on('move', function(e) {
  crossMarker.setLatLng(mymap.getCenter());
});