🍣

【ReactNative】react-native-maps応用編③「オリジナルマーカーを作る」

2020/12/23に公開

はじめに

react-native-mapsの応用編第三弾になります。

バックナンバーは以下の通りです。

今回ですが、react-native-mapsでマーカーをカスタムして使用する例です。
公式のドキュメントに従えば簡単にマーカーを設置することができますが、よくあるマップのピンっぽくて見た目的にもう少しアレンジを加えたいところです。

そこで今回はコピペで使用できるマーカーをご紹介します。

使用ライブラリ

今回はreact-native-mapsに加えてnative-baseを使用します。
https://nativebase.io
というのも、マーカー中にアイコンを表示させるためです。
従ってreact-native-elementsやreact-native-paperのように他のアイコンを使用するライブラリを使っても構いません。

また、実際にアイコンを表示させるのはreact-native-vector-iconsなので、そちらを直接組み込んで使用しても問題ありません。

インストール

yarn add native-base react-native-vector-icons
react-native link react-native-vector-icons

サンプル

以下がカスタムマーカーのサンプルになります。

CustomMarker.tsx

import React from 'react';
import {Marker} from 'react-native-maps';
import {Icon, View} from 'native-base';

const CustomMarker: React.FC = () => {
  return (
    <Marker
      coordinate={{
        latitude: 34.971698,
        longitude: 138.3890637,
      }}>
      <View style={{justifyContent: 'center'}}>
        <View
          style={{
            top: 2,
            width: 38,
            height: 38,
            alignSelf: 'center',
            justifyContent: 'center',
            borderRadius: 38 / 2,
            backgroundColor: '#36C1A7',
          }}>
          <Icon
            type="FontAwesome5"
            name="utensils"
            style={{
              color: '#FFF',
              textAlign: 'center',
              fontSize: 20,
            }}
          />
        </View>
        <View
          style={{
            top: -2,
            width: 0,
            height: 0,
            alignSelf: 'center',
            backgroundColor: 'transparent',
            borderLeftWidth: 10,
            borderRightWidth: 10,
            borderTopWidth: 20,
            borderBottomWidth: 0,
            borderTopColor: '#36C1A7',
            borderLeftColor: 'transparent',
            borderRightColor: 'transparent',
          }}
        />
      </View>
    </Marker>
  );
};

export default CustomMarker;

出力

custom_marker

何をしているか

ポイントとしては2種類のViewを使い分けていることが挙げられます。
Iconをラップしている方のViewはスタイルを調整して丸くしており、マーカーのヘッドの部分に該当します。

後の方のViewは、こちらもスタイルを調整して逆三角形の形にして、マーカーのピンの部分を表現しています。
これはよう要素のwidthとheightを0にすることでborderのみを表示し、上下左右のborderの幅と色を調整することで三角形を表現するテクニックを使っています。
下記の記事に分かりやすい解説が載っていました。

まとめ

今回はreact-native-mapsでよく使うマーカーのカスタム例を紹介しました。
もちろんマーカーの中にアイコンでなく、自作の画像を埋め込んだりすることでよりオリジナリティのあるマーカーができると思います。

また、今回は何のpropsも持たないFCとしてありますが、実際はプロットする座標をはじめ、実際のアプリの形態に合わせたpropsを渡す必要があります。