Mapbox Studioで自分好みの地図デザイン｜ウェビナー発表スライド#210630 / design-maps-02

by Mapbox Japan

Slide 1

Slide 1 text

Mapbox Studioで自分好みの地図デザイン | Sylvester Abeng これからはじめるMapbox活用 #2 - デザイン編 1/66

Slide 2

Slide 2 text

2/66 🏕 ふもとっぱらキャンプ場

Slide 3

Slide 3 text

3/66

Slide 4

Slide 4 text

Agenda 1. Sky layer で月を再現 2. 山のスタイリング 3. Fog 機能の活用 4. キャンプ場の Dataset とTilesetの作成 5. キャンプ場の POI を追加 6. Publishing と Sharing 4/66

Slide 5

Slide 5 text

Mapbox studio 5/66

Slide 6

Slide 6 text

Mapbox studio 6/66

Slide 7

Slide 7 text

Mapbox studio 7/66

Slide 8

Slide 8 text

Mapbox studio 8/66 Exaggeration 1 → 3

Slide 9

Slide 9 text

Sky layerで月を再現 9/66

Slide 10

Slide 10 text

Sky layerで月を再現 10/66 Before After

Slide 11

Slide 11 text

Sky layerで月を再現 11/66 Type: 空の種類（atmosphere or gradient） Atmosphere Sun center: 太陽の位置 Sun Intensity: 太陽の明るさ Sun halo color: 太陽周りの色 Atmospheric color: 空の色 Gradient Gradient center:グラデーションの中心点 Gradient radius:グラデーションの半径 Gradient color: グラデーションの色 Sky layer properties

Slide 12

Slide 12 text

Sky layerで月を再現 12/66 Azimuthal（方位角）: 210 → 110 Polar（仰角）: 30 → 85 Sun Center

Slide 13

Slide 13 text

Sky layerで月を再現 13/66 Before After Azimuthal（方位角）: 210 → 110 Polar（仰角）: 30 → 85

Slide 14

Slide 14 text

Sky layerで月を再現 14/66 明るさ: 10 → 2.5 Sun intensity

Slide 15

Slide 15 text

Sky layerで月を再現 15/66 Before After 明るさ: 10 → 2.5

Slide 16

Slide 16 text

Sky layerで月を再現 16/66 月周りの色: #ffffff → #2483ff Sun halo color:

Slide 17

Slide 17 text

Sky layerで月を再現 17/66 Before After 月周りの色: #ffffff → #2483ff

Slide 18

Slide 18 text

Sky layerで月を再現 18/66 空の色: #979dc8 → #055276 Sun halo color:

Slide 19

Slide 19 text

Sky layerで月を再現 19/66 Before After 空の色: #979dc8 → #055276

Slide 20

Slide 20 text

Sky layerで月を再現 20/66 Before After

Slide 21

Slide 21 text

Sky layerで月を再現 21/66

Slide 22

Slide 22 text

山のスタイリング 22/66 Label layer の表示・非表示

Slide 23

Slide 23 text

山のスタイリング 23/66 Before After

Slide 24

Slide 24 text

山のスタイリング 24/66 Hillshade layer で立体感を出す Before After

Slide 25

Slide 25 text

山のスタイリング 25/66 Before After Opacity を 0.38 に固定

Slide 26

Slide 26 text

山のスタイリング 26/66 Before After

Slide 27

Slide 27 text

山のスタイリング 27/66 アンチエイリアスを有効

Slide 28

Slide 28 text

山のスタイリング 28/66 Before After

Slide 29

Slide 29 text

山のスタイリング 29/66 Hillshade layer は zoom leel 16 以上になると表示されない

Slide 30

Slide 30 text

山のスタイリング 30/66 Zoom extent を変えるため terrain component を eject

Slide 31

Slide 31 text

山のスタイリング Max: 16 → 22 Zoom extent 31/66

Slide 32

Slide 32 text

山のスタイリング 32/66 Before After

Slide 33

Slide 33 text

山のスタイリング 33/66 Before After

Slide 34

Slide 34 text

山のスタイリング 34/66 もう少しテクスチャー（シャドー、ハイライト）を出したいため、新しい layer を追加

Slide 35

Slide 35 text

山のスタイリング 35/66 Layer の光源が viewport に固定されるため、地図を回すと光源も変わります

Slide 36

Slide 36 text

山のスタイリング 36/66 Layer の光源を地図に固定 Viewport → Map Illumination anchor

Slide 37

Slide 37 text

山のスタイリング 37/66 Before After

Slide 38

Slide 38 text

山のスタイリング 38/66 335 → 110 Illumination direction 光源を月明かりに合わす

Slide 39

Slide 39 text

山のスタイリング 39/66 #ffffff → #eff6ee Highlight color: #000000 → #024527 Accent color: Before After

Slide 40

Slide 40 text

Fog 機能の活用 40/66 Enable fog: false → true Range - near: 0.5 → 2 Range - far: 10 → 20 Color: #ffffff → #c0dddb Fog

Slide 41

Slide 41 text

Fog 機能の活用 41/66 距離感が把握しやくなり、距離に応じて読み込まれるタイルの数を減らすことができるのでパフォーマンスの最適化にもなる

Slide 42

Slide 42 text

Fog 機能の活用 42/66 Before After

Slide 43

Slide 43 text

キャンプ場の Dataset と Tileset の作成 43/66 Dataset は最初から作ることもアップロードして編集すること可能

Slide 44

Slide 44 text

キャンプ場の Dataset と Tileset の作成 44/66

Slide 45

Slide 45 text

キャンプ場の Dataset と Tileset の作成 45/66

Slide 46

Slide 46 text

キャンプ場の Dataset と Tileset の作成 46/66

Slide 47

Slide 47 text

キャンプ場の Dataset と Tileset の作成 47/66

Slide 48

Slide 48 text

キャンプ場の Dataset と Tileset の作成 48/66 Tileset として export

Slide 49

Slide 49 text

キャンプ場の POI を追加 49/66 キャンプ場の Tileset を追加

Slide 50

Slide 50 text

キャンプ場の POI を追加 50/66

Slide 51

Slide 51 text

山のスタイリング Color: #ffffff Font: Noto Sans CJK bold Size: 20px Letter spacing: 0.1em Line height: 1.4em Max width: 30em Transform: Uppercase Halo color: #000000 Halo width: 0.8px Text justify: Left Text anchor: Bottom Left Text offset: 1, 0 Icon offset: 20, -30 Text Position 51/66

Slide 52

Slide 52 text

山のスタイリング 52/66

Slide 53

Slide 53 text

キャンプ場の POI を追加 53/66 Mapbox GL JS documentation - Expressions より

Slide 54

Slide 54 text

キャンプ場の POI を追加 54/66

Slide 55

Slide 55 text

キャンプ場の POI を追加 55/66

Slide 56

Slide 56 text

キャンプ場の POI を追加 56/66 Before After

Slide 57

Slide 57 text

キャンプ場の POI を追加 57/66 改行を追加

Slide 58

Slide 58 text

キャンプ場の POI を追加 58/66 Before After

Slide 59

Slide 59 text

キャンプ場の POI を追加 Font: Overpass Mono Bold Size: 12px Color: #ffffff Letter spacing: 0.1em Line height: 1.3em Transform: Uppercase Halo color: #000000 Halo width: 0.5px Halo blur: 1px Text justify: Left Text anchor: Bottom Left Text offset: 1.5, 4.2 Text Position 59/66 Layerが重なっているので、一番上の layerしか表示されません。なので、下にいる layers の allow text overlap を true にします。