Leaflet Javascript のベースレイヤーでMapboxのレイヤーを使う

[ コード例 ]

レイヤー定義クラス



/**
 * Leaflet地図レイヤークラス
 * @type type
 */
class MapLayers {

  constructor() {
  }

  /**
   * 明暗種別取得
   * @param {type} label
   * @returns 
   */
  getLDType(label) {

    const mpl = new MapLayers();
    const ary = mpl.getLeafletBaseMapLayerArray();
    for (let j = 0; j < ary.length; j++) {
      if (label === ary[j]["label"]) {
        return ary[j]["ldtp"];
      }
    }

  }

  /**
   * ベースレイヤー
   * @returns {Array}
   */
  getLeafletBaseMapLayerArray() {
    const LEAFLET_LAYERS = [
      {
        label: '国土地理院標準',
        url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        attr: {attribution: "地理院標準"},
        ldtp: "L"
      },
      {
        label: '国土地理院淡色',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        attr: {attribution: "地理院淡色"},
        ldtp: "L"
      },
      {
        label: 'オープンストリートマップ',
        url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
        attr: {attribution: "OpenStreetMap contributors"},
        ldtp: "L"
      },
      {
        label: 'グーグル衛星',
        url: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
        attr: {
          maxZoom: 20,
          subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        },
        ldtp: "D"
      },

      // 2021-04-11 //
      {
        label: 'USGS 衛星 Topo',
        url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles courtesy of the U.S. Geological Survey"},
        ldtp: "D"
      },

      {
        label: 'Esri 衛星',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"},
        ldtp: "D"
      },

      {
        label: 'Stadia Maps Dark',
        url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
        attr: {
          attribution: "Stadia Maps"},
        ldtp: "D"
      },
      // 2021-04-11 終わり //

      // 2021-04-12 //
      {
        label: 'CartoDB DarkMatter',
        url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
        attr: {
          attribution:
                  '© OpenStreetMap contributors © CARTO'
        },
        ldtp: "D"
      },

      {
        label: '白地図',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
        attr: {id: 'blankmap', attribution: "地理院白地図"},
        ldtp: "L"
      },
      {
        label: 'Stamen Toner-Background',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-background'
        },
        ldtp: "D"
      },

      {
        label: 'Stamen Toner-Lite',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-lite'
        },
        ldtp: "L"
      },
      {
        label: 'Stamen Watercolor',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'watercolor'
        },
        ldtp: "L"
      },
      {
        label: 'Esri World Topo Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: 'Tiles ©  Esri Japan '
        },
        ldtp: "L"
      },
      {
        label: 'Esri Ocean Base Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
        attr: {
          maxZoom: 13,
          attribution: 'Tiles by  Esri Japan '
        },
        ldtp: "L"
      },
      
      // From mapbox //
      {
        label: 'Mapbox dark',
        url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite streets',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox night traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-night-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox day traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox outdoor',
        url: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox light',
        url: 'https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      /* {
        label: 'Mapbox decimal',
        url: 'https://api.mapbox.com/styles/hisashitanaka/ckj2fjsoj0alp19pqqtcvfk0i/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },*/
      
    ];
    return LEAFLET_LAYERS;
  }
  
  // mapboxgl.accessToken = "pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ";
  
  /**
   * OpenWeatherMap気象レイヤー Ver 1
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArray() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'http://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'http://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Temperture",
        url: 'http://{s}.tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];
    return WEATHER_LAYERS;

  }
  
  /**
   * OpenWeatherMap気象レイヤー Ver 2
   * Freeライセンスでは利用不可
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArrayV2() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'https://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'https://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Wind with direction",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/WND/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速風向',
          opacity: 0.9
        }
      },
      
      {
        label: "Temparture",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];


    return WEATHER_LAYERS;

  }

}

地図描画クラス

    // -- ベースレイヤー設定 -- //
    // -C
    const layersclass = new MapLayers();
    let leyers = layersclass.getLeafletBaseMapLayerArray();
    //alert(leyers.length);

    let baseMaps = {};
    let curkey = "";
    let objlayer;
    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      baseMaps[curkey] = objlayer;

      //console.log("curkey:" + curkey);
      //console.log("LDTP:" + itm["ldtp"]);
    });

    // -- OpenWeatherMap設定 -- //
    // -C
    leyers = layersclass.getLeafletWeatherMapLayerArray();
    let weatherMaps = [];

    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      weatherMaps[curkey] = objlayer;
    });


    // 天気選択を加えたレイヤーコントロール //
    L.control.layers(baseMaps, weatherMaps, /*{collapsed: false}*/).addTo(lmap);
    // ベースマップを乗せる //
    let baseadd = baseMaps[layerkey].addTo(lmap);

[ 画面例 ]

Mapbox Night Traffic

Leaflet Javascript に OpenWeatherMap の天気レイヤーを重ねる

