デジタルの日、まだまだ足りない現実のデータ化。
近くにある建物をどう分類するといいでしょう?

デジタル庁のベース・レジストリとして整備される予定の行政基本情報データ連携モデルのPOIコード(Point of Interest)をJavaScriptのライブラリ、ウェブコンポーネントとして整理しました。 (参考、BaseRegistry/行政基本情報データ連携モデル-POIコード.md at main · code4fukui/BaseRegistry

select-poicode tag demosrc on GitHub
POIコードをディレクトリから調べたり(select-tree tag 使用)、一覧から検索したりできます。 これで足りない時はどうするか?みんなバラバラなコードにならないように、定義とアピールが大事です。

JavaScriptから使用する場合もこのように、簡単! import { POICode } from "https://code4fukui.github.io/POICode/POICode.js"; console.log(await POICode.encode("高等専門学校")); console.log(await POICode.decode("1508")); console.log(await POICode.find("学校")); 身の回りから整理してみましょう!
Let's go with digital!

学生x防犯・防災をテーマとしたjigインターン2021夏シーズン2の最終日、いよいよドキドキの成果発表会。シーズン1同様、4チームの発表と作品を1日ずつレビューしていきます。
シーズン2のみんな、おつかれさま!またねっ


トップバッター、シーズン2のCチーム、まつやま、りん、るーい


いざという時に重要な避難所ですが、普段はほとんど意識されません。そこで、中高生が楽しく避難所について学べるアプリ「鯖江スタンプラリー 散歩で覚える避難地図」


鯖江避難地図 src on GitHub
地図上に表示される赤いピンは鯖江市内の避難所です。現在位置をアイコンドラッグで仮に設定できるテストモードが便利な赤い「仮」アイコンがいい! 青い「駅」アイコンも目印としてわかりやすい。


スタンプギャラリーページでは自分で集めたスタンプが表示されます。 今回のスタンプとして活用されたのは、めがね会館もある鯖江市新横江地区の「新横江ふるさとカルタ


鯖江避難地図 - LeafletGSIバージョンsrc on GitHub
leaflet.mjs を使ってもっとシンプルに地図が使える LeafletGSI.js を用意して、leaflet版を作ってみました。写真のアップロードはできませんが、擬似的にスタンプはもらえるようにも改造してあります。

Googleマップは無料分付きの有料API、使用するにはAPIキーの登録が必要ですが、地理院地図+オープンソースな地図API、Leafletの組み合わせなら手軽に地図表示ができます。

避難所に関する写真をオープンデータとして集める仕組みとつなげて、実際歩いて試せるようにしてみたいですね。 避難所データはリポジトリ内にCSVファイルとしてありますが、各地のオープンデータから直接取得すると全国で使えるものにも改造できます。 オープンソース、やってみたい人は、誰でも好きな時にチャレンジできます。(src on GitHub)


ここ北陸、サイバーバレージャパンの最終金曜日はサイバーフライデー、月に一度の自分で作ったものの発表の場! ワクワクとドキドキの場、ご活用くださいっ(会場、鯖江商工会議所隣のコネクトフリー鯖江開発センター)


展示したり発表したり、いろんな意見をもらって改善したくなる楽しいループ!

Let's create!

Code for FUKUI x 越前市国高地区、地域安全プロジェクトで通学路を引いてみました。
紙地図からデータへ!その7つのステップを紹介します


1. 国交省国土地理院のオープンソース「地理院地図」を開き、上部のメニュー「ツール」、右側メニュー「作図・ファイル」を選択


2. 「作図・ファイル」ウィンドウ内の「/」アイコンを押して、線を引いていきましょう。ダブルクリックで終点、OKを押して確定です。


3. 引きたい線が引けたら「フロッピーディスクな保存」アイコンを押します


4. GeoJSON形式を選択し、「上記の内容で保存」


5. ファイル名を記入して「保存」(国高地区地域安全マップの通学路は schoolzone.geojson というファイル名です)


6. できたファイルをGitHubにアップするとプレビュー表示してくれます


7. 通学路表示ができました!(src on GitHub)


こちら、今回の線を引く元にした紙地図、拡大すると荒が目立ちます


もう少しちゃんとしたい!そんなときは、地理院地図で編集しましょう。
「読み込み」アイコンを選択肢、geojsonファイルをドロップするだけ!修正、追記など編集できます。


通学路と危険箇所情報と合わせて見ると分かりやすい!

GeoJSONを簡単に地図にできる拡張タグ geojson-map も作ってみました。

geojson-map demosrc on GitHub
src属性にgeojsonのURLを書くだけ簡単!(GeoJSONを直接タグ内に書いてもOK、GeoJSONのカスタマイズなどはソースとLeafletドキュメントを参照ください) <script type="module" src="https://code4fukui.github.io/geojson-map/geojson-map.js"></script> <geojson-map src="https://code4fukui.github.io/kunitaka/schoolzone.geojson"></geojson-map>


geojson-map [GitHub] — Visual Studio Code — GitHub
GitHubのリポジトリで「.(ドット)」を押すだけ、VSCodeのオンライン版ですぐ編集できるようになってました。ブラウザだけでそこそこ本格開発できそうです。


福井のシビックテックチーム「Code for FUKUI」へのご参画ください!
お披露目会しました!

links
- シビックテック x GitHubで作る「地域安全マップ」、こんな教材は古い!JavaScript編
- GitHubはじめのいっぽ、オリジナルマップアプリを創ろう - Code for FUKUI勉強会
- Let's Code for! サイトにQRコード、印刷時用レイアウト、画像読み込みを同期的に
- GitHubのCSVファイルらくらく編集ツール OpenID/GitHubログイン実験

鯖江の来週末、7/24(土)は第2回、さばぷら開催!
固定URLでJSONを返すAPI「data.json」を作ってくれたので、さばぷらマップをリアルタイム更新化しました。

さばぷらマップ」(src on GitHub)
空から視点のぐるぐる回る地図は、オープンソース「Adopt Geodata」プロジェクトを活用しています。 APIで取得したJSONを使って、柔軟にデータ構築できるように「地図語り」をバージョンアップ!(参考、custom.html

画面録画ツール「screen-recoder」を画面サイズ指定とカーソルON/OFFオプションを追加するバージョンアップ。より気軽に共有できるようになりました

画面録画ツール screen-recorder」(src on GitHub)

Code for FUKUIの初勉強会「GitHubはじめのいっぽ」


今回の会場は、越前市、中学生、高先生から社会人まで幅広く、11名で学びました。


GitHubはじめのいっぽ
スライドもオープンデータとして公開!題材として地域安全マップを使いましたが、ちょっとややこしかったので、もっとシンプルなものに更新。


マップアプリの元 - かんたんマップアプリ」(src on GitHub)
HTML1ファイルのみ、CSV形式でデータを加えると、マップとして反映するアプリです。 <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <script type="module" src="https://code4fukui.github.io/csv-map/csv-map.js"></script> <title>テストマップ</title> </head><body> <h1>テストマップ</h1> <csv-map> 名前,URL,geo3x3,photo ヨコガワ分店,https://volga-rice.jimdofree.com/,,volga-yokogawa.jpg サンドーム福井,http://www.sankan.jp/sundome/,E9138732236 福井高専,https://www.fukui-nct.ac.jp/,E9138732251953 </csv-map> </body> </html> こういうものはどうつくるといい? など、Issueもお気軽にどうぞ!

割と便利な、ウェブサイトへのかんたん地図組み込み、csv-mapタグmap-viewタグ。 マーカー色を指定したいとのご要望と合わせて、オープソースleaflet.spriteを教えていただいたので、ESモジュール化して対応。

csv-map tag demo
タグのcolor属性か、csvのcolor項目が、下記7色に該当すればその色のマーカーとなります。

colors: "blue", "green", "orange", "yellow", "red", "purple", "violet"

csv-map、CSVファイルのsrc属性での指定に加え、タグ内部へのCSV直接記述にも対応しました(参考HTML

leaflet.sprite-esは、Leaflet.mjsと組み合わせて、自在な地図アプリにも組み込めます。 import L from "https://code4sabae.github.io/leaflet-mjs/leaflet.mjs"; import { LeafletSprite } from "https://taisukef.github.io/leaflet.sprite-es/src/sprite.js"; LeafletSprite.init(L); // const color = "red"; const icon = L.spriteIcon(color) const marker = L.marker(latlng, { icon }); // ご活用ください!

csv-mapタグをベースに簡易化して、ウェブサイトにアクセス情報としての地図埋め込みに使う拡張タグ「map-viewタグ」を作りました。
map-view tag demo
name、緯度経度、zoomレベルを設定するだけでOK! <script type="module" src="https://code4fukui.github.io/map-view/map-view.js"></script> <map-view name="Hana道場" latlng="35.944571,136.186228" zoom="10"></map-view> サイトの表示優先なので、スクロールで地図が拡大縮小してしまうことがないように設定済み。
クリックするとGoogleマップのナビへリンクしています。

地図は日本国内を網羅する国土交通省、国土地理院の地理院地図
APIはオープンソースのLeafletをESモジュール化した、Leaflet.mjsです。

緯度経度付きのCSVデータを簡単に地図表示化するcsv-mapタグをバージョンアップ、位置情報付き写真でマッピングできるようにしました。(csv-map with exif-js on GitHub)

ふくいれきしまっぷ(仮)
ここで使っているCSVは、とってもシンプル、name, photo, url のみ(data.csv)
写真をGitHubにアップロードして、タイトルと関連URLを追記していくだけで地図上での整理ができます。

わずか2行のHTMLで、CSVデータをマップ表示できます <script type="module" src="https://code4fukui.github.io/csv-map/csv-map.js"></script> <csv-map height="80vh" src=./data.csv></csv-map> こちら、福井市東京事務所さんの縁で白鷺舎さんと始まった福井の歴史プロジェクト with Code for FUKUI、福井ゆかりの歴史スポットを写真と共に収集・公開予定。プルリクもぜひどうぞ!

GitHub? プルリク? という方、Code for FUKUIで研修も開催します!

気軽で多彩な共同作業&情報発信していきましょう!

緯度経度やGeo3x3の用に、地球上の場所を表す方法「ジオコードシステム」はいろいろあります。地理院地図でも参照可能な「場所情報コード/uPlace」を調べて実装、緯度経度地図に組み込みました。

緯度経度地図
マップを動かすとリアルタイムに緯度経度、Geo3x3、uPlaceが変わります。uPlaceは約3m単位で論理場所情報コードで表示しています。Geo3x3はこの地図での細かさに合わせてlevel20としています。

uPlace 場所情報コードは2種類あります。
1. シリアル付き場所情報コード、細かい緯度経度と所有者をデータベースに登録申請できます
2. 論理場所情報コード、申請不要で緯度経度と高さ情報で生成できます(精度約3m)

ブラウザとDenoで使えるESモジュールとして実装したので、下記のように簡単にエンコード、デコード可能です。(src on GitHub)

import { uPlace } from "https://taisukef.github.io/uPlace/uPlace.js"; const code = "00001B000000000309DF3925687B1D00"; const pos = uPlace.decode(code); console.log(pos); const code2 = uPlace.encode(35.942729, 136.198835, 8); // めがね会館8F console.log(code2);

3m精度で建物の階数指定できるので郵便や配達などにも便利そうです。

uPlaceは128bit/16byte/16進法32文字の ucode system の一種。 場所情報コードの仕様書を元に実装し、deno test でテストできるテストコード uPlace.test.js も書いたので割とちゃんと動きます。 (参考、テスト駆動開発(TDD)で安心、JavaScriptプログラミング!Denoでwebアプリ開発編

下記、uPlace.js内デコードする部分のJavaScriptのコードです。JavaScriptでのビット演算は32bitまでなので、緯度経度部分を分割するひと手間かけてます。

const decode = (code) => { if (!code || typeof code != "string" || code.length != 32) { throw new Error("not a ucode (hex encoded 32byte str)"); } const version = parseInt(code.substring(0, 1), 16); const tldcode = parseInt(code.substring(1, 1 + 4), 16); const classcode = parseInt(code.substring(1 + 4, 1 + 4 + 1), 16); const dc = parseInt(code.substring(1 + 4 + 1, 1 + 4 + 1 + 10), 16); const ic1 = parseInt(code.substring(1 + 4 + 1 + 10, 1 + 4 + 1 + 10 + 8), 16); const ic2 = parseInt(code.substring(1 + 4 + 1 + 10 + 8), 16); //console.log(version, tldcode, classcode, dc, ic1.toString(16), ic2.toString(16)); // .toString(16), ic) if (version != 0 || tldcode != 1 || classcode != 11 || dc != 3) { throw new Error("not a uPlace"); } const type = ic1 >>> (62 - 32); if (type != 0) { throw new Error("only supported type is 0"); } const south = (ic1 >> (61 - 32)) & 1; const latsec = (ic1 >> (1 + 23 + 8 + 1 + 6 - 32)) & 0x3fffff; // 22bit const west = (ic1 >> (23 + 8 + 1 + 6 - 32)) & 1; const lngsec = (((ic1 & 0x3f) << 17) | ((ic2 >>> (8 + 1 + 6)))) & 0x7fffff; // 23bit const levelx = (ic2 >> (1 + 6)) & 0xff; const level = levelx >= 0xfe ? levelx : levelx - 50; const levelmid = (ic2 >> 6) & 1; const serial = ic2 & 0x3f; const lat = latsec / (10 * 60 * 60) * (south ? -1 : 1); const lng = lngsec / (10 * 60 * 60) * (west ? -1 : 1); if (lat < -90 || lat > 90 || lng < -180 || lng > 180) { throw new Error("out of the earth"); } // console.log(type, south, latsec, lat, west, lngsec, lng, level, levelmid, serial); return { lat, lng, level, levelmid, serial }; };

32文字の固定長で長いプリフィックスがあるので、他のコードと間違いにくいところが結構いい感じです。 大まかに示したり、より高い精度で示すことはできないので、そんな場合はGeo3x3が便利です。 位置情報、DXしましょう!

2021/5/12、UNVT(国連ベクトルタイル)ワークショップ日本語版開催!
UNVTワークショップ日本語版 公開録画 | 512

さばえを楽しくまちあるき「さばぷら」がオープンデータ化された記念に、国連ベクトルタイルの派生プロジェクト「Adopt Geodata」の一環「a storytelling helper / 地図語り」を使ってみました。

さばぷらマップ」(src on GitHub)
ひとまずAPI替わりに download.js でスクレイピングし、geo3x3.csv で作成した位置情報を作成し、make.js で生成。


オリジナル地図作りを進めるため「オープンな地図と地図アプリの動かし方」を解析し、オープンストリートマップのデータ「JA:PBFフォーマット - OpenStreetMap Wiki / osm.pbf」の読み込みをESモジュール化。 base64-jsと、Bufferを移植し、osm-pbf-parserをESモジュール化した「OSMPBFParser.js」ができました。Denoでサクッと動かせます。

import { OSMPBFParser } from "https://taisukef.github.io/osm-pbf-parser/es/OSMPBFParser.js"; const parser = await new OSMPBFParser((items) => { console.log(items); }).init(); const url = "./test/extract.osm.pbf"; const file = await Deno.open(url); for await (const value of Deno.iter(file)) { parser.parse(value); } file.close();

こちら sh2 で紹介している、オープンストリートマップ(OSM)のデータダウンロード「Geofabrik Download Server」から、osm.pbf 形式のファイルをダウンロードして変換できます。(src on GitHub)

2021/5/12、UNVT(国連ベクトルタイル)ワークショップ日本語版開催!
UNVTワークショップ日本語版 公開録画 | 512

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