「map sample - leaflet.mjs」
jsからモダンなmjsへの移行、地理院地図で使える Leaflet をmjs対応させました。
日付解釈の dtcheckjp.mjs に続く第二弾、import を使った、すっきりシンプルに地図を使ったウェブアプリが簡単に作れます！
各地の高専生と開発進む、あるプロジェクト用に整備しましたが、地図の応用範囲は広大です。
<script type='module'> import L from 'https://code4sabae.github.io/leaflet-mjs/leaflet.mjs' window.onload = async function() { const data = [ { lat: 35.943560, lng: 136.188917, name: '鯖江駅' }, { lat: 35.944539, lng: 136.186222, name: 'Hana道場' }, { lat: 35.942795, lng: 136.198881, name: 'めがね会館' }, { lat: 35.949658, lng: 136.258142, name: 'JAPAN CRAFT HOUSE' }, ] const map = L.map('mapid') // set 国土地理院地図 https://maps.gsi.go.jp/development/ichiran.html L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>"', maxZoom: 18, }).addTo(map) let iconlayer = L.layerGroup() iconlayer.addTo(map) const lls = [] for (const item of data) { const ll = [ item.lat, item.lng ] const marker = L.marker(ll, { title: item.name }) marker.bindPopup(item.name) iconlayer.addLayer(marker) lls.push(ll) } if (lls.length) map.fitBounds(lls) } </script>
フロントエンド、バックエンド、それぞれどんな技術を使ってどうつくるか！？
チームで話し合って決めて進めます。弊社、現役エンジニアがメンターとなってサポートします。もちろん、私も！
キレイにリノベーションされた、広い古民家を使った共同生活＆レクチャー。
スクラムの一種、アジャイルを使ったチーム開発を実践で学ぼう！
最後にはしっかり成果発表！
Welcome to Sabae!
新型コロナウイルス対策で開発した、オープンソースなウェブアプリ、教材としてどうぞ！
- COVID-19 Japan - 都道府県別 新型コロナウイルス陽性患者数
- VS COVID-19 #民間支援情報ナビ
- 時間割ガチャ - 教材オープンデータから自動生成する時間割
- 日本カラム地図 - TabularMaps Japan
links
- 楽しく続けるチーム開発のススメ、jigインターン版「スクラム」とHTML8行で作るVRアプリ - 高専カンファレンス in 明石3
- jigintern2019のブログ
Fri Night
