スレッド：観光マップの再開
観光マップの再開 投稿者：ゼロワン 投稿日：2015/09/26(Sat) 22:29:14 home No.748
はじめまして。
ゼロワンと申します。
今回のお尋ねは　”GPSログ表示”に関するものではないのですが、お力をお貸しいただけないでしょうか。

実は、数年前から電子国土WEBシステムを使った観光マップを配信していました。
ところが御存じの通り、今年の7月よりwebシステムが廃止になって、現状では地図が表示されなくなっています。

元々、プログラムは全くの素人で、数年かけていろんな方に教えて頂きながら、そして見よう見まねで作ったものです。しかし今回の変更で観光マップの配信はやめようと思い、そのままほったらかしにしてました。ところが、たまたま数名の方からぜひ再会をしてほしいという声を頂きました。

そこでできれば再開したいと思っていますが、なにぶん素人で、観光カテゴリ別にKMLファイルの作り方はわかるのですが、KLMを呼び出すソースと言うか、HTMLそのものの記述の仕方がよくわかりません。

もしよかったら、厚かましいお願いですがお力添えを頂けないでしょうか。
以上、よろしくお願いいたします。
Re: 観光マップの再開 投稿者：あにねこ 投稿日：2015/09/27(Sun) 01:47:24 No.749
ゼロワンさん、こんばんは。
KMLファイルが作成できれば、元がGPSログかそうでないかは、表示には関係ありませんので、
本HPの地理院地図版ルート地図で説明している方法で表示できるのではないかと思います。
（ただし、表示できるKMLファイルは1つにまとめて頂く必要があります。）
サンプルのHTMLファイルやJavaScriptファイルを用意していますので、
まずはそれを使って表示できるかどうかから始められては如何でしょうか。
何か不明な点がありましたら、この掲示板でお尋ね頂ければと思います。
宜しくお願い致します。
Re^2: 観光マップの再開 投稿者：ゼロワン 投稿日：2015/09/27(Sun) 10:25:25 home No.750
あにねこさん　おはようございます。
早速のご指導ありがとうございます。

そこでまたおたずねですが、以下のようなソースの中のどの部分にどういう形でKLMを呼び出すコードを記述すればいいのでしょうか。
尚、センター座標とズームレベルは変更してあります。
さらに、JSもCSSもまだよくわかってないので、とりあえずソース内に書いてみたいと思っています。

お手数をおかけしますが、よろしくお願いいたします。

----------------------------------------------------------
var projection3857 = new OpenLayers.Projection("EPSG:3857");
var projection4326 = new OpenLayers.Projection("EPSG:4326");
var map = new OpenLayers.Map({
div: "map",
projection: projection3857
});
map.addLayer(new OpenLayers.Layer.XYZ("標準地図",
"http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
maxZoomLevel: 18
}));
map.setCenter(new OpenLayers.LonLat(131.081657,33.110523)
.transform(projection4326, projection3857), 12);
-------------------------------------------------------------
Re^3: 観光マップの再開 投稿者：あにねこ 投稿日：2015/09/27(Sun) 16:49:13 No.751
ゼロワンさん、こんにちは。
KMLファイルを地理院地図の上に表示する方法は、
http://anineco.nyanta.jp/omap.html
で説明しています。
簡単にできるはずなので、まずはそちらを試して頂けませんか？

なお、KMLファイルを呼び出す方法ですが、
ダウンロードのページから、gpsweb-1.0.zip をダウンロードして展開すると、
js/omap.js というファイルがあり、この中にKMLファイルを呼び出す
JavaScriptコードが書かれていますので、これが参考になると思います。
具体的には下記の箇所です。

...(省略).....
var kmlLayer = new OpenLayers.Layer.Vector('GPSデータ', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: param.url,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(kmlLayer);
.....(省略).....

param.url は JavaScript の変数で、KMLファイルのURLを指定します。
js/omap.js はHTMLファイルから呼び出して使うことを前提に作っていますので、
書き換えは不要です。omap_ex1.html の方を次のように書き換えて下さい、

-----
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>地理院地図版ルート地図</title>
<script type="text/javascript" src="//map.jpn.org/sys/OpenLayers-2.13.1/OpenLayers.gsimaps.js"></script>
<script type="text/javascript" src="js/omap.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload = function() {
init_omap({
div: 'map_gsimap',
lon: 131.081657, lat: 33.110523, zoom: 12, ★ここを書き換える
url: 'example/routemap.kml'　★ここをKMLファイルのURL（ただし相対URLのみ）に書き換える
});
};
//]]></script>
</head>
<body>
<div id="map_gsimap" style="width: 640px; height: 480px;">
</div>
</body>
</html>
-----
Re^4: 観光マップの再開 投稿者：ゼロワン 投稿日：2015/09/28(Mon) 16:22:32 home No.752
あにねこさん
ありがとうございました。

ＤＬして自分のサーバーにあげてみました。
問題なく表示されました。
http:area-map.com/densi/omap_ex1.html

早速ご指導頂いたように簡単なＫＬＭを作り、ＨＴＭＬの書き換えを行って観光マップ用に作り変えてみたいと思います。
また、ご質問をさせて頂く事になるかと思いますので、よろしくお願いいたします。
Re^4: 観光マップの再開 投稿者：zerowan 投稿日：2015/09/29(Tue) 17:06:46 home No.753
あにねこさん
お世話になります。

<div id="map_gsimap" style="width: 100%; height: 480px;">
上記の箇所が　width: 100%　にはなるのですが、height: の部分が
"px"の指定は動くのですが、"%"指定で動きません。
どこに原因があるのでしょうか。

尚現状は以下の通りです。
<div id="map_gsimap" style="width:100% ; height:660px ;"></div>

お忙しいところお手数をおかけしますが、よろしくお願いいたします。
Re^5: 観光マップの再開 投稿者：あにねこ 投稿日：2015/09/29(Tue) 17:45:35 No.754
ゼロワンさん、こんにちは。
height で 100% を指定したい場合は、替わりに
position:absolute;top:0;bottom:0;
を指定するとうまくいくかも知れません。
うまくいかない場合は、上記に加えて html と body に
height:100%;
を指定してみてください。
Re^6: 観光マップの再開 投稿者：zerowan 投稿日：2015/09/29(Tue) 20:41:12 home No.755
あにねこさん
ありがとうございます。

前にも書きましたが、なにぶん素人でどこにどのように書けばいいのかがよくわかりません。

で、いろいろ調べてみましたが、” height”の指定は難しいですね。

height: 100vh;　が簡単だというのを見ましたので、実行してみましたが、PCのブラウザでは、ほぼ表示ができるようですが、スマホでは全く動きませんでした。

また、僕にでもできそうな簡単な方法がありましたら、ご教授をよろしくお願いいたします。

全くサイトの趣旨と違う事のお尋ねで申し訳ありません。
観光マップの再開 投稿者：ゼロワン 投稿日：2016/03/10(Thu) 10:00:35 home No.769
いろんな方の力を借りて、数カ月かけてようやくここまでできました。
まだまだ完ぺきではありませんが、やりたかった事はほぼできたような気がしています。
あにねこさん。いろいろとご指導ありがとうございました。

769.jpg

Re: 観光マップの再開 投稿者：あにねこ 投稿日：2016/03/13(Sun) 16:59:22 No.770
ゼロワンさん、こんにちは。
HPの観光マップ、素晴らしいですね。
阿蘇山には登山で行ったことがありますが、
うまいものや特産品の場所なども分かり易く、
また行くときには大変参考になりそうです。
拙HPの情報がお役に立てたようでしたら幸いです。

- WebForum -