react-leaflet事始め

何気なくよく使っているGoogleMap、 googleの公式サイト以外で使おうとすると料金がかかるのを知っていますか？ということで、Google MapsAPIを使わずに地図表示する方法を調べてみました。

Leaflet.jsというオープンソースの地図表示ライブラリがありました。 leafletjs.com こちらはreactコンポーネント化したライブラリ react-leaflet.js.org

react-leafletトラブルシューティング

Mapコンポーネントにheightの指定が必要
leaflet.cssのimportが必要
マーカーの上書きが必要

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png")
});

<Map
          center={position}
          zoom={this.state.zoom}
          style={{
            height: 600
          }}
        >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {markers}
        </Map>