「コロナの感染分布図や地震災害分布予測図をWEBアプリで作る」

 

グローバルゴリラー李です。中国からやってきたコロナがみなさんの生活に悪い影響を与えてしまって心からお詫び申し上げます。

 

厚生労働省のお知らせによると4月23日12時時点で日本国内では、新型コロナウイルスに関連した感染症の感染者は11,919例となりました。なんと１万人超えてました。

要するに1000人に一人が感染者ということです。

大雑把にこういう分布になっているのが分かりますが、命や日常生活に影響があるもので、もっと詳しい地図情報を知りたくなるかと思います。もしかしたら僕だけでしょうか？

 

また、コロナとともに北海道沖から岩手県沖にかけての「千島海溝」と「日本海溝」で巨大地震が起きるかもしれないというニュースも出てきてました。なんでこのタイミングで？と思ってしまいますが、いざ大きな地震がくるとなると、自分の住んでいるエリアにどの様な影響をもたらすのかを知りたくないでしょうか？

 

以上の課題でWEB上で地図のアプリを作ってシミュレーションできるシステムを試して作りたいと思いました。

 

作業もあるので、簡単な開発環境codesandboxとjavascriptのライブラリーvuejsを選びました。

package.jsonにvue2-leaflet、leafletを注入します。

{

  “dependencies”: {

    “vue2-leaflet”: “2.5.2”,

    “vue”: “2.6.11”,

    “leaflet”: “latest”

  }

}

 

App.vueに

 

<template>

<div style=”height: 500px; width: 100%”>

    <div style=”height: 200px overflow: auto;”>

      <p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>

      <p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>

      <button @click=”showLongText”>

        Toggle long popup

      </button>

      <button @click=”showMap = !showMap”>

        Toggle map

      </button>

    </div>

    <l-map

      v-if=”showMap”

      :zoom=”zoom”

      :center=”center”

      :options=”mapOptions”

      style=”height: 80%”

      @update:center=”centerUpdate”

      @update:zoom=”zoomUpdate”

    >

      <l-tile-layer

        :url=”url”

        :attribution=”attribution”

      />

      <l-marker :lat-lng=”withPopup”>

        <l-popup>

          <div @click=”innerClick”>

            I am a popup

            <p v-show=”showParagraph”>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque

              sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.

              Donec finibus semper metus id malesuada.

            </p>

          </div>

        </l-popup>

      </l-marker>

      <l-marker :lat-lng=”withTooltip”>

        <l-tooltip :options=”{ permanent: true, interactive: true }”>

          <div @click=”innerClick”>

            I am a tooltip

            <p v-show=”showParagraph”>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque

              sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.

              Donec finibus semper metus id malesuada.

            </p>

          </div>

        </l-tooltip>

      </l-marker>

    </l-map>

  </div>

 

</template>

 

<script>

import { latLng } from “leaflet”;

import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from “vue2-leaflet”;

 

export default {

  name: “Example”,

  components: {

    LMap,

    LTileLayer,

    LMarker,

    LPopup,

    LTooltip

  },

  data() {

    return {

      zoom: 13,

      center: latLng(47.41322, -1.219482),

      url: ‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’,

      attribution:

        ‘&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors’,

      withPopup: latLng(47.41322, -1.219482),

      withTooltip: latLng(47.41422, -1.250482),

      currentZoom: 11.5,

      currentCenter: latLng(47.41322, -1.219482),

      showParagraph: false,

      mapOptions: {

        zoomSnap: 0.5

      },

      showMap: true

    };

  },

  methods: {

    zoomUpdate(zoom) {

      this.currentZoom = zoom;

    },

    centerUpdate(center) {

      this.currentCenter = center;

    },

    showLongText() {

      this.showParagraph = !this.showParagraph;

    },

    innerClick() {

      alert(“Click!”);

    }

  }

};

</script>

 

<style>

 

</style>

上記によって、フランスのどこかは分からないですが、簡単な地図を表示されました。このように自由にカスタマイズできるので、次回はシミュレーションの部分に入りたいと思います。