1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HPFメモ_地図を操作する仕掛け.JS

Last updated at Posted at 2021-05-22

HPFを作るにあたり、まずはWEBで地図を使う方法を探る

王道GoogleMap

2018年6月から料金体系が変わって、クレジット登録が必要、APIキー発行が必須などになったらしい。お試しに使うには面倒かも
https://uniel.jp/news/before_using_mapapi/

Leafletという 地図ライブラリが良いかも
https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7

LeafLetは、地図サービスの画像を操作するライブラリのようで、地図データはほかのサービスを利用するようなイメージのようだ
ここではMAPBoxというのをつかっているが、openstreetmapなどいろいろあるみたい。

https://www.openstreetmap.org/#map=5/35.588/134.380
↓オープンライセンスらしいので、本格的に使って不満がでるまでは、これの使い方を極めたほうがいいかも。
image.png

Leafletの実装記事
https://ops.jig-saw.com/tech-cate/leaflet_maps
https://ops.jig-saw.com/tech-cate/leaflet_maps
https://dev.classmethod.jp/articles/serverless_map_service/
↑ トップの画像に絵があるとなんか 簡単なのかも!!って読みたくなるね
CodePenあった!!!
https://codepen.io/anon/pen/ROrMzo
↓ だってさ。Leafletには、機能拡張するライブラリがいろいろあるみたい。ここでは**「Leaflet Routing Machine」**というライブラリ。ルートを表示してくるって。
image.png
↓すげぇ!それっぽい!
image.png

地図をクリックすると経度緯度を表示するライブラリ
Leaflet Coordinates Control
https://kita-note.com/leaflet-plugin-coordinates_control
↓こんなかんじ。 すてき
image.png

つーか Leafletについてサンプルがおおいサイトだな!
https://kita-note.com/category/programming/leaflet

とりあえず したのやつらを使ってみるか
Leaflet 本体
Leaflet Routing Machine  経路ライブラリ
Leaflet Coordinates Control 緯度経度表示ライブラリ

JSDELIVRにもちゃんとあるね!
image.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?