ここで教えていただきました。
https://blog.kazu634.com/labs/leaflet-js-mapbox-js/001-leaflet-js-tutorial/

[ コード例 ]


   
/**
 * Leaflet地図レイヤークラス
 * @type type
 */
class MapLayers {

  constructor() {
  }

  /**
   * 明暗種別取得
   * @param {type} label
   * @returns 
   */
  getLDType(label) {

    const mpl = new MapLayers();
    const ary = mpl.getLeafletBaseMapLayerArray();
    for (let j = 0; j < ary.length; j++) {
      if (label === ary[j]["label"]) {
        return ary[j]["ldtp"];
      }
    }

  }

  /**
   * ベースレイヤー
   * @returns {Array}
   */
  getLeafletBaseMapLayerArray() {
    const LEAFLET_LAYERS = [
      {
        label: '国土地理院標準',
        url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        attr: {attribution: "地理院標準"},
        ldtp: "L"
      },
      {
        label: '国土地理院淡色',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        attr: {attribution: "地理院淡色"},
        ldtp: "L"
      },
      {
        label: 'オープンストリートマップ',
        url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
        attr: {attribution: "OpenStreetMap contributors"},
        ldtp: "L"
      },
      {
        label: 'グーグル衛星',
        url: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
        attr: {
          maxZoom: 20,
          subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        },
        ldtp: "D"
      },

      // 2021-04-11 //
      {
        label: 'USGS 衛星 Topo',
        url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles courtesy of the U.S. Geological Survey"},
        ldtp: "D"
      },

      {
        label: 'Esri 衛星',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"},
        ldtp: "D"
      },

      {
        label: 'Stadia Maps Dark',
        url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
        attr: {
          attribution: "Stadia Maps"},
        ldtp: "D"
      },
      // 2021-04-11 終わり //

      // 2021-04-12 //
      {
        label: 'CartoDB DarkMatter',
        url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
        attr: {
          attribution:
                  '© OpenStreetMap contributors © CARTO'
        },
        ldtp: "D"
      },

      {
        label: '白地図',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
        attr: {id: 'blankmap', attribution: "地理院白地図"},
        ldtp: "L"
      },
      {
        label: 'Stamen Toner-Background',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-background'
        },
        ldtp: "D"
      },

      {
        label: 'Stamen Toner-Lite',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-lite'
        },
        ldtp: "L"
      },
      {
        label: 'Stamen Watercolor',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'watercolor'
        },
        ldtp: "L"
      },
      {
        label: 'Esri World Topo Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: 'Tiles ©  Esri Japan '
        },
        ldtp: "L"
      },
      {
        label: 'Esri Ocean Base Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
        attr: {
          maxZoom: 13,
          attribution: 'Tiles by  Esri Japan '
        },
        ldtp: "L"
      },
      
      // From mapbox //
      {
        label: 'Mapbox dark',
        url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite streets',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox night traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-night-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox day traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox outdoor',
        url: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox light',
        url: 'https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      /* {
        label: 'Mapbox decimal',
        url: 'https://api.mapbox.com/styles/hisashitanaka/ckj2fjsoj0alp19pqqtcvfk0i/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },*/
      
    ];
    return LEAFLET_LAYERS;
  }
  
  // mapboxgl.accessToken = "pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ";
  
  /**
   * OpenWeatherMap気象レイヤー Ver 1
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArray() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'http://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'http://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Temperture",
        url: 'http://{s}.tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];
    return WEATHER_LAYERS;

  }
  
  /**
   * OpenWeatherMap気象レイヤー Ver 2
   * Freeライセンスでは利用不可
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArrayV2() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'https://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'https://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Wind with direction",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/WND/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速風向',
          opacity: 0.9
        }
      },
      
      {
        label: "Temparture",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];


    return WEATHER_LAYERS;

  }

}

// ****** 描画用メソッド ****** //

    // -- ベースレイヤー設定 -- //
    // -C
    const layersclass = new MapLayers();
    let leyers = layersclass.getLeafletBaseMapLayerArray();
    //alert(leyers.length);

    let baseMaps = {};
    let curkey = "";
    let objlayer;
    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      baseMaps[curkey] = objlayer;

      //console.log("curkey:" + curkey);
      //console.log("LDTP:" + itm["ldtp"]);
    });

    // -- OpenWeatherMap設定 -- //
    // -C
    leyers = layersclass.getLeafletWeatherMapLayerArray();
    let weatherMaps = [];

    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      weatherMaps[curkey] = objlayer;
    });


    // 天気選択を加えたレイヤーコントロール //
    L.control.layers(baseMaps, weatherMaps, /*{collapsed: false}*/).addTo(lmap);
    // ベースマップを乗せる //
    let baseadd = baseMaps[layerkey].addTo(lmap);

 

[ 画面例 ]

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"
      }
    },

< 地図表示例>