地理空間情報Webアプリの開発(4) - 合同会社ミドリアイティ
前回までに、地理空間情報を活用したモバイルWebアプリケーションのサーバー環境を構築し、サーバー側プログラムを開発しました。 そこで今回は、簡単なクライアント側プログラムを開発します。 今回開発するプログラムは、現在地を中心としたOpenStreetMap上に、近くの応急給水拠点をマーカーで表示するというものです。 HTMLファイルの完全なリストは以下の通りです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>現在地近くの応急給水拠点</title> <style> html, body { padding: 0; margin: 0; height: 100%; } #mapdiv { height: 100%; width: 100%; } </style> <script type="text/javascri
Leaflet – OSMにgeoJSONでマーカーをつけたりできる便利なJavaScriptライブラリ
#map { height: 180px; } 地図のデフォルト値を設定して、描画する // 地図のデフォルトの緯度経度(51.505, -0.09)と拡大率(拡大レベル13) var map = L.map('map').setView([51.505, -0.09], 13); // 描画する(Copyrightは消しちゃダメよ) var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors, CC-BY-SA', maxZoom: 19 }); 特定の座標にマーカーを置く L.marker([50.5, 30.5]).addTo(map); 動作サンプル See the Pen raGPex by
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
