オープンな地図アプリづくり。オープンストリートマップと地理院地図から国連ベクトルタイル(UNVT)への変換環境が整ったので、ちょっと寄り道して、地図ライブラリを自作してみることにしました。

3DライブラリThree.jsはうれしいことに、ESモジュール対応が進んでいたので、ベクトルタイルを読み込み、WebGLで表示させてぐるぐる回すサンプル完成!

mapthree-es demo1」(src on GitHub)
JavaScriptが主に書かれた82行のHTMLが1ファイルのみ。ローカルで開いても動きます。apikeyも何か別にインストール必要も一切ない、クリーンなJavaScriptです。(vector-tile、point-geometryをforkしてESモジュール化して使用しています)

zxyのディレクトリ毎に分割された地図、あとは大きさとオフセットが設定して、拡大率毎に順次読み込み表示するようにすれば地図っぽくなりそうです。

下記、82行のHTML、意外と簡単なつくりですよっ

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <script type="module"> import { Pbf } from "https://taisukef.github.io/pbf/Pbf.js"; import { fetchBin } from "https://code4sabae.github.io/js/fetchBin.js"; import { VectorTile } from "https://taisukef.github.io/vector-tile-js/VectorTile.js"; import * as THREE from "https://unpkg.com/three@0.128.0/build/three.module.js"; import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js'; const addPbfToScene = async (scene, url, color) => { const data = await fetchBin(url); const tile = new VectorTile(new Pbf(data)); for (const name in tile.layers) { const layer = tile.layers[name]; for (let j = 0; j < layer.length; j++) { const feature = layer.feature(j); const geo = feature.loadGeometry(); // make for (const g of geo) { const vertices = []; for (const p of g) { vertices.push(new THREE.Vector3(p.x / 5, 0, p.y / 5)); } const geometry = new THREE.BufferGeometry().setFromPoints(vertices); const material = new THREE.PointsMaterial({ size: 2, color, }); const mesh = new THREE.Line(geometry, material); //const mesh = new THREE.Points(geometry, material); scene.add(mesh); } } } }; window.onload = async () => { document.body.style.margin = "0"; document.body.style.overflow = "hidden"; const canvas = document.createElement("canvas"); document.body.appendChild(canvas); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45); camera.far = 10000; addPbfToScene(scene, "https://taisukef.github.io/sh2/zxy/7/112/50.pbf", 0xffffff); addPbfToScene(scene, "https://taisukef.github.io/sh2/zxy/9/450/202.pbf", 0x8888ff); addPbfToScene(scene, "https://taisukef.github.io/sh2/zxy/13/7190/3216.pbf", 0xff8800); addPbfToScene(scene, "https://taisukef.github.io/sh2/zxy/13/7190/3217.pbf", 0x88ff88); // const controls = new OrbitControls(camera, renderer.domElement); let th = 0; const tick = () => { th += .02; camera.position.x = 1000 * Math.sin(th); camera.position.z = 1000 * Math.cos(th); camera.position.y = 1000; camera.lookAt(new THREE.Vector3(500, 0, 500)); renderer.render(scene, camera); requestAnimationFrame(tick); }; tick(); window.onresize = () => { const width = window.innerWidth; const height = window.innerHeight; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }; window.onresize(); }; </script> </head> </html>

一緒に作ってみたい人、GitHubへどうぞ!→ mapthree-es on GitHub

GTFSとは、Googleマップとも連携する便利なバス情報オープンデータの世界標準です。

GTFSと、リアルタイムな位置情報オープンデータ、RTFSリアルタイムを表示するwebアプリを作りました。(GTFS = General Transit Feed Specification)

GTFSmap - 宇野自動車
IchigoJamで開発されたバスロケーションシステム用デバイス「いちごロケ」が活躍する岡山県の「宇野バス」さんの様子を表示。


GTFSmap - 宇野自動車
拡大した様子。建物がなんちゃって3D表示されてます。右クリックしながらマウス操作でグリグリ回転できて楽しいです。 マーカーが奥行き無関係になっているのは直したい。地図ライブラリ「MapLibre」はオープンソースなので直してプルリクすることもできます。

Googleが提唱するGTFSは、GitHub上「google/transit」でその仕様策定が進められています。「GTFS リアルタイムとは」に多言語でまとめられています。 変更プロセスの概要基本方針など、世界中でひとつのものを作るプロセスにワクワクします。

