地理空間情報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
Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
