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

3 min読了の目安(約2800字TECH技術記事

はじめに

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

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

https://zenn.dev/nekoniki/articles/0c40e9267b81e4

https://zenn.dev/nekoniki/articles/1be7f07be211d8

https://zenn.dev/nekoniki/articles/5e8e3b3f9ad314

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

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

使用ライブラリ

今回はreact-native-mapsに加えてnative-baseを使用します。

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

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

https://github.com/oblador/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は、こちらもスタイルを調整して逆三角形の形にして、マーカーのピンの部分を表現しています。
これはよう要素のwidthheight0にすることでborderのみを表示し、上下左右のborderの幅と色を調整することで三角形を表現するテクニックを使っています。
下記の記事に分かりやすい解説が載っていました。

https://bagelee.com/design/css/css-triangle/

まとめ

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

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