GTFS公開している方、ブラウザから直接取得できるようにHTTPS化と、CORS対応していただけるとうれしいです。 最近のブラウザではHTTPSとHTTPを混ぜて使用することができず、CORS対応のヘッダーがないと取得できません。 「Access-Control-Allow-Origin: *」とHTTPのレスポンスヘッダーに付けていただけると、プロキシーを通さず直接アクセスできるようになります。

GTFSリアルタイム一覧」(公共交通オープンデータ一覧 (GTFS、標準的なバス情報フォーマット(GTFS-JP))より抜粋)
HTTPS対応5事業者のアクセスを試みましたが、CORS対応しているところはまだなかったので、今回はすべてプロキシー経由としました。 こういったことも、ドキュメントとして追記検討も良さそうですね。

実現するために準備したもの
1. zlib.js のESモジュール化 (src on GitHub)
GTFSはCSVファイル(拡張子はtxt)をzip圧縮してあるので、展開するコードzlib.jsunzip.min.jsをESモジュール化して、unzip.jsを作成。 改造ポイントは2つ、this を globalThis に変えて、export。Denoやブラウザから同じコードでシンプルに使えます。

import { unzip } from "https://taisukef.github.io/zlib.js/es/unzip.js"; const data = await Deno.readFile("wakayama.zip"); // or fetch const zips = unzip(data); const filenames = zips.getFilenames(); console.log(filenames); const plain = new TextDecoder().decode(zips.decompress(filenames[0])); console.log(plain);

2. gtfs2json 作成 (src on GitHub)
1で準備した unzip.js と CSV.js を使って簡単。

