LoginSignup
2
0

More than 1 year has passed since last update.

foliumで地図を表示するアプリをherokuにデプロイする

Posted at

大まかな流れ

  1. foliumでhtmlを生成
  2. herokuにアップロード

下記を参考にさせていただきました。

foliumでhtmlを生成

地図を描画する最低限のプログラム

import folium

# 近鉄四日市駅の緯度経度
lat_lng = [34.967122324836694, 136.61851365521244]

f_map = folium.Map(
    location= lat_lng, 
    zoom_start=16
)

f_map

下はJupyter Labで実行した結果です。

image.png

Google Mapから緯度経度を取得

上の例では近鉄四日市駅の周辺を表示しました。
foliumで地図を表示するにあたって事前に表示したい位置の緯度経度を取得しておく必要があります。

下のようにfoliumで表示したい位置をGoogle Mapで検索して右クリックすると緯度経度を取得できます。

image.png

ピンを表示

# 駅にピンを立てる
folium.Marker(
    location=lat_lng,
    icon=folium.Icon(icon='info-sign', )
).add_to(f_map)

# 周辺の1箇所にピンを立てる

lat_lng_2 = [34.96750038330007, 136.62012298060858]

folium.Marker(
    location=lat_lng_2,
    icon=folium.Icon(color='red', icon='home', )
).add_to(f_map)

# herokuへのアップロードに向けてhtmlで保存する
f_map.save('map.html')

heroku

3つのファイルを一つのフォルダに保存

  • index.php
  • composer.json
  • map.html

index.phpとcomposer.jsonを作らないといけませんが、すごくシンプルです。

index.php

<?php include_once("map.html"); ?>

composer.json

{}

コマンド

git init
git add .
git commit -m 'Initial commit'
git push heroku master
git open

foliumを触ってみて。

地図を埋め込んだwebアプリを作りたい、という話だったら他のやり方の方が早いかなと。
分析っぽいことをするなら便利そう。

2
0
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
2
0