こんにちは、シルベスターです 今回は mapbox で月を再現したいです sky layer で太陽をカスタマイズすることができて、それを月っぽくすればいいのかなーと思います ↓ これが既存のスタイルですが、どんどん変えていきます まず、太陽の中心を変えます（210, 30）→（110, 85） 次は太陽周りの色を青っぽくします #ffffff → #2483ff 月っぽくしたいので intensity を 10 → 2.5 まで落としました 最後に atmosphere color を変えます 月のあるところにそんな変わらないが、少し回転したら違いがわかると思います ↓ before ↓ a...
こんにちは、そして久しぶりです！ タグバンガーズのシルベスターです。 今回紹介するのは、mapbox studio の 3d terrain です。 最近追加された 3D 機能少し気になったので少し触ってみました。 せっかくの 3D terrain なので今回は Outdoors テンプレを使いたいと思います。 早速富士山の方へ 3D terrain を enabled にすると 真上から見るそんな変わらないが、pitch を変えてみると… 富士山が3Dに！ そして、色のないところもあるんですが、 空を有効化すると、このように空のスタイルを変えることもできました さて、 少しずつスタイルを変え...
こんにちは、フロントエンドチームのシルベスターです。 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 がアツいので何か書こうと思います。 とりあえず Web で地図を作るとするなら、動的な情報が表示できるものでないと、 極論、「じゃあ画像でも貼っとけばいいじゃん！」という話なので、 動きのあるデータを地図上に表示する準備として、まずは レイヤーに格納する情報を動的に取得できるようにしてみようと思います。 （とはいえ、今回は 鎌倉なびマップ の静的なデータを利用したため、動的に更新される事はないのですが） それではやっていきましょう。 Mapbox では、レイヤーに関わる情報を Source と Layer に分けて保持します。 map.addSource で ...
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...
GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。 * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。 地理情報データを座標値（ベクトル）と複数の属性で構成できるので、地球上のある場所（点）、2点間の距離や道路（線）、建物や土地（面）をデータとして表現できます。 点を表現する 以下のような形式で表現します。 { type: 'Feature', properties: { ...
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...
