mapbox メモ

地図の生成

まず初めにする

mapboxgl.accessToken = "yourtoken";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v10",
  center: [139.7671, 35.6812], // 東京の場合
  zoom: 4
});

カスタムマーカー

ピンなど地図にマーカーをつける場合

map.on("load", () => {
  // カスタムマーカーとして使用する画像を追加する
  map.loadImage(
    "画像のurl",
    (error, image) => {
      if (error) throw error;
      map.addImage("custom-marker", image);
      // geojsonを追加する
      map.addSource("points", {
        "type" : "geojson",
        "data": {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [
                  139.7671, 35.6812
                ]
              },
              "properties": {
                "title": "Mapbox DC"
              }
            },
          ]
        }
      });

      // 記号のレイヤーを追加する
      map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": "points",
        "layout": {
          "icon-image": "custom-marker",
          "text-field": ["get", "title"],
          "text-font": [
            "Open Sans Semibold",
            "Arial Unicode MS Bold"
          ],
          // ここでテキストの位置を設定
          "text-offset": [0, 1.25],
          "text-anchor": "top"
        }
      });
    }
  );
});

水の色を変える

map.setPaintProperty("water", "fill-color", "#262626"); // 黒