rensanrenren / leafletwebmap Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 52 KB

Home Page: https://rensanrenren.github.io/leafletwebmap/

HTML 100.00%

leafletwebmap's Introduction

Ren Aoki

Connect with me:

Tools:

経歴

神奈川県横浜市出身。1998年11月18日生まれ。

2015.04 ~ 2017.6 Overseas Family School Singapore🇸🇬

2018.04 ~ 2022.3 青山学院大学地球社会共生学部古橋研究室

2019.08 ~ 12 カセサート大学(タイ🇹🇭)

2021.06 ~

Toypocket: トレーディングカードゲームのプレイヤー向けコミュニティサービス「Caraby」を運営。
TikTokアカウント「ポケカ豆知識」 https://www.tiktok.com/@pokekon15sec?_t=8cC4zxDNSq2&_r=1

2022.05 ~

SEOライティング、YouTube、Tiktokの動画編集/台本作成を受注。
カード販売/オリジナルパック販売(古物商第451370013866号)

2023.05 ~

ABLab https://ablab.space/

2023.07 ~

Dymon https://dymon.co.jp/

2023.10 ~

Stellar Trails

2024.01 ~

Crater Orbs https://www.craterorbs.com

Stellar Trails

NASA SPACE APPS CHALLENGE 2023 Global Nominee

横浜会場優勝(TechShiba) https://github.com/yudai1204/nasa-hackathon-2023-yokohama

大学活動履歴

ゼミ活動

OpenStreetMap マッピング https://tasks.hotosm.org/contributions
ドローン(Parrot SWING, Parrot MAMBO, AS-VT01)

PLATEAU活用
空間デザイン
マスクコンペ一次審査通過
TEDxAoyamaGakuinU
- 動画制作
- MR空間制作(STYLY・Cluster)

TikTok

15秒でわかるポケモンカード https://www.tiktok.com/@pokekon15sec?_t=8hVqGoUbwJ8&_r=1
編集で遊ぶショート動画 https://www.tiktok.com/@vfofficials?_t=8hVq8XMzCIT&_r=1

ゼミ論

「2020年度ゼミ論」タイトル：クロマキー撮影と編集における課題の整理と質の高い動画の撮影方法の提案

動画編集チーム V&F

オンラインハッカソン2021

オンラインハッカソン2022

UNVT-Hackathon/Meetup https://github.com/furuhashilab/UNVT-Hackathon-Meetup-2022_V-F

古橋ゼミ/ゼミ論2020

「クロマキー撮影と編集における課題の整理と質の高い動画の撮影方法の提案」 https://github.com/furuhashilab/2020gsc_RenAoki-

古橋ゼミ/ゼミ論2021

「青山学院大学相模原キャンパスB棟413スタジオの照明機材のみで「クオリティの高い動画撮影」を提案」 https://github.com/furuhashilab/2021gsc_Ren-Aoki

Toypocket

トレーディングカードに特化したSNS "Caraby(カラビー)" の開発。現在はサービス終了。
サービス名 : Caraby(カラビー)

Caraby Shop: Carabyオリジナルパックや海外商品などを販売 https://caraby.base.shop/

leafletwebmap's People

Contributors

Watchers

leafletwebmap's Issues

ローカルサーバーで表示させる

ローカルサーバーをセットアップして使用する方法はいくつかありますが、以下にPythonとNode.jsを使用した2つの簡単な方法を示します。

1. Pythonを使用する方法:

Pythonには、シンプルなHTTPサーバーが組み込まれています。以下の手順でローカルサーバーを起動できます。

コマンドプロンプトまたはターミナルを開きます。
HTMLファイルが存在するディレクトリに移動します。
Pythonのバージョンに応じて、以下のコマンドのいずれかを実行します。
- Python 2.xの場合:
```
python -m SimpleHTTPServer 8000
```
- Python 3.xの場合:
```
python -m http.server 8000
```
ブラウザで http://localhost:8000 にアクセスします。

2. Node.jsを使用する方法:

Node.jsを使用する場合、http-serverというシンプルなHTTPサーバーパッケージを利用できます。

Node.jsとnpm（Node.jsのパッケージマネージャ）がインストールされていることを確認します。
コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行してhttp-serverをグローバルにインストールします。
```
npm install -g http-server
```
HTMLファイルが存在するディレクトリに移動します。
以下のコマンドを実行してローカルサーバーを起動します。
```
http-server -p 8000
```
ブラウザで http://localhost:8000 にアクセスします。

これらの方法のいずれかを使用してローカルサーバーを起動した後、ブラウザで指定したアドレスにアクセスすることで、ローカルのHTMLファイルや関連するリソースを表示できます。

Leafletを使用してOSMを表示させる

OSMタイルテンプレートについて https://openstreetmap.jp/node/935
TileServer GL https://tile.openstreetmap.jp/

OSMの地図タイルのURLテンプレート

https://tile.openstreetmap.jp/{z}/{x}/{y}.png

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample Map</title>
    <!-- LeafletのCSS読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <!-- LeafletのCSS読み込み -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

</head>
<body>
    <!--地図を表示するdiv宣言-->
    <div id="map" style="height: 80vh;"></div>

    <script>
        //地図インスタンスを初期化(=div要素に地図画面が埋め込まれるようになる)
        const map = L.map('map', {
            center: [36.5, 137.1], //初期表示の地図中心の[緯度,経度]
            zoom: 5, //初期ズームレベル
        });

        //背景レイヤーインスタンス初期化(背景の初期条件を決めるのだと思う)
        const backgroundLayer = L.tileLayer(
            'https://tile.openstreetmap.jp/{z}/{x}/{y}.png', //OSMのタイルテンプレート
            {
                maxZoom: 19, 
                attribution: 
                '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',

            },
        );

        //地図インスタンスレイヤーへ追加
        map.addLayer(backgroundLayer);
    </script>

</body>
</html>