[市区町村地図]地図をカード内に表示する

[Blue-Tone]

親Issue

#281 市区町村毎の感染者数をビジュアルに表示したい

作業ブランチ

https://github.com/codeforosaka/covid19/tree/feature/municipality_map

起こっている問題 / The Problem

• 地図がはみ出している。カード内に収まるようにする。

スクリーンショット / Screenshot

期待する見せ方・挙動 / Expected Behavior

• カード内に収まること
• カードのサイズ変更に地図の大きさが追従すること
• スマートフォンでもレイアウトが崩れないこと

起こっている問題の再現手段 / Steps to Reproduce

1. ブランチmunicipality_mapでメイン画面を表示する

動作環境・ブラウザ / Environment

• any
• macOS / Windows / Linux / iOS / Android
• Chrome / Safari / Firefox / Edge / Internet Explorer

改修箇所

components/GraphicalMapCard.vue
drawOsaka()

以下のscale、translate辺りを動的に調整が必要そう。
茨城のサイトを参考にするといいかも。

      // 投影を処理する関数を用意する。データからSVGのPATHに変換するため。
      projection = d3
        .geoMercator()
        .scale(scale)
        .center(d3.geoCentroid(json)) // データから中心点を計算 .center(d3.geoCentroid(json))
        .translate([width / 2, height / 2]) // ブラウザの中央に転移

また、<g>の位置がおかしそう。<div id="map">の位置に合わせると良さそう。
→追記：L157辺りの.append('g')を削除したら、<g>問題は解決しているように見える。

<g>

<div id="map">

[Blue-Tone]

対応してくれる方、募集中です。

[aktuehr]

必要なパラメータの制御の箇所は把握しました。
レスポンシブでどういった対応になりそうかは少し考えてみます。

[Blue-Tone]

PRマージで解決。
クローズします。

ナイスコミットです。ありがとうございます！