ブログで、少しでも軽く制約のない地図として、前回、以下の記事を書いてみましたが、使っているうちに意外とHTMLを書くのが面倒だと言う事がわかりました。
『ブログ用地図を「OpenStreetMap＋Leaflet」で簡単に作成してみる』
そこで、少しでも簡単にならないかと思い、GPSデータがあれば自動的にHTMLコードを作成してくれるスクリプトを作ってみました。
使い方はOpenStreetMapでコピーしたGPSデータをそのまま、以下のテキスト入力画面に入力して変換ボタンを押して表示されたコードをそのままコピーして下さい。
GPSデータはOpenStreetMapだと「35.92474,139.48456」と言う形です。
画面イメージ
このページ上では動作しなかったので、以下のコードをコピーしてHTMLファイルとして保存してからブラウザで起動すると上記の画面が出てきます。
初心者のコードなのでJavaScriptの書き方が悪いのか、この「blogger」の仕様で動かないのかは良くわかりません(笑)
<head>
<title>GPSデータをLeafletへ</title>
</head>
<body>
<br>
<FORM>
[地図の中心のGPSデータ]<br>
GPS：<INPUT size="24" type="text" id="GPS0_y1"> 拡大率：<INPUT size="24" type="text" value="16" id="GPS0_x1"><br><br>
[説明ポイントのGPSデータと説明文]<br>
GPS：<INPUT size="24" type="text" id="GPS1_y0"> 説明文：<INPUT size="24" type="text" id="GPS1_x0"><br>
GPS：<INPUT size="24" type="text" id="GPS1_y1"> 説明文：<INPUT size="24" type="text" id="GPS1_x1"><br>
GPS：<INPUT size="24" type="text" id="GPS1_y2"> 説明文：<INPUT size="24" type="text" id="GPS1_x2"><br>
GPS：<INPUT size="24" type="text" id="GPS1_y3"> 説明文：<INPUT size="24" type="text" id="GPS1_x3"><br>
GPS：<INPUT size="24" type="text" id="GPS1_y4"> 説明文：<INPUT size="24" type="text" id="GPS1_x4"><br><br>
[連続折れ線用GPSデータ]：<br>
<INPUT size="20" type="text" id="GPS2_y0">⇒<INPUT size="20" type="text" id="GPS2_y1">⇒<INPUT size="20" type="text" id="GPS2_y2">⇒<br>
<INPUT size="20" type="text" id="GPS2_y3">⇒<INPUT size="20" type="text" id="GPS2_y4">⇒<INPUT size="20" type="text" id="GPS2_y5">⇒<br>
<INPUT size="20" type="text" id="GPS2_y6">⇒<INPUT size="20" type="text" id="GPS2_y7">⇒<INPUT size="20" type="text" id="GPS2_y8">⇒<br>
<INPUT size="20" type="text" id="GPS2_y9"><br>
線の色：<INPUT size="6" type="text" value="red" id="GPS2_x0"> 線の太さ：<INPUT size="6" type="text" value="6" id="GPS2_x1"> 透過率：<INPUT size="6" type="text" value="0.7" id="GPS2_x2"><br><br>
<INPUT type="button" value=" 変換 " onclick="mapData()">
</FORM>
<br>
****** ここの下のコードをコピー *****
<br>
<div id='OSM0' ></div>
<div id='OSM1' ></div><br>
<div id='OSM2' ></div>
<div id='OSM3' ></div>
*******************************
<br>
<script >
function mapData() {
var str1 = document.getElementById('GPS0_y1').value;
var str2 = document.getElementById('GPS0_x1').value;
var str3 = "var map = L.map('mapid').setView([" +str1+ "], " +str2+ ");";
var str4 = "var tiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '&amp;copy; &lt;a href=&quot;http://openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors' }); map.addLayer(tiles);"
if (str1=="") {;}
else {
document.getElementById('OSM0').innerHTML =str3;
document.getElementById('OSM1').innerHTML =str4;
}
var str3="";
for(i=0; i<5; i++) {
var str1 = document.getElementById('GPS1_y'+i).value;
if (str1=="") { break; }
var str2 = document.getElementById('GPS1_x'+i).value;
var str3 = str3+"L.marker(["+str1+"]).bindPopup(""+str2+"").addTo(map);"+"\n";
}
document.getElementById('OSM2').innerHTML =str3;
var str3="";
for(i=0; i<10; i++) {
var str1 = document.getElementById('GPS2_y'+i).value;
if (str1=="") { break; }
var str3 = str3+"["+str1 +"],"+"\n";
}
if (str3== "") { ;}
else {
var str4=document.getElementById('GPS2_x0').value;
var str5=document.getElementById('GPS2_x1').value;
var str6=document.getElementById('GPS2_x2').value;
str3=" L.polyline([" +str3+ "],{ 'color': '" +str4+ "', 'weight':" +str5+ ", 'opacity':" +str6+ "}).addTo(map);"
document.getElementById('OSM3').innerHTML =str3;
}
}
</script>
</body>
htmlファイルを立ち上げて、変換ボタンを押して表示される「この下のコードをコピー」下のHTMLコードをLeaflotコード内の以下の赤字の部分に置き換えます。
<div id="mapid" ></div>
<script>
var map = L.map('mapid').setView([35.9184,139.4827], 14);
var tiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors' });
map.addLayer(tiles);
L.marker([35.92474,139.48456]).bindPopup(”文字１”).addTo(map);
L.polyline([[35.92474,139.48456],[35.92338,139.48377],],{ "color": "red", "weight": 5, "opacity": 0.7}).addTo(map);
</script>
便利に使うにはブラウザのタブ機能を利用して、このページとOpenStreetMapのページを開いておいて、OSMのマーカーからGPSデータを取得し、その都度、このページでデータを入力して、最後に変換ボタンをクリックして、地図のHTMLコードを作成します。
大量に地図データを作る場合は、その都度、手でコードを書くよりはかなり効率よくHTMLコードが作成できると思います。
