xcx-map

地図（Map）

Scratch のステージに世界の地図を表示できる Xcratch の拡張機能です。 地図の上でスプライトを動かしたり、行きたい場所にピンを立てたりできます。地図はステージのいちばん後ろに描かれるので、スプライトは地図の上に重なって表示されます。

地図は次の2種類から選べます。

• 標準（はじめの設定）: OpenStreetMap の地図。世界中どこでも表示できます。
• 淡色（たんしょく）: 国土地理院の地図。色がうすくて見やすいですが、表示できるのは日本国内だけです。

使い方（Xcratch への入れ方）

1. Xcratch エディタ を開く
2. 左下の「拡張機能を追加」ボタンを押す
3. 「Extension Loader」を選ぶ

4. 入力欄に、次の URL を貼り付ける

   https://asondemita.github.io/xcx-map/dist/map.mjs
   

5. 「OK」を押すと、地図のブロックが使えるようになります

▶ サンプルプロジェクトを開いてみる

ℹ️ ブラウザから取得した位置情報をサーバに送信する事はありません。

できること（ブロック一覧）

地図の表示

• 現在位置の地図を表示する（今いる場所を地図の中心に表示します。位置情報の許可が必要です。位置情報はサーバに送信される事はありません）
• ( ) の地図を表示する（場所の名前で検索して表示します。ちょうどよい大きさに自動で合わせます）
• ピン番号 ( ) の地図を表示する（そのピンを地図の中心に表示します）
• 緯度 ( ) 経度 ( ) の地図を表示する

ピン

• 地図の中心に ( ) 色のピンを立てる（色は 赤・黄・青・緑・橙・紫・茶・黒 から選べます）
• データ ( ) のピンを立てる（表計算ソフト（Google スプレッドシート・Excel など）からコピーした表を、まとめてピンにします。1行＝1地点で、列は「緯度・経度・名前(省略可)・色(省略可)」。名前を空にすると、ふきだしは出ません。色は名前（赤・青…）で指定します。先に立てたピンはそのまま残ります）
• 直前のピンの名前を ( ) にする / ピン番号 ( ) の名前を ( ) にする（ピンの近くに名前を表示します。7文字以上は6文字＋「…」に短くなり、空っぽにすると消えます）
• ピン番号を表示 ( )（「する」／「しない」。立てた順に 1 から番号をつけます）
• ピン番号 ( ) を消す（その番号のピンだけを消します）
• 全てのピンを消す

移動・ズーム

• ズームを ( ) にする / ズームを ( ) ずつ変える（数が大きいほど拡大します）
• 全てのピンが見えるよう調整する（立てたピンが全部入るように位置と大きさを合わせます）
• 地図を横に ( ) ピクセル移動する（+ で右へ）/ 地図を縦に ( ) ピクセル移動する（+ で上へ）
• 地図上で ( ) 度方向に ( ) m を ( ) 秒で移動する（方角（0＝北・90＝東・時計回り）へ実際の距離（m）を、指定した秒数でなめらかに移動します）
• ピン番号 ( ) からピン番号 ( ) へスクロールする（2つのピンの間を、いったん引いてからなめらかに移動します）

しらべる

• 中心の緯度 / 中心の経度（今表示している地図の中心の緯度・経度）
• ピン番号 ( ) からピン番号 ( ) までの距離(km)
• 緯度 ( ) 経度 ( ) から 緯度 ( ) 経度 ( ) までの距離(km)

設定

• 地図の種類を ( ) にする（「標準」＝世界中／「淡色」＝日本だけ）
• 地図の透明度を ( ) にする（0 でくっきり、100 でとうめい）

地図を使うときの注意

地図のタイル（小さな画像）や地名の検索は、ボランティアや公共機関が無料で提供しているサーバーから取りよせています。みんなで気持ちよく使うために、次のことに気をつけてください。

• 大人数で一度にたくさん地図を読みこむと、サーバーに大きな負担がかかります。 クラス全員が同時にたくさんの地図や地名検索をすると、アクセスが一時的に止められることがあります。
• 地名で検索する () の地図を表示する は、1秒間に何回も続けて検索したり、一度に大量に検索したりしないでください。
• 地図の出典（© OpenStreetMap contributors ／ 地理院タイル）は、地図の右下に自動で表示されます。

参考リンク： OpenStreetMap タイル利用ポリシー ／ Nominatim 利用ポリシー ／ 国土地理院 地理院タイル

開発者向け

このリポジトリでコードを開発・公開するための手順です。

必要なものをインストール

npm install

開発環境の準備

./scripts/setup-dev.js の vmSrcOrg を、自分の scratch-vm のフォルダに合わせてから実行します。

npm run setup-dev

ビルド（モジュールにまとめる）

npm run build      # 1回だけビルド
npm run watch      # 変更を見張って自動でビルド

テスト

npm run test

バージョンアップと公開

npm version patch（または minor / major）でバージョンを上げると、ビルド・dist/{バージョン}/ の作成・dist/versions.json の更新・コミット・タグ付けが自動で行われます。 そのあとタグ（vX.Y.Z）を push すると、GitHub Actions が dist/・projects/・README.md を GitHub Pages に公開します。

git push origin vX.Y.Z

ホームページ

https://asondemita.github.io/xcx-map/

貢献（Contributing）

バグ報告・機能のリクエストを歓迎します。Issues ページ からお気軽にどうぞ。