Tagbangers Blog

mapbox

Mapbox studio で月を再現してみた

こんにちは、シルベスターです 今回は mapbox で月を再現したいです sky layer で太陽をカスタマイズすることができて、それを月っぽくすればいいのかなーと思います ↓ これが既存のスタイルですが、どんどん変えていきます まず、太陽の中心を変えます(210, 30)→(110, 85) 次は太陽周りの色を青っぽくします #ffffff → #2483ff 月っぽくしたいので intensity を 10 → 2.5 まで落としました 最後に atmosphere color を変えます 月のあるところにそんな変わらないが、少し回転したら違いがわかると思います ↓ before ↓ a...

Mapbox studio - 3D terrain 触ってみました

こんにちは、そして久しぶりです! タグバンガーズのシルベスターです。 今回紹介するのは、mapbox studio の 3d terrain です。 最近追加された 3D 機能少し気になったので少し触ってみました。 せっかくの 3D terrain なので今回は Outdoors テンプレを使いたいと思います。 早速富士山の方へ 3D terrain を enabled にすると 真上から見るそんな変わらないが、pitch を変えてみると… 富士山が3Dに! そして、色のないところもあるんですが、 空を有効化すると、このように空のスタイルを変えることもできました さて、 少しずつスタイルを変え...

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 マッ...

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...