Webアプリケーションを公開するまでのつぶやき 6

プロローグはこちら↑。

地図を使いたい

地図にはOpenStreetMapを使いたいと思い、色々調べた結果vue-leafletを使うと良さそうかなと思いあたりインストール。

とりあえずこう。
npm i -D @vue-leaflet/vue-leaflet leaflet
で、使いたいファイルでimportしてみたのですが、インポートがうまくいかずエラーになってしまいました。
もしかしたら何かやり方があるのかもしれないですが、今の私にはこれを軌道修正する能力はないので一旦保留。
別の方法でMap表示を試みます。

OpenLayer

OpenLaylerを使って地図を表示させてみようと思います。

Installation | Vue3 OpenLayers

ここに書いている通りに実装。

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MapScreen',
  setup(props) {
    const center = ref([139.7673068, 35.6809591]);
    const projection = ref('EPSG:4326');
    const zoom = ref(16);
    const rotation = ref(0);
    return {
      center,
      projection,
      zoom,
      rotation,
    }
  },
});
</script>
<template>
  <div class="w-full h-40">
    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">

    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" 
    :projection="projection" />

    <ol-tile-layer>
        <ol-source-osm />
    </ol-tile-layer>

    </ol-map>
  </div>
</template>

位置や拡大率なんかは調整して東京駅にフォーカスするようにしてます。

地図を表示したところ

ここに現在地をGPSで取得し、周辺の図書館を地図にマッピングしたいと思っています。
あと、レイアウトもカッコ悪いので中央の画面全体に地図が広がるように調整したいですね。

全画面表示

とりあえず、スタイルを修正。
いい感じ！

現在地取得

Geolocation - Web API | MDN

この技術を使う。

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);
          },
          (error) => {

          }
        );
      }

こんな感じ。
macの場合はセキュリティとプライバシーからChromeの位置情報を許可しないと使えないみたいです。
許可していない場合にはブラウザが設定から位置情報許可してねっていうダイアログが出るので親切ですね。
他のデバイスだとどうなるか追々確認しようと思います。

    mounted() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.center = [position.coords.longitude, position.coords.latitude];
            this.isLoading = false;
          },
          (error) => {
            alert("位置情報の取得に失敗しました。");
            this.isLoading = false;
          }
        );
      }
    }

こんな感じでmountedで取得した現在地を地図の表示位置に反映する。
位置バレしちゃうので画像ではお見せできませんが、いい感じに表示できました。
現在地にアイコンとかつけたいですよね。

それはまた次回やっていきたいと思います！
ここまで読んでいただきありがとうございました。