import { CSV } from "https://js.sabae.cc/CSV.js"; import { unzip } from "https://taisukef.github.io/zlib.js/es/unzip.js"; const gtfs2json = (bin) => { const res = {}; const zips = unzip(bin); const fns = zips.getFilenames(); for (const fn of fns) { const data = new TextDecoder().decode(zips.decompress(fn)); const csv = CSV.decode(data); const json = CSV.toJSON(csv); const name = fn.substring(0, fn.length - 4); // cut .txt res[name] = json; } return res; }; export { gtfs2json };

3. GTFSリアルタイムをJSON化するコードを作成 (src on GitHub)
Node.jsに対応している gtfs-realtime-bindings を発見、Protocol Buffers にしか依存していないので、移植は楽。 ちょっと前に移植した protobuf-es.js がすぐに役立った。importとexportを変更してできあがり。JavaScript / Deno対応とプルリク。

4. GTFSモジュールとしてまとめる
URLを渡すとJSONでそれぞれ返すモジュールにすると便利。

import { GtfsRealtimeApi } from "https://taisukef.github.io/gtfs-realtime-bindings/deno/gtfs-realtime.js"; import { gtfs2json } from "./gtfs2json.js"; import { fetchBin } from "./fetchBin.js"; const GTFS = { async fetch(url) { const data = await fetchBin(url); const json = gtfs2json(data); return json; }, async fetchRT(url) { const data = await fetchBin(url); const feed = GtfsRealtimeApi.transit_realtime.FeedMessage.decode(data); return feed; }, }; export { GTFS };

5. webアプリ、GTFSマップを作る (src on GitHub)
あとは、GTFSモジュール、Maplibre、Geo3x3を使って組み立てるだけ!

import { GTFS } from "https://taisukef.github.io/gtfs-map/GTFS.js"; import { maplibregl } from "https://taisukef.github.io/maplibre-gl-js/maplibre-gl-es.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; import { Geo3x3 } from "https://taisukef.github.io/Geo3x3/Geo3x3.mjs"; window.onload = async () => { const url_gtfs = "http://www3.unobus.co.jp/opendata/GTFS-JP.zip"; const url_gtfsrt = "http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin"; const update_interval_sec = 15; // 地図表示 (MapLibre API: https://maplibre.org/maplibre-gl-js-docs/api/ ) const mapgl = maplibregl; const map = new mapgl.Map({ container: "map", hash: true, style: 'https://taisukef.github.io/gsivectortile-3d-like-building/building3d.json', zoom: 15, minZoom: 4, maxZoom: 17.99, bearing: -40, pitch: 60, }); // GTFS取得とタイトル表示 const gtfs = await GTFS.fetch(url_gtfs); console.log(gtfs); title.textContent = "GTFSmap - " + gtfs.agency[0]?.agency_name; // バス停表示 const lls = new mapgl.LngLatBounds(); for (const e of gtfs.stops) { const ll = [e.stop_lon, e.stop_lat]; const marker = new mapgl.Marker({ color: "#ff9999" }).setLngLat(ll).addTo(map); lls.extend(ll); const geo3x3 = Geo3x3.encode(e.stop_lat, e.stop_lon, 20); const popup = new mapgl.Popup({ className: "popup" }) .setLngLat(ll) .setHTML(`<a href=${e.stop_url}>${e.stop_name}</a><br><a href=https://geo3x3.com/#${geo3x3}>${geo3x3}</a>`) .setMaxWidth("300px"); marker.setPopup(popup); } map.fitBounds(lls); // update_interval_sec秒おきにGTFSrealtimeでバス情報の取得と表示 for (;;) { const feed = await GTFS.fetchRT(url_gtfsrt); for (const e of feed.entity) { const pos = e.vehicle.position; const ll = [pos.longitude, pos.latitude]; const marker = new mapgl.Marker().setLngLat(ll).addTo(map); const popup = new mapgl.Popup({ className: "popup" }) .setLngLat(ll) .setHTML(JSON.stringify(e.vehicle)) .setMaxWidth("300px"); marker.setPopup(popup); } await sleep(update_interval_sec * 1000); } };

index.htmlを手元において、ブラウザで開くだけで動きますよ!


ブラウザでデバッガーを立ち上げると、JSON化されたGTFSデータを読めます。


GTFSmap 和歌山バス
こちら、和歌山のバスのGTFSを表示してみるサンプルです。みなさんのまち、GTFSオープンデータはありますか?

試験公開されている国土交通省国土地理院による「地理院地図Vector」は、GitHubでのオープンソースとして公開されているので、改造自在! MapBoxで表示されていたコードを派生して独自オープンソースで開発されているMapLibreに変更したものを作成しました。

3D like building map」(src on GitHub
シンプルなJavaScriptのコードで、はじめられるマップアプリができました!

<script type="module"> import { maplibregl } from "https://taisukef.github.io/maplibre-gl-js/maplibre-gl-es.js"; const map = new maplibregl.Map({ container: 'map', hash: true, style: './building3d.json', center: [139.762529,35.680757], zoom: 15, minZoom: 4, maxZoom: 17.99, bearing: -40, pitch: 60, doubleClickZoom: false, localIdeographFontFamily: false }); //UI map.addControl(new maplibregl.NavigationControl(), 'bottom-right'); map.addControl(new maplibregl.ScaleControl()); map.showTileBoundaries = false; map.showCollisionBoxes = false; //地図切替え btn_setstylestd.onclick = () => { map.setStyle('./building3d.json'); }; btn_setstylephoto.onclick = () => { map.setStyle('./building3dphoto.json'); }; btn_setstyledark.onclick = () => { map.setStyle('./building3ddark.json'); }; </script>

オープンストリートマップ版のデータと比較すると、地理院地図の方がデータは一見豊富そう。 いろいろこれにさまざまなオープンデータなどを足して、いいとこ取りするなどすると、良い地図ができそうです。


taisukef/gsivectortile-3d-like-building: ベクトルタイルを用いた3D風地図 on GitHub」
呼び出すだけのシンプルなプロジェクトから始められます。

ベクトルタイルと呼ばれる、タイル状に分割されたベクトルデータは、pbfというバイナリ形式のデータファイルになっています。 バイナリデータはJSONやCSVなどのテキストファイルと違ってテキストエディタでさっと見ることはできませんが、同じ中身でも容量が小さく押さえられ、高速に処理できます。特に、地図のような多量のデータではその差が大きくでます。

鯖江独自のデータをどんどん追加するために、pbfを扱いやすいESモジュール対応しました。
forked 「taisukef/pbf: A low-level, lightweight protocol buffers implementation in JavaScript.
forked 「taisukef/ieee754: Read/write IEEE754 floating point numbers from/to a Buffer or array-like object.
Denoで下記コードでお試しください。(例えば、fetch_test.jsとして保存)

import { Pbf } from "https://taisukef.github.io/pbf/Pbf.js"; import { Tile } from "https://taisukef.github.io/pbf/bench/vector_tile.js"; const url = "https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/6/57/25.pbf"; const data = await (await fetch(url)).arrayBuffer(); const tile = Tile.read(new Pbf(data)); console.log(tile);

動かす

$ deno run --allow-net fetch_test.js

Denoは、Node.jsと違って、何もインストールしなくてもすぐ動かせて便利ですね!

pbfは、Googleが開発したバイナリ化規格 Protocol Buffers の軽量版として開発されたもので、その比較として登場していたので、protobuf-es.js としてついでにES対応。
taisukef/protobuf-es.js: Protocol Buffers for JavaScript (& TypeScript).
下記のようなコードで、protoファイルを使った読み込みなども試せます。

import { protobuf } from "https://taisukef.github.io/protobuf-es.js/dist/protobuf-es.js" const data = await Deno.readFile('../test/fixtures/12665.vector.pbf'); protobuf.load('vector_tile.proto', async (err, res) => { const tile = res.lookup('vector_tile.Tile'); const decoded = tile.decode(data); console.log("decode", decoded); const tileJSON = JSON.stringify(decoded); await Deno.writeTextFile("test-protobuf.json", tileJSON); });

24年前は全部自分で実装していたバイナリ化と地図表示。現代はオープンソースの力でサクサク進みますね!
オープンで楽しいオリジナル地図づくり、着々進行中。

10年前は無力でした。

開発現場や技術から離れ、企画、広報、マネジメント寄りだった10年前。未曾有の危機に、何も創れなかった自分が悔して、2011年12月、毎日ひとつ何か作ろうと決め達成。 その勢いで2012年1月1日、一日一創をFacebookで宣言、2013年からブログ化)。 つくり続けて10年目、できることと仲間が増えました。

Code for Japan 代表、関さんのブログ。
sinsai.info からの10年|Hal Seki|note
オープンデータが提唱されたのは2009年、世界にはすでにオープンデータがあったようです。2010年に鯖江市長に話し、実現したのが2012年1月。 震災時のデータ不足の反省が後押しとなりました。

データを利用者に届けるのはアプリ。いかに速く作れるかが勝負です。地図アプリを速く作るためのツール「egmapjs」をよりシンプルにしました。


全1470個所 いしぶみマップ - 京都市オープンデータ x egmapjs
本日、京都からプルリクいただき改善された「京都いしぶみマップ」を、ESモジュール化したegmapjsをベースに書き直し。 CSVオープンデータを読み込み、マーカー表示、Geo3x3を含む詳細表示まで、割と素直なプログラムになっています。

<script type=module> import { initMap, showHere, convertDMS2D } from "https://code4fukui.github.io/egmapjs/egmap.mjs"; import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import { Geo3x3 } from "https://taisukef.github.io/Geo3x3/Geo3x3.mjs"; window.onload = async () => { const map = initMap("mapid"); //const url = "https://data.city.kyoto.lg.jp/file/3969/download?token=Tka3iJPr"; // CORS err const url = "https://code4fukui.github.io/kyotoishibumi/ishibumi-data-281211.csv"; const data = CSV.toJSON(await CSV.fetch(url)); const lls = []; let cnt = 0; for (const c of data) { const d = { num: c["番号"], name: c["名称"], address: c["住所"], lat: c["北緯"], lng: c["東経"], }; if (!d.lat || !d.lng) { console.log("err: " + d.name + ", " + d.address + ", " + d.lat + ", " + d.lng) cnt++ continue } const [lat, lng] = convertDMS2D(d.lat, d.lng); const name = `<a href=https://www2.city.kyoto.lg.jp/somu/rekishi/fm/ishibumi/html/${d.num.toLowerCase()}.html target=_blank rel=noopener>${d.name}</a>`; const geo3x3 = Geo3x3.encode(lat, lng, 16); const geo3x3link = `Geo3x3: <a href=https://code4sabae.github.io/geo3x3-map/#${geo3x3} target=_blank>${geo3x3}</a>`; map.addIcon(lat, lng, [d.num, name, d.address, geo3x3link].join("<br>")); lls.push([lat, lng]); } console.log("緯度経度変換エラー数:" + cnt); map.fitBounds(lls); // 現在位置表示ボタン gotohere.onclick = showHere; }; </script>

いつ起きるかわからない災害。備えは十分とは言えません。
データと活用する力、蓄えておきましょう。

対策ダッシュボードで活躍中のカラム地図。小山さん呼びかけの、都道府県の市区町村カラム地図をぜんぶ作成するプロジェクト、多くの方の貢献により遂に全県制覇!まずは、シンプルなアプリづくり。

日本カラム地図
CSVオープンデータとしてまとめ、都道府県のカラム地図を辿れる、白カラム地図アプリを作成! JavaScriptを使ったシンプルでオープンソースなウェブアプリ、ご活用ください!


北海道カラム地図
北海道、すごい!ご自分の住んでいる町、位置関係など違和感ありませんか?


日本カラム地図 - Googleスプレッドシート」でも、コメント受け付けしています。


時間割ガチャ - 教材オープンデータから自動生成する時間割
有言実行!予告した以上の1日10動画ペースで更新が続く、福井県教育委員会による動画教材発信!「ふくいわくわく授業 | 福井県ホームページ
選んだコンテンツのみ、対象のみで「ガチャ」できるように改良しました!

プログラミングの経験が一切なくても5分で地図を使ったオリジナルアプリが無料で作れて、公開できます!

今年も開催、地理情報を楽しく活用するイベント「Geospatial Hackers Program
アプリづくりに興味がある方、G空間ハッカー、はじめのいっぽは簡単ですよっ!
総務省|令和元年度「Geospatial Hackers Program」の開催≪地理空間情報を活用可能な人材の裾野拡大に向けたハッカソン等の開催≫


こちらサンプルアプリ「京都いらすとマップ
準オープンデータとして紹介に使わせてもらっている「いらすとや」さんのイラストから京都で検索したG空間っぽいいらすとをアイコンとして緯度経度と合わせて設置しました。
全国、全世界のランドマークがかわいくマップにでて、詳細が辿れたりするのもおもしろそうですね!

どのように作ったか?
画像を icon フォルダにアップロード(Upload files)して、該当緯度経度や名前と共に addIcon 命令を並べるだけ!

map.setZoom(11) map.panTo([ 34.985234, 135.758595 ]) // 京都駅 map.addIcon(34.987522, 135.759335, "京都タワー", "icon/landmark_tower_kyoto.png", 64) map.addIcon(34.980837, 135.767639, "鴨川", "icon/thumbnail_bg_kamogawa.jpg", 64) map.addIcon(35.023115, 135.803829, "五山の送り火", "icon/landmark_gozan_okuribi.png", 64) map.addIcon(35.010324, 135.768301, "本能寺", "icon/landmark_honnouji.png", 64) map.addIcon(34.967021, 135.774746, "伏見稲荷の鳥居", "icon/landmark_fushimi_inari.png", 64) map.addIcon(34.988047, 135.771754, "三十三間堂", "icon/kankou_sanjusangendou.png", 64) map.addIcon(34.994875, 135.784959, "清水寺", "icon/kankou_kiyomizudera.png", 64) map.addIcon(35.039527, 135.728476, "金閣寺", "icon/kankou_kinkakuji.png", 64) map.addIcon(35.026885, 135.798276, "銀閣寺", "icon/kankou_ginkakuji.png", 64) map.addIcon(34.889282, 135.80766, "平等院鳳凰堂", "icon/kankou_byodoin.png", 64)

いろんな地図アプリづくりに慣れてきたら、5つ星オープンデータを操る、SPARQL(スパークル)にもぜひ挑戦してみてください。 まだまだデータが不足していますが、みなさんのアプリひとつひとつがデータ拡充への原動力です!

東海(2/1-2)、北陸(2/8-9)、関東(2/15-16)、沖縄(2/22-23)、各地イベントにもぜひ足を運んでみてください! 位置情報を使ってどんなアプリがあるとおもしろい!?みんなで考えて作ってみましょう!


ハンズオン資料はこちら「はじめてのマップアプリとSPARQL(スパークル)(PDF)
プログラミングの予備知識一切なしでOK、メールアドレスひとつあればどなたでも地図アプリ、作れます!
GitHubのアカウント取得から、サンプルアプリのコピー(GitHubではforkと呼ぶ)、ブラウザ上での編集、公開まで手取り足取り(ハンズオン)で解説しています。(詰まったら箇所、サポートしますので @taisukef までDMやメンションでお知らせください)


動画で学ぶ派の方向けに、都内スタジオにて解説動画、収録してきました!


カメラ目線でスライドが見える、プロンプターが便利でした!
近日、公開される予定です。
おたのしみに!

オープンデータなどを議論する、産官学コンソーシアムVLED利活用・普及委員会
内閣官房IT室からオープンデータの取組状況の報告、都道府県でのオープンデータ普及率、福井県が100%と現在単独ナンバーワン!

私からの情報提供として、オープンデータへの関心の高まりから、2017年につくった「緯度経度地図」の人気なことと、地図アプリは無料で簡単に作れること、G空間ハッカー養成講座開催をご紹介。 (Geospatial Hackers Program、鯖江開催 2/9-10

国土地理院の地理院地図とオープンソースなマップAPIである leafletjs との組み合わせをラップした「egmapjs」を使えば、初心者42でも簡単に地図アプリが作れます!

地理院地図をリニューアルしようと、シンプルに作り直してみたものがこちら(動かせます)

緯度経度表示 - egmapjs」 - src on GitHub
* 緯度経度地図2としてリニューアル

使いやすく育てていきたいと思います。ご意見・ご要望など、ぜひお寄せください。
GitHubのissueとして書き込んでいただく、Facebookでのコメント、Twitterなどでどうぞ!
もちろんGitHubからフォーク、プルリクなどもOKです!

ちなみに、地理院地図オリジナルがこちら(ちょっと色がキツイ)

これを、CSSフィルターでまろやかにカラーデザイン変更しています (src on GitHub)

filter: hue-rotate(-10deg) saturate(70%) brightness(104%);

ちなみにオープンストリートマップはこのようなカラーデザイン

Googleマップなど、いろいろ地図を見比べるとおもしろいです。

鯖江駅からめがね会館へは、徒歩で直線1km、12.5分(徒歩1分=80m)。
地理院地図で作図したルートを表示する、地理院地図をベースにしたアプリがこちら

めがね会館への道

このアプリ上でも右上の「機能」「ツール」「作図・ファイル」を選択すると誰でも地図上に作図やお絵かきができる。

作成した図はGeoJSONという形式で保存することができ、次のようなコードを書くか、GeoJSONのデータを直接プログラムに埋め込めば、地図への装飾完了!(GeoJSONファイル、めがね会館アイコンは保存後エディタで修正)

window.onload = function() { var map = GSI.GLOBALS.map; var url = "http://sabae.club/data/sabae/geojson/sabaest2megane.geojson"; getRawJSON(url, "utf-8", function(data) { var json = JSON.parse(data); var layer = new GSI.GeoJSON(null); layer.addData(json); map.addLayer(layer); var bounds = layer.getBounds(); map.fitBounds(bounds); }); };

このように、Googleマップでルートを探索すると、鯖江駅から東側への地下道データに入っていないため、遠回りな徒歩ルートが出てしまう。

探そう&埋めよう、データ不足による、機会損失!

国土地理院のオープンソースを使ったステキな地図アプリ「Retroscope」。
かつての江戸を東京の地図から覗き込むことができる。

そのまま鯖江に地図を移動させてみると、限定的ながら昔の航空写真があったので、鯖江カスタムをforkして作成。オープンソース&GitHub、すごい!


Retroscope Sabae

鯖江のオススメ観光地、西山公園、レッサーパンダの繁殖数日本一で、3/27にはレッサーパンダサミットも開催。
いろいろな催しがあったり、楽しく遊べる、中央の円形の広場、なんと昔は四角かった!(1974年)

田園風景広がる鯖江の歴史が感じられる。

URLに緯度経度が入るので、思い出の場所を簡単にシェアできます。
カスタマイズもご自由に!
Retroscope Sabae by Code for Fukui - GitHub

福井県のオープンデータを見てほしくなった、地域ごとの緯度経度データは、国土交通省によるオープンデータ「位置参照情報ダウンロードサービス」で解決しそうです。ひとまず、全国分のデータをダウンロードして表示するアプリを創ってみました。


「日本のまちビューワー」

意外と自分の住んでいるまち周辺の名前も知らないものですね。まちが密集してたり、スカスカだったりと分布具合も楽しめます。

もっと細かな街区レベルのデータもあって、今回初めて知った、住所を決めるアルゴリズムがおもしろかったので紹介します。住居表示(Wikipedia)によると、道で囲まれた街区の内、まちの中心に近い角を起点に、時計回りで10mずつ、1から順に番号を振っていき、玄関の場所が住所となるとのこと。

国交省データは残念ながら建物位置までのデータはありませんでした。その管理は地方自治体とのことなので、住居表示や地番のオープンデータに期待しましょう。

場所を指定すると言えば、現代の場合、緯度経度で玄関場所を指定するのが確実なので、昨年2012年に創った、Geo3x3とか、機会があれば流行らせてみたいところです。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS