Tagbangers Blog

Mapbox

React map gl と styled component で custom marker を作ってみました

こんにちは、フロントエンドチームのシルベスターです。 React で custom marker を作りたいなーと思っていろいろ調べた結果、 uber の react-map-gl と styled-components を使うと簡単に作れるねってことがわかりました なぜかと言うと、react component として import できて、必要な props を渡すだけでできるから?笑 早速やってみましょう Getting Started React-map-gl npm i react-map-gl Styled-components npm i styled-components マッ...

mapbox で GeoJson からレイヤーを追加してみる

突然ですが、社内で Mapbox がアツいので何か書こうと思います。 とりあえず Web で地図を作るとするなら、動的な情報が表示できるものでないと、 極論、「じゃあ画像でも貼っとけばいいじゃん!」という話なので、 動きのあるデータを地図上に表示する準備として、まずは レイヤーに格納する情報を動的に取得できるようにしてみようと思います。 (とはいえ、今回は 鎌倉なびマップ の静的なデータを利用したため、動的に更新される事はないのですが) それではやっていきましょう。 Mapbox では、レイヤーに関わる情報を Source と Layer に分けて保持します。 map.addSource で ...

MapboxGLでGeocoderを使ってみる

MapboxGLで使うGeocoderの紹介です。 地名、住所などから経度緯度を調べることができます。 Your browser does not support HTML5 video. まずはMapboxのユーザー発行後、Access tokenを取得する必要があります。 今回はpk.〜から始まる物を使います。 https://account.mapbox.com/ ステップを踏んでやり方を教えてくれるのでプロジェクトに合わせてinstall&importしていきます。 この後の細かいところの説明は公式にお任せしまして... https://docs.mapbox.com/mapbox-g...

Mapboxで始めるGeoJSON

GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。  * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。  地理情報データを座標値(ベクトル)と複数の属性で構成できるので、地球上のある場所(点)、2点間の距離や道路(線)、建物や土地(面)をデータとして表現できます。  点を表現する 以下のような形式で表現します。 {   type: 'Feature',   properties: {  ...

Mapbox Studioの紹介

Mapbox Studioとは? Mapbox Studio is the Mapbox application for managing your geospatial data and designing custom map styles. Use Mapbox Studio to build and design a map to your exact specifications by uploading and editing your own data, utilizing Mapbox-provided tilesets, adding custom fonts and ico...