カテゴリー: Leaflet

Leaflet Javascript マーカーツールチップのカスタマイズ

投稿日: 投稿者:

Leaflet Javascript マーカーツールチップのカスタマイズについて備忘録しておきます。

1) スタイルの設定
2) ツールチップにスタイルとコンテンツをセット
3) マーカーにバインド

[ コード例 ]

// ツールチップスタイルのセット //
const tooltipStyleWP = {direction: 
            "right",
            offset: L.point(-30, 24), // x, y <= のオフセット位置
            opacity: 0.8,
            permanent: isPermanetTooltip || isPermanentTarget ? true : false,
            className: "waypointTTClass" + CLASS_TAIL

          };

// ツールチップ、スタイルとコンテントのセット //
const ttp = L.tooltip(tooltipStyleWP).setContent(feature.properties.ident);

// マーカーアイコンのセット //
icn = L.icon({
            iconUrl: feature.properties.icon,
            iconSize: [12, 12]
          });

// マーカーにバインド //
L.marker(latlng, {icon: icn}).bindTooltip(ttp);

 

[ className CSS例 ]


      /* 飛行機マーカーツールチップ */
      /* 暗色 */
      .aircraftTTClass {
        background: transparent;
        border: 1px solid #FFFFFF;
        font-size: 13px;
        color: #FFFFFF;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .aircraftTTClassL {
        background: #f2f2f2;
        border: 1px solid navy;
        font-size: 13px;
        color: #222222;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClassL::before {
        border-right-color: transparent;
      }

      /* Waypointマーカーツールチップ */
      /* 暗色 */
      .waypointTTClass {
        background: transparent;
        border: 1px solid #FFFF00;
        font-size: 11px;
        color: #FFFF00;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .waypointTTClassL {
        background: transparent;
        border: 1px solid navy;
        font-size: 11px;
        color: #868600;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClassL::before {
        border-right-color: transparent;
      }

[ 画面例 ]

GoogleMap Javascript でAntimeridianライン (太平洋上日付変更線越え線の適正化)

投稿日: 投稿者:

Leafletで国際線飛行機の航跡ラインを描画したところ、日付変更線を通過するラインがおかしいままなので(プラグインをラップして使うと正しくなるようですが、まだ調べ切れてないので)、利用頻度少なく、課金もさほどないと思い、GoogleMapを使ってみました。

[ 描画例 ]

GoogleMap

Leaflet

GoogleMap Javascript でGreatCircleライン

投稿日: 投稿者:

Leafletで国際線飛行機の航跡ラインを描画したところ、長距離のラインが直線のままなので(プラグインをラップして使うと球面線になるようですが、まだ調べ切れてないので)、利用頻度少なく、課金もさほどないと思い、GoogleMapを使ってみました。

オプションの設定で、グレートサークルが適用されます。

[ ポリラインオプション設定例 ]


// 線の設定 //
gmapS.data.setStyle({
        strokeColor: "#FFFF00", // 黄色
        strokeWeight: 2,
        geodesic: true         // 球面線
      });

[ 描画画面例 ]

GoogleMap


Leaflet

Leaflet で GeoJSON のマーカーを表示

投稿日: 投稿者:

GeoJSONを使って多数のマーカーを地図で高速に表示出来るので、GoogleMapのAPIで使ってましたが、課金が多くなって来るので、Leafletへの代替中で調べて試したところ、下のようなので出来ました。

< コード例 >


      // ローカルのGeoJSONを読込 //
      const fnm = "GeoJSON/" + this.geojsonnm + ".json";
      
      // -- featuresを走査 -- //  
      $.getJSON(fnm, function (data) {
        let popuphtml = "";
        let icn;
        let geojson = L.geoJson(data, {
          onEachFeature: function (feature, layer) {
            // ポップアップのHTML //
            popuphtml = feature.properties.name + "<br>" +
                    feature.properties.zip + "<br>" +
                    feature.properties.addr + "<br>" +
                    feature.properties.tel;
            // HTMLをレイヤーにバインドする //
            layer.bindPopup(popuphtml);

            // PCの場合、マウスオーバーでポップアップさせる //
            if (!IS_TABLETUSER) {
              layer.on('mouseover', function (e) {
                this.openPopup();
              });
              layer.on('mouseout', function (e) {
                this.closePopup();
              });
            }

          }
          // マーカーをプロパティで記述したアイコンに変更 //
          , pointToLayer: function (feature, latlng) {

            if (feature.properties.icon !== "") {
              icn = L.icon({
                iconUrl: feature.properties.icon,
                //shadowUrl: 'leaf-shadow.png',
                iconSize: [20, 20]
              });

            }
            return L.marker(latlng, {icon: icn});
          }


        });
        // マップに追加 //
        geojson.addTo(lmap);

      });

< GeoJSON例 >

{
  "features": [
    {
      "type": "Feature",
      "properties": {
        "zip": "162-0845",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛省本庁",
        "unlo": "",
        "tel": "",
        "id": "28741",
        "tp": "",
        "addr": "新宿区市谷本村町5-1",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.7288,
          35.6928
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "239-0811",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛大学校",
        "unlo": "",
        "tel": "",
        "id": "28742",
        "tp": "",
        "addr": "横須賀市走水1-10-20",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.72196,
          35.25767
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "359-0042",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛医科大学校",
        "unlo": "",
        "tel": "",
        "id": "28743",
        "tp": "",
        "addr": "所沢市並木3-2",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.46762,
          35.80379
        ],
        "type": "Point"
      }
    },

< 地図表示例>