タグ

地図に関するsatoshi_hiraishiのブックマーク (3)

  • AWS Location ServiceをCDKで構築して地図をカスタマイズしてみた - Taste of Tech Topics

    こんにちは、igaです。 8月ももう終わりですが、まだまだ暑い日が続きますね。私は数年前から日傘を使うようになりましたが、晴れた日に外を歩く際、日傘があると少しだけ体感温度がましになるので、夏は日傘が手放せなくなりました。 今回は、AWS Location ServiceをCDKで構築して、地図のスタイルをカスタマイズしてみました。 AWS Location Service AWS Location Serviceとは AWS Location Service(以降、Location Serviceと表記します)はAWSが提供する、地図や位置情報、移動経路などが利用できるサービスです。 aws.amazon.com 今回の内容 今回は、次の2つを実施します。 Location ServiceをCDKで構築して、クライアントで地図を表示する 地図のスタイルをカスタマイズする 地図のスタイルの

    AWS Location ServiceをCDKで構築して地図をカスタマイズしてみた - Taste of Tech Topics
  • アプリに地図を埋め込むのは簡単! - Mobile Factory Tech Blog

    駅奪取エンジニアのid:dorapon2000です。駅奪取では11月にゲーム内の地図のリプレースを行いました。地図そのもののスタイルも変わりましたが、地図の表示に使うライブラリも変更しています。今回は、アプリに地図を埋め込むだけであれば、ほんの少しのコードだけで実現できるということを紹介したいと思います。 記事の前半で地図表示の仕組みを簡単に説明して、後半で具体的なコードをお見せします。 地図表示の仕組み 地図を表示するためにはサーバ側とクライアント側の2つの仕組みが必要です。また、サーバとクライアントは地図をタイルという形式で送受信します。 地図タイルサーバ 地図タイルを配信する 自前でホストすることもできるが、いずれかのサービスのタイルAPIを利用すると楽 地図クライアント 地図タイルの受信と表示をする 地図の上にピンや吹き出しを置くこともできる タイルにはベクトルタイルとラスタタイル

    アプリに地図を埋め込むのは簡単! - Mobile Factory Tech Blog
  • React Leaflet + TypeScriptで地図(地理院タイル)を表示する

    Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで記事では、React LeafletTypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 (というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく

    React Leaflet + TypeScriptで地図(地理院タイル)を表示する
  • 1