地理空間情報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
[OpenLayers] OpenLayers によるOpenStreetMap の表示
作成日 2015年1月22日（木曜）10:38 | 最終更新日 2015年1月22日（木曜）17:24 | 作者: 森 純一 | 参照数: 317 バスロックの各クライアントでの地図表示には、OpenStreetMap を使っています。今まではAndroid の専用クライアントでの表示でしたが、ブラウザでも見れるようにしたいと考えています。 そこで、OpenStreetMap をブラウザで表示する方法を試してみました。具体的には、OpenLayers というライブラリを使って表示することになります。ここでは、OpenLayers を使ったOpenStreetMapの表示方法をまとめておきます。 OpenStreetMap について 実際の表示方法の前に、OpenStreetMap についてちょっとまとめておきます。OpenStreetMap というのは、 OpenStreetMap(OSM
![[OpenLayers] OpenLayers によるOpenStreetMap の表示](https://cdn-ak-scissors.b.st-hatena.com/image/square/aae1232f17bb34ce91aae47893e42055040bc989/height=288;version=1;width=512/http%3A%2F%2Fmori-soft.com%2Fplugins%2Fcontent%2Ffb_tw_plus1%2Flinkcmp.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
