$1');
- }
- // https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript
- function bindPop(feature, layer) {
- var altattrs = ["住所", "電話番号", "筆者", "撮影者"]
- var d = feature.properties.description||feature.properties.desc||'';
- var n = feature.properties.name||'';
- var r = "", term;
- for (var i=0; i\n" +
- ""+feature.properties[term]+" \n";
- }
- layer.bindPopup(
- ""+feature.properties.name + "
\n" +
- ""+wikiRepl(d)+"
\n"
- );
- }
-
- // HTML要素
- var info = document.getElementById("info"),
- update = document.getElementById("update"),
- undobtn = document.getElementById("undo"),
- loadbtn = document.getElementById("reload"),
- namefld = document.getElementById("name"),
- descfld = document.getElementById("desc"),
- rmbtn = document.getElementById("remove"),
- gpsbtn = document.getElementById("gps");
- function dispInfo(msg) {
- info.textContent = msg;
- }
- function modifyFlag(flag) {
- if (flag) {
- update.style.backgroundColor = 'pink';
- update.disabled = false;
- } else {
- update.style.backgroundColor = 'white';
- undopoint = false;
- update.disabled = true;
- }
- }
- function updateGJ(json) {
- function respond(str) {
- if (this.readyState == 4) {
- dispInfo("OK");
- }
- modifyFlag(false);
- }
- var newjson = {name: 'yuzasprings', val: json.toGeoJSON()};
- var val = JSON.stringify(newjson);
- if (val) {
- var conn = new XMLHttpRequest();
- conn.open('POST', './getgj.cgi');
- conn.setRequestHeader(
- 'Content-Type', 'application/x-www-form-urlencoded');
- conn.send(val);
- conn.onreadystatechange = respond;// イベントリスナ登録
- }
- }
- var undopoint = false;
- function undoMarker(e) {
- if (undopoint) {
- let marker = undopoint.marker,
- latlng = undopoint.latlng;
- marker.setLatLng(latlng);
- modifyFlag(false);
- }
- }
-
- // 初期化関数
- function init(logfile) {
- var baseLayer = {};
- var map_osm = new L.tileLayer( // OpenStretMap
- 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution : '© OpenStreetMap contributors | Generated with geomapper',
- maxZoom: 20, maxNativeZoom: 18
- });
- baseLayer["OpenStreetMap"] = map_osm;
-
- var map_gsi = new L.tileLayer( // 国土地理院
- 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
- attribution: "国土地理院",
- maxZoom: 20, maxNativeZoom: 18
- });
- baseLayer["地理院地図"] = map_gsi;
-
- var map_ort = new // 地理院オルソ
- L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
- attribution: "国土地理院",
- maxZoom: 20, maxNativeZoom: 18
- });
- baseLayer["地理院地図オルソ画像"] = map_ort;
- var map_gazo = new L.tileLayer( // 地理院画像1974-1978
- 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', {
- attribution: "国土地理院"
- });
- baseLayer["地理院画像(1974-1978)"] = map_gazo;
-
- if (L.BingLayer) {
- var bing_key =
- "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K";
- map_bing = new L.BingLayer( // BingMap
- bing_key, {type: "Road", culture: "ja",
- maxZoom: 20, maxNativeZoom: 18});
- baseLayer["Bing Map"] = new L.BingLayer(
- bing_key, {type: "Road", culture: "ja",
- maxZoom: 20, maxNativeZoom: 18});
- baseLayer["Bing Map 衛星写真"] = new L.BingLayer(
- bing_key, {type: "Aerial", culture: "ja",
- maxZoom: 20, maxNativeZoom: 18});
- var bing_dbl = baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer(
- bing_key, {type: "AerialWithLabels", culture: "ja",
- maxZoom: 20, maxNativeZoom: 18});
- }
- if (L.Google) {
- baseLayer["Google Map"] = new L.Google("ROADMAP");
- baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE');
- baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID');
- }
- var jsonmap = L.map('load-json', {layers: [map_ort]}).setView([38.273295,140.761600], 14);
- var mapControl = L.control.layers(baseLayer, null).addTo(jsonmap);
- var markerLayers = L.featureGroup();
-
- // GPS related
- var gpsIcon = L.icon({
- iconUrl: 'img/gpsmark.png',
- iconAnchor: [12,12]
- });
- var gpsmarker = null;
- function gps_error() {
- dispInfo("GPS信号取得失敗")
- }
- function gps_success(pos) {
- dispInfo("GPSお")
- var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
- jsonmap.panTo(latlng); // 地図の中心を取得した位置に
- if (!gpsmarker)
- gpsmarker = L.marker(latlng, {icon: gpsIcon}).addTo(jsonmap);
- else
- gpsmarker.setLatLng(latlng);
- dispInfo(latlng);
- gpsbtn.disabled = false;
- }
- gpsbtn.addEventListener('click', function() {
- gpsbtn.disabled = true;
- dispInfo("位置取得中...");
- navigator.geolocation.getCurrentPosition(gps_success, gps_error, {
- // enableHighAccuracy: true,
- timeout: 8000,
- maximumAge: 0000,
- });
- });
-
- var popupopenmarker = false;
- function updatePopup(e) {
- var elem = e.target;
- if (popupopenmarker) {
- let mk = popupopenmarker.marker,
- pr = popupopenmarker.props;
- pr.name = elem.value;
- let newmk = mk.toGeoJSON();
- newmk.properties.name = elem.value;
- alert(newmk.properties.name);
- gjl.addData(newmk);
- mk.remove(); // 古いマーカを消して入れ直す
- modifyFlag(true);
- }
- }
- function rmMarker(e) {
- var elem = e.target;
- if (popupopenmarker) {
- var mk = popupopenmarker.marker;
- //alert(mk);
- mk.removeFrom(gjl);
- mk.closePopup();
- mk.remove();
- modifyFlag(true);
- }
- }
-
- var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline|umap)/i;
- // var fnmatch = fileptn.exec(logfile);
- var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ
- onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点)
- let p = f.properties; // ごとに、プロパティを取り出し
- if (p) { // description(概要)を
- let name = p.name, desc = p.description;
- let popup = "" + name + "
" + "" + (desc||"") + "
";
- layer.bindPopup(popup); // ポップアップに設定する
- layer.bindTooltip(name);
- layer.options.draggable = true;
- layer.on('popupopen', function(e) { //ポップアップ開く時
- // If this marker is popupped
- //dispInfo(e.target.getPopup().getContent());
- // → にぎわいの水
- namefld.value = p.name;
- descfld.value = p.description||"";
- rmbtn.style.visibility = 'visible';
- popupopenmarker = {marker: layer, props: p};
- });
- layer.on('popupclose', function(e) {
- var newname = namefld.value,
- newdesc = descfld.value,
- marker = popupopenmarker.marker;
- var newmarker = marker.toGeoJSON();
- if (newmarker.properties.name != newname
- || newmarker.properties.description != newdesc) {
- newmarker.properties.name = newname;
- newmarker.properties.description = newdesc;
- marker.remove();
- gjl.addData(newmarker);
- modifyFlag(true);
- }
- namefld.value = '';
- descfld.value = '';
- rmbtn.style.visibility = 'hidden';
- popupopenmarker = null;
- });
- layer.on('dragstart', function(e) {
- undopoint = undopoint ||
- {marker: layer, latlng: layer.getLatLng()};
- });
- layer.on('dragend', function(e) {
- modifyFlag(true);
- });
- }
- }
- });
-
- // geojson外部ファイルの読み込みは次の行
- gjl = omnivore.geojson("./gj/yuzasprings.geojson", null, customLayer);
- // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
- update.addEventListener('click', function() {updateGJ(gjl)});
- undobtn.addEventListener('click', function(e) {undoMarker(e)});
- rmbtn.addEventListener('click', rmMarker);
- modifyFlag(false);
- function dispGJ() {
- var gj = gjl.toGeoJSON();
- var len = gj.features.length;
- info.textContent = len + ':' + JSON.stringify(gj);
- }
- gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理
- jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント
- dispGJ();
- });
- gjl.addTo(jsonmap); // マップに足す
- // L.control.layers(baseLayer, {"Triangle": gjl}).addTo(jsonmap);
-
-
-
- jsonmap.on('contextmenu', function(e) {
- if (e.originalEvent.shiftKey) {
- } else {
- var newmk = L.marker(e.latlng, {
- title: 'foo',
- draggable: true}),
- newgj = newmk.toGeoJSON();
- newmk.remove();
- newgj.properties.name = 'foo';
- newgj.properties.description = 'Point of foo';
- gjl.addData(newgj);
- dispInfo(JSON.stringify(newgj));
- modifyFlag(true);
- }
- });
- function reloadGJ() {
- function respond(str) {
- if (this.readyState == 4) {
- dispInfo("Reload OK");
- // https://github.com/Leaflet/Leaflet/issues/1416
- gjl.clearLayers();
- gjl.addData(JSON.parse(this.responseText));
- }
- modifyFlag(false);
- }
- var conn = new XMLHttpRequest();
- conn.open('GET', './catgj.cgi');
- conn.send(null);
- conn.onreadystatechange = respond;// イベントリスナ登録
- }
- loadbtn.addEventListener('click', reloadGJ);
- }
- init("foo");
-}();
diff --git a/omnivore/yuzasprings.geojson b/omnivore/yuzasprings.geojson
deleted file mode 100644
index f721581..0000000
--- a/omnivore/yuzasprings.geojson
+++ /dev/null
@@ -1,161 +0,0 @@
-{
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "properties": {
- "name": "かどっこの水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.914617,
- 39.014557
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "にぎわいの水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.912262,
- 39.015879
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "はっこちゃの水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.906372,
- 39.01635
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "ゆざっこの水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.910502,
- 39.01815
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "丸勝の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.916639,
- 39.015799
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "丸幸の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.90914,
- 39.019184
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "京屋の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.913582,
- 39.014257
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "光月堂の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.907917,
- 39.019275
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "八面川湧水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.907826,
- 39.015933
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "六日町の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.911393,
- 39.017892
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "礒兵衛の水"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.908185,
- 39.020609
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "name": "丸池様"
- },
- "geometry": {
- "type": "Point",
- "coordinates": [
- 139.891402,
- 39.072761
- ]
- }
- }
- ]
-}
\ No newline at end of file
diff --git a/yuza/.htaccess b/yuza/.htaccess
new file mode 100644
index 0000000..996d2c1
--- /dev/null
+++ b/yuza/.htaccess
@@ -0,0 +1 @@
+Options +ExecCGI
diff --git a/yuza/img/gpsmark.png b/yuza/img/gpsmark.png
new file mode 100644
index 0000000..c02c3d9
--- /dev/null
+++ b/yuza/img/gpsmark.png
Binary files differ
diff --git a/yuza/yuza.html b/yuza/yuza.html
new file mode 100644
index 0000000..228beb4
--- /dev/null
+++ b/yuza/yuza.html
@@ -0,0 +1,41 @@
+
+
+
+uMap GeoJSON
+
+
+
+
+
+
+
+
+
+
+
+遊佐湧水マップ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/yuza/yuza.js b/yuza/yuza.js
new file mode 100644
index 0000000..b0a23cf
--- /dev/null
+++ b/yuza/yuza.js
@@ -0,0 +1,301 @@
+// 例: GeoJSONファイルを leaflet-ajax でロードする
+
+var tmap =
+ tmap||
+ function()
+{
+ var colors = ["red", "green", "blue", "purple", "yellow", "cyan", "magenta"]
+ var gjl; // GeoJSON Layer : Globally used
+ function wikiRepl(s) {
+ return s.replace(/{{(.*)\|([0-9][0-9]*)}}/g,
+ '
').
+ replace(/{{(.*)}}/g, '').
+ replace(/\[\[(.*)\|(.*)\]\]/g, '$2').
+ replace(/\[\[(.*)\]\]/g, '$1').
+ replace(/^### (.*)/, '$1
').
+ replace(/^## (.*)/, '$1').
+ replace(/^# (.*)/, '$1');
+ }
+ // https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript
+ function bindPop(feature, layer) {
+ var altattrs = ["住所", "電話番号", "筆者", "撮影者"]
+ var d = feature.properties.description||feature.properties.desc||'';
+ var n = feature.properties.name||'';
+ var r = "", term;
+ for (var i=0; i\n" +
+ ""+feature.properties[term]+" \n";
+ }
+ layer.bindPopup(
+ ""+feature.properties.name + "
\n" +
+ ""+wikiRepl(d)+"
\n"
+ );
+ }
+
+ // HTML要素
+ var info = document.getElementById("info"),
+ update = document.getElementById("update"),
+ undobtn = document.getElementById("undo"),
+ loadbtn = document.getElementById("reload"),
+ namefld = document.getElementById("name"),
+ descfld = document.getElementById("desc"),
+ rmbtn = document.getElementById("remove"),
+ gpsbtn = document.getElementById("gps");
+ function dispInfo(msg) {
+ info.textContent = msg;
+ }
+ function modifyFlag(flag) {
+ if (flag) {
+ update.style.backgroundColor = 'pink';
+ update.disabled = false;
+ } else {
+ update.style.backgroundColor = 'white';
+ undopoint = false;
+ update.disabled = true;
+ }
+ }
+ function updateGJ(json) {
+ function respond(str) {
+ if (this.readyState == 4) {
+ dispInfo("OK");
+ }
+ modifyFlag(false);
+ }
+ var newjson = {name: 'yuzasprings', val: json.toGeoJSON()};
+ var val = JSON.stringify(newjson);
+ if (val) {
+ var conn = new XMLHttpRequest();
+ conn.open('POST', './getgj.cgi');
+ conn.setRequestHeader(
+ 'Content-Type', 'application/x-www-form-urlencoded');
+ conn.send(val);
+ conn.onreadystatechange = respond;// イベントリスナ登録
+ }
+ }
+ var undopoint = false;
+ function undoMarker(e) {
+ if (undopoint) {
+ let marker = undopoint.marker,
+ latlng = undopoint.latlng;
+ marker.setLatLng(latlng);
+ modifyFlag(false);
+ }
+ }
+
+ // 初期化関数
+ function init(logfile) {
+ var baseLayer = {};
+ var map_osm = new L.tileLayer( // OpenStretMap
+ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution : '© OpenStreetMap contributors | Generated with geomapper',
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["OpenStreetMap"] = map_osm;
+
+ var map_gsi = new L.tileLayer( // 国土地理院
+ 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+ attribution: "国土地理院",
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["地理院地図"] = map_gsi;
+
+ var map_ort = new // 地理院オルソ
+ L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
+ attribution: "国土地理院",
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["地理院地図オルソ画像"] = map_ort;
+ var map_gazo = new L.tileLayer( // 地理院画像1974-1978
+ 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', {
+ attribution: "国土地理院"
+ });
+ baseLayer["地理院画像(1974-1978)"] = map_gazo;
+
+ if (L.BingLayer) {
+ var bing_key =
+ "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K";
+ map_bing = new L.BingLayer( // BingMap
+ bing_key, {type: "Road", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ baseLayer["Bing Map"] = new L.BingLayer(
+ bing_key, {type: "Road", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ baseLayer["Bing Map 衛星写真"] = new L.BingLayer(
+ bing_key, {type: "Aerial", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ var bing_dbl = baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer(
+ bing_key, {type: "AerialWithLabels", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ }
+ if (L.Google) {
+ baseLayer["Google Map"] = new L.Google("ROADMAP");
+ baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE');
+ baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID');
+ }
+ var jsonmap = L.map('load-json', {layers: [map_ort]}).setView([38.273295,140.761600], 14);
+ var mapControl = L.control.layers(baseLayer, null).addTo(jsonmap);
+ var markerLayers = L.featureGroup();
+
+ // GPS related
+ var gpsIcon = L.icon({
+ iconUrl: 'img/gpsmark.png',
+ iconAnchor: [12,12]
+ });
+ var gpsmarker = null;
+ function gps_error() {
+ dispInfo("GPS信号取得失敗")
+ }
+ function gps_success(pos) {
+ dispInfo("GPSお")
+ var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
+ jsonmap.panTo(latlng); // 地図の中心を取得した位置に
+ if (!gpsmarker)
+ gpsmarker = L.marker(latlng, {icon: gpsIcon}).addTo(jsonmap);
+ else
+ gpsmarker.setLatLng(latlng);
+ dispInfo(latlng);
+ gpsbtn.disabled = false;
+ }
+ gpsbtn.addEventListener('click', function() {
+ gpsbtn.disabled = true;
+ dispInfo("位置取得中...");
+ navigator.geolocation.getCurrentPosition(gps_success, gps_error, {
+ // enableHighAccuracy: true,
+ timeout: 8000,
+ maximumAge: 0000,
+ });
+ });
+
+ var popupopenmarker = false;
+ function updatePopup(e) {
+ var elem = e.target;
+ if (popupopenmarker) {
+ let mk = popupopenmarker.marker,
+ pr = popupopenmarker.props;
+ pr.name = elem.value;
+ let newmk = mk.toGeoJSON();
+ newmk.properties.name = elem.value;
+ alert(newmk.properties.name);
+ gjl.addData(newmk);
+ mk.remove(); // 古いマーカを消して入れ直す
+ modifyFlag(true);
+ }
+ }
+ function rmMarker(e) {
+ var elem = e.target;
+ if (popupopenmarker) {
+ var mk = popupopenmarker.marker;
+ //alert(mk);
+ mk.removeFrom(gjl);
+ mk.closePopup();
+ mk.remove();
+ modifyFlag(true);
+ }
+ }
+
+ var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline|umap)/i;
+ // var fnmatch = fileptn.exec(logfile);
+ var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ
+ onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点)
+ let p = f.properties; // ごとに、プロパティを取り出し
+ if (p) { // description(概要)を
+ let name = p.name, desc = p.description;
+ let popup = "" + name + "
" + "" + (desc||"") + "
";
+ layer.bindPopup(popup); // ポップアップに設定する
+ layer.bindTooltip(name);
+ layer.options.draggable = true;
+ layer.on('popupopen', function(e) { //ポップアップ開く時
+ // If this marker is popupped
+ //dispInfo(e.target.getPopup().getContent());
+ // → にぎわいの水
+ namefld.value = p.name;
+ descfld.value = p.description||"";
+ rmbtn.style.visibility = 'visible';
+ popupopenmarker = {marker: layer, props: p};
+ });
+ layer.on('popupclose', function(e) {
+ var newname = namefld.value,
+ newdesc = descfld.value,
+ marker = popupopenmarker.marker;
+ var newmarker = marker.toGeoJSON();
+ if (newmarker.properties.name != newname
+ || newmarker.properties.description != newdesc) {
+ newmarker.properties.name = newname;
+ newmarker.properties.description = newdesc;
+ marker.remove();
+ gjl.addData(newmarker);
+ modifyFlag(true);
+ }
+ namefld.value = '';
+ descfld.value = '';
+ rmbtn.style.visibility = 'hidden';
+ popupopenmarker = null;
+ });
+ layer.on('dragstart', function(e) {
+ undopoint = undopoint ||
+ {marker: layer, latlng: layer.getLatLng()};
+ });
+ layer.on('dragend', function(e) {
+ modifyFlag(true);
+ });
+ }
+ }
+ });
+
+ // geojson外部ファイルの読み込みは次の行
+ gjl = omnivore.geojson("./gj/yuzasprings.geojson", null, customLayer);
+ // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
+ update.addEventListener('click', function() {updateGJ(gjl)});
+ undobtn.addEventListener('click', function(e) {undoMarker(e)});
+ rmbtn.addEventListener('click', rmMarker);
+ modifyFlag(false);
+ function dispGJ() {
+ var gj = gjl.toGeoJSON();
+ var len = gj.features.length;
+ info.textContent = len + ':' + JSON.stringify(gj);
+ }
+ gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理
+ jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント
+ dispGJ();
+ });
+ gjl.addTo(jsonmap); // マップに足す
+ // L.control.layers(baseLayer, {"Triangle": gjl}).addTo(jsonmap);
+
+
+
+ jsonmap.on('contextmenu', function(e) {
+ if (e.originalEvent.shiftKey) {
+ } else {
+ var newmk = L.marker(e.latlng, {
+ title: 'foo',
+ draggable: true}),
+ newgj = newmk.toGeoJSON();
+ newmk.remove();
+ newgj.properties.name = 'foo';
+ newgj.properties.description = 'Point of foo';
+ gjl.addData(newgj);
+ dispInfo(JSON.stringify(newgj));
+ modifyFlag(true);
+ }
+ });
+ function reloadGJ() {
+ function respond(str) {
+ if (this.readyState == 4) {
+ dispInfo("Reload OK");
+ // https://github.com/Leaflet/Leaflet/issues/1416
+ gjl.clearLayers();
+ gjl.addData(JSON.parse(this.responseText));
+ }
+ modifyFlag(false);
+ }
+ var conn = new XMLHttpRequest();
+ conn.open('GET', './catgj.cgi');
+ conn.send(null);
+ conn.onreadystatechange = respond;// イベントリスナ登録
+ }
+ loadbtn.addEventListener('click', reloadGJ);
+ }
+ init("foo");
+}();
diff --git a/yuza/yuzasprings.geojson b/yuza/yuzasprings.geojson
new file mode 100644
index 0000000..f721581
--- /dev/null
+++ b/yuza/yuzasprings.geojson
@@ -0,0 +1,161 @@
+{
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "かどっこの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.914617,
+ 39.014557
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "にぎわいの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.912262,
+ 39.015879
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "はっこちゃの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.906372,
+ 39.01635
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "ゆざっこの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.910502,
+ 39.01815
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸勝の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.916639,
+ 39.015799
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸幸の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.90914,
+ 39.019184
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "京屋の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.913582,
+ 39.014257
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "光月堂の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.907917,
+ 39.019275
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "八面川湧水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.907826,
+ 39.015933
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "六日町の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.911393,
+ 39.017892
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "礒兵衛の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.908185,
+ 39.020609
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸池様"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.891402,
+ 39.072761
+ ]
+ }
+ }
+ ]
+}
\ No newline at end of file
"+feature.properties.name + "
\n" + - ""+wikiRepl(d)+"
\n" - ); - } - - // HTML要素 - var info = document.getElementById("info"), - update = document.getElementById("update"), - undobtn = document.getElementById("undo"), - loadbtn = document.getElementById("reload"), - namefld = document.getElementById("name"), - descfld = document.getElementById("desc"), - rmbtn = document.getElementById("remove"), - gpsbtn = document.getElementById("gps"); - function dispInfo(msg) { - info.textContent = msg; - } - function modifyFlag(flag) { - if (flag) { - update.style.backgroundColor = 'pink'; - update.disabled = false; - } else { - update.style.backgroundColor = 'white'; - undopoint = false; - update.disabled = true; - } - } - function updateGJ(json) { - function respond(str) { - if (this.readyState == 4) { - dispInfo("OK"); - } - modifyFlag(false); - } - var newjson = {name: 'yuzasprings', val: json.toGeoJSON()}; - var val = JSON.stringify(newjson); - if (val) { - var conn = new XMLHttpRequest(); - conn.open('POST', './getgj.cgi'); - conn.setRequestHeader( - 'Content-Type', 'application/x-www-form-urlencoded'); - conn.send(val); - conn.onreadystatechange = respond;// イベントリスナ登録 - } - } - var undopoint = false; - function undoMarker(e) { - if (undopoint) { - let marker = undopoint.marker, - latlng = undopoint.latlng; - marker.setLatLng(latlng); - modifyFlag(false); - } - } - - // 初期化関数 - function init(logfile) { - var baseLayer = {}; - var map_osm = new L.tileLayer( // OpenStretMap - 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution : '© OpenStreetMap contributors | Generated with geomapper', - maxZoom: 20, maxNativeZoom: 18 - }); - baseLayer["OpenStreetMap"] = map_osm; - - var map_gsi = new L.tileLayer( // 国土地理院 - 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { - attribution: "国土地理院", - maxZoom: 20, maxNativeZoom: 18 - }); - baseLayer["地理院地図"] = map_gsi; - - var map_ort = new // 地理院オルソ - L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { - attribution: "国土地理院", - maxZoom: 20, maxNativeZoom: 18 - }); - baseLayer["地理院地図オルソ画像"] = map_ort; - var map_gazo = new L.tileLayer( // 地理院画像1974-1978 - 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', { - attribution: "国土地理院" - }); - baseLayer["地理院画像(1974-1978)"] = map_gazo; - - if (L.BingLayer) { - var bing_key = - "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K"; - map_bing = new L.BingLayer( // BingMap - bing_key, {type: "Road", culture: "ja", - maxZoom: 20, maxNativeZoom: 18}); - baseLayer["Bing Map"] = new L.BingLayer( - bing_key, {type: "Road", culture: "ja", - maxZoom: 20, maxNativeZoom: 18}); - baseLayer["Bing Map 衛星写真"] = new L.BingLayer( - bing_key, {type: "Aerial", culture: "ja", - maxZoom: 20, maxNativeZoom: 18}); - var bing_dbl = baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer( - bing_key, {type: "AerialWithLabels", culture: "ja", - maxZoom: 20, maxNativeZoom: 18}); - } - if (L.Google) { - baseLayer["Google Map"] = new L.Google("ROADMAP"); - baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE'); - baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID'); - } - var jsonmap = L.map('load-json', {layers: [map_ort]}).setView([38.273295,140.761600], 14); - var mapControl = L.control.layers(baseLayer, null).addTo(jsonmap); - var markerLayers = L.featureGroup(); - - // GPS related - var gpsIcon = L.icon({ - iconUrl: 'img/gpsmark.png', - iconAnchor: [12,12] - }); - var gpsmarker = null; - function gps_error() { - dispInfo("GPS信号取得失敗") - } - function gps_success(pos) { - dispInfo("GPSお") - var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); - jsonmap.panTo(latlng); // 地図の中心を取得した位置に - if (!gpsmarker) - gpsmarker = L.marker(latlng, {icon: gpsIcon}).addTo(jsonmap); - else - gpsmarker.setLatLng(latlng); - dispInfo(latlng); - gpsbtn.disabled = false; - } - gpsbtn.addEventListener('click', function() { - gpsbtn.disabled = true; - dispInfo("位置取得中..."); - navigator.geolocation.getCurrentPosition(gps_success, gps_error, { - // enableHighAccuracy: true, - timeout: 8000, - maximumAge: 0000, - }); - }); - - var popupopenmarker = false; - function updatePopup(e) { - var elem = e.target; - if (popupopenmarker) { - let mk = popupopenmarker.marker, - pr = popupopenmarker.props; - pr.name = elem.value; - let newmk = mk.toGeoJSON(); - newmk.properties.name = elem.value; - alert(newmk.properties.name); - gjl.addData(newmk); - mk.remove(); // 古いマーカを消して入れ直す - modifyFlag(true); - } - } - function rmMarker(e) { - var elem = e.target; - if (popupopenmarker) { - var mk = popupopenmarker.marker; - //alert(mk); - mk.removeFrom(gjl); - mk.closePopup(); - mk.remove(); - modifyFlag(true); - } - } - - var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline|umap)/i; - // var fnmatch = fileptn.exec(logfile); - var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ - onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点) - let p = f.properties; // ごとに、プロパティを取り出し - if (p) { // description(概要)を - let name = p.name, desc = p.description; - let popup = "" + name + "
" + "" + (desc||"") + "
"; - layer.bindPopup(popup); // ポップアップに設定する - layer.bindTooltip(name); - layer.options.draggable = true; - layer.on('popupopen', function(e) { //ポップアップ開く時 - // If this marker is popupped - //dispInfo(e.target.getPopup().getContent()); - // →にぎわいの水
- namefld.value = p.name; - descfld.value = p.description||""; - rmbtn.style.visibility = 'visible'; - popupopenmarker = {marker: layer, props: p}; - }); - layer.on('popupclose', function(e) { - var newname = namefld.value, - newdesc = descfld.value, - marker = popupopenmarker.marker; - var newmarker = marker.toGeoJSON(); - if (newmarker.properties.name != newname - || newmarker.properties.description != newdesc) { - newmarker.properties.name = newname; - newmarker.properties.description = newdesc; - marker.remove(); - gjl.addData(newmarker); - modifyFlag(true); - } - namefld.value = ''; - descfld.value = ''; - rmbtn.style.visibility = 'hidden'; - popupopenmarker = null; - }); - layer.on('dragstart', function(e) { - undopoint = undopoint || - {marker: layer, latlng: layer.getLatLng()}; - }); - layer.on('dragend', function(e) { - modifyFlag(true); - }); - } - } - }); - - // geojson外部ファイルの読み込みは次の行 - gjl = omnivore.geojson("./gj/yuzasprings.geojson", null, customLayer); - // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ - update.addEventListener('click', function() {updateGJ(gjl)}); - undobtn.addEventListener('click', function(e) {undoMarker(e)}); - rmbtn.addEventListener('click', rmMarker); - modifyFlag(false); - function dispGJ() { - var gj = gjl.toGeoJSON(); - var len = gj.features.length; - info.textContent = len + ':' + JSON.stringify(gj); - } - gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理 - jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント - dispGJ(); - }); - gjl.addTo(jsonmap); // マップに足す - // L.control.layers(baseLayer, {"Triangle": gjl}).addTo(jsonmap); - - - - jsonmap.on('contextmenu', function(e) { - if (e.originalEvent.shiftKey) { - } else { - var newmk = L.marker(e.latlng, { - title: 'foo', - draggable: true}), - newgj = newmk.toGeoJSON(); - newmk.remove(); - newgj.properties.name = 'foo'; - newgj.properties.description = 'Point of foo'; - gjl.addData(newgj); - dispInfo(JSON.stringify(newgj)); - modifyFlag(true); - } - }); - function reloadGJ() { - function respond(str) { - if (this.readyState == 4) { - dispInfo("Reload OK"); - // https://github.com/Leaflet/Leaflet/issues/1416 - gjl.clearLayers(); - gjl.addData(JSON.parse(this.responseText)); - } - modifyFlag(false); - } - var conn = new XMLHttpRequest(); - conn.open('GET', './catgj.cgi'); - conn.send(null); - conn.onreadystatechange = respond;// イベントリスナ登録 - } - loadbtn.addEventListener('click', reloadGJ); - } - init("foo"); -}(); diff --git a/omnivore/yuzasprings.geojson b/omnivore/yuzasprings.geojson deleted file mode 100644 index f721581..0000000 --- a/omnivore/yuzasprings.geojson +++ /dev/null @@ -1,161 +0,0 @@ -{ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": { - "name": "かどっこの水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.914617, - 39.014557 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "にぎわいの水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.912262, - 39.015879 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "はっこちゃの水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.906372, - 39.01635 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "ゆざっこの水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.910502, - 39.01815 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "丸勝の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.916639, - 39.015799 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "丸幸の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.90914, - 39.019184 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "京屋の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.913582, - 39.014257 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "光月堂の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.907917, - 39.019275 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "八面川湧水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.907826, - 39.015933 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "六日町の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.911393, - 39.017892 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "礒兵衛の水" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.908185, - 39.020609 - ] - } - }, - { - "type": "Feature", - "properties": { - "name": "丸池様" - }, - "geometry": { - "type": "Point", - "coordinates": [ - 139.891402, - 39.072761 - ] - } - } - ] -} \ No newline at end of file diff --git a/yuza/.htaccess b/yuza/.htaccess new file mode 100644 index 0000000..996d2c1 --- /dev/null +++ b/yuza/.htaccess @@ -0,0 +1 @@ +Options +ExecCGI diff --git a/yuza/img/gpsmark.png b/yuza/img/gpsmark.png new file mode 100644 index 0000000..c02c3d9 --- /dev/null +++ b/yuza/img/gpsmark.png Binary files differ diff --git a/yuza/yuza.html b/yuza/yuza.html new file mode 100644 index 0000000..228beb4 --- /dev/null +++ b/yuza/yuza.html @@ -0,0 +1,41 @@ + + + +遊佐湧水マップ
+
+
+
+
+
+
+
+
$1
'). + replace(/^## (.*)/, '$1').
+ replace(/^# (.*)/, '$1');
+ }
+ // https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript
+ function bindPop(feature, layer) {
+ var altattrs = ["住所", "電話番号", "筆者", "撮影者"]
+ var d = feature.properties.description||feature.properties.desc||'';
+ var n = feature.properties.name||'';
+ var r = "", term;
+ for (var i=0; i\n" +
+ ""+feature.properties[term]+" \n";
+ }
+ layer.bindPopup(
+ ""+feature.properties.name + "
\n" +
+ ""+wikiRepl(d)+"
\n"
+ );
+ }
+
+ // HTML要素
+ var info = document.getElementById("info"),
+ update = document.getElementById("update"),
+ undobtn = document.getElementById("undo"),
+ loadbtn = document.getElementById("reload"),
+ namefld = document.getElementById("name"),
+ descfld = document.getElementById("desc"),
+ rmbtn = document.getElementById("remove"),
+ gpsbtn = document.getElementById("gps");
+ function dispInfo(msg) {
+ info.textContent = msg;
+ }
+ function modifyFlag(flag) {
+ if (flag) {
+ update.style.backgroundColor = 'pink';
+ update.disabled = false;
+ } else {
+ update.style.backgroundColor = 'white';
+ undopoint = false;
+ update.disabled = true;
+ }
+ }
+ function updateGJ(json) {
+ function respond(str) {
+ if (this.readyState == 4) {
+ dispInfo("OK");
+ }
+ modifyFlag(false);
+ }
+ var newjson = {name: 'yuzasprings', val: json.toGeoJSON()};
+ var val = JSON.stringify(newjson);
+ if (val) {
+ var conn = new XMLHttpRequest();
+ conn.open('POST', './getgj.cgi');
+ conn.setRequestHeader(
+ 'Content-Type', 'application/x-www-form-urlencoded');
+ conn.send(val);
+ conn.onreadystatechange = respond;// イベントリスナ登録
+ }
+ }
+ var undopoint = false;
+ function undoMarker(e) {
+ if (undopoint) {
+ let marker = undopoint.marker,
+ latlng = undopoint.latlng;
+ marker.setLatLng(latlng);
+ modifyFlag(false);
+ }
+ }
+
+ // 初期化関数
+ function init(logfile) {
+ var baseLayer = {};
+ var map_osm = new L.tileLayer( // OpenStretMap
+ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution : '© OpenStreetMap contributors | Generated with geomapper',
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["OpenStreetMap"] = map_osm;
+
+ var map_gsi = new L.tileLayer( // 国土地理院
+ 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+ attribution: "国土地理院",
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["地理院地図"] = map_gsi;
+
+ var map_ort = new // 地理院オルソ
+ L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
+ attribution: "国土地理院",
+ maxZoom: 20, maxNativeZoom: 18
+ });
+ baseLayer["地理院地図オルソ画像"] = map_ort;
+ var map_gazo = new L.tileLayer( // 地理院画像1974-1978
+ 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', {
+ attribution: "国土地理院"
+ });
+ baseLayer["地理院画像(1974-1978)"] = map_gazo;
+
+ if (L.BingLayer) {
+ var bing_key =
+ "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K";
+ map_bing = new L.BingLayer( // BingMap
+ bing_key, {type: "Road", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ baseLayer["Bing Map"] = new L.BingLayer(
+ bing_key, {type: "Road", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ baseLayer["Bing Map 衛星写真"] = new L.BingLayer(
+ bing_key, {type: "Aerial", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ var bing_dbl = baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer(
+ bing_key, {type: "AerialWithLabels", culture: "ja",
+ maxZoom: 20, maxNativeZoom: 18});
+ }
+ if (L.Google) {
+ baseLayer["Google Map"] = new L.Google("ROADMAP");
+ baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE');
+ baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID');
+ }
+ var jsonmap = L.map('load-json', {layers: [map_ort]}).setView([38.273295,140.761600], 14);
+ var mapControl = L.control.layers(baseLayer, null).addTo(jsonmap);
+ var markerLayers = L.featureGroup();
+
+ // GPS related
+ var gpsIcon = L.icon({
+ iconUrl: 'img/gpsmark.png',
+ iconAnchor: [12,12]
+ });
+ var gpsmarker = null;
+ function gps_error() {
+ dispInfo("GPS信号取得失敗")
+ }
+ function gps_success(pos) {
+ dispInfo("GPSお")
+ var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
+ jsonmap.panTo(latlng); // 地図の中心を取得した位置に
+ if (!gpsmarker)
+ gpsmarker = L.marker(latlng, {icon: gpsIcon}).addTo(jsonmap);
+ else
+ gpsmarker.setLatLng(latlng);
+ dispInfo(latlng);
+ gpsbtn.disabled = false;
+ }
+ gpsbtn.addEventListener('click', function() {
+ gpsbtn.disabled = true;
+ dispInfo("位置取得中...");
+ navigator.geolocation.getCurrentPosition(gps_success, gps_error, {
+ // enableHighAccuracy: true,
+ timeout: 8000,
+ maximumAge: 0000,
+ });
+ });
+
+ var popupopenmarker = false;
+ function updatePopup(e) {
+ var elem = e.target;
+ if (popupopenmarker) {
+ let mk = popupopenmarker.marker,
+ pr = popupopenmarker.props;
+ pr.name = elem.value;
+ let newmk = mk.toGeoJSON();
+ newmk.properties.name = elem.value;
+ alert(newmk.properties.name);
+ gjl.addData(newmk);
+ mk.remove(); // 古いマーカを消して入れ直す
+ modifyFlag(true);
+ }
+ }
+ function rmMarker(e) {
+ var elem = e.target;
+ if (popupopenmarker) {
+ var mk = popupopenmarker.marker;
+ //alert(mk);
+ mk.removeFrom(gjl);
+ mk.closePopup();
+ mk.remove();
+ modifyFlag(true);
+ }
+ }
+
+ var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline|umap)/i;
+ // var fnmatch = fileptn.exec(logfile);
+ var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ
+ onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点)
+ let p = f.properties; // ごとに、プロパティを取り出し
+ if (p) { // description(概要)を
+ let name = p.name, desc = p.description;
+ let popup = "" + name + "
" + "" + (desc||"") + "
";
+ layer.bindPopup(popup); // ポップアップに設定する
+ layer.bindTooltip(name);
+ layer.options.draggable = true;
+ layer.on('popupopen', function(e) { //ポップアップ開く時
+ // If this marker is popupped
+ //dispInfo(e.target.getPopup().getContent());
+ // → にぎわいの水
+ namefld.value = p.name;
+ descfld.value = p.description||"";
+ rmbtn.style.visibility = 'visible';
+ popupopenmarker = {marker: layer, props: p};
+ });
+ layer.on('popupclose', function(e) {
+ var newname = namefld.value,
+ newdesc = descfld.value,
+ marker = popupopenmarker.marker;
+ var newmarker = marker.toGeoJSON();
+ if (newmarker.properties.name != newname
+ || newmarker.properties.description != newdesc) {
+ newmarker.properties.name = newname;
+ newmarker.properties.description = newdesc;
+ marker.remove();
+ gjl.addData(newmarker);
+ modifyFlag(true);
+ }
+ namefld.value = '';
+ descfld.value = '';
+ rmbtn.style.visibility = 'hidden';
+ popupopenmarker = null;
+ });
+ layer.on('dragstart', function(e) {
+ undopoint = undopoint ||
+ {marker: layer, latlng: layer.getLatLng()};
+ });
+ layer.on('dragend', function(e) {
+ modifyFlag(true);
+ });
+ }
+ }
+ });
+
+ // geojson外部ファイルの読み込みは次の行
+ gjl = omnivore.geojson("./gj/yuzasprings.geojson", null, customLayer);
+ // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
+ update.addEventListener('click', function() {updateGJ(gjl)});
+ undobtn.addEventListener('click', function(e) {undoMarker(e)});
+ rmbtn.addEventListener('click', rmMarker);
+ modifyFlag(false);
+ function dispGJ() {
+ var gj = gjl.toGeoJSON();
+ var len = gj.features.length;
+ info.textContent = len + ':' + JSON.stringify(gj);
+ }
+ gjl.on("ready", function() { // 'ready' イベントに読み終わったときの処理
+ jsonmap.fitBounds(gjl.getBounds()); // 読み取り失敗時は 'error' イベント
+ dispGJ();
+ });
+ gjl.addTo(jsonmap); // マップに足す
+ // L.control.layers(baseLayer, {"Triangle": gjl}).addTo(jsonmap);
+
+
+
+ jsonmap.on('contextmenu', function(e) {
+ if (e.originalEvent.shiftKey) {
+ } else {
+ var newmk = L.marker(e.latlng, {
+ title: 'foo',
+ draggable: true}),
+ newgj = newmk.toGeoJSON();
+ newmk.remove();
+ newgj.properties.name = 'foo';
+ newgj.properties.description = 'Point of foo';
+ gjl.addData(newgj);
+ dispInfo(JSON.stringify(newgj));
+ modifyFlag(true);
+ }
+ });
+ function reloadGJ() {
+ function respond(str) {
+ if (this.readyState == 4) {
+ dispInfo("Reload OK");
+ // https://github.com/Leaflet/Leaflet/issues/1416
+ gjl.clearLayers();
+ gjl.addData(JSON.parse(this.responseText));
+ }
+ modifyFlag(false);
+ }
+ var conn = new XMLHttpRequest();
+ conn.open('GET', './catgj.cgi');
+ conn.send(null);
+ conn.onreadystatechange = respond;// イベントリスナ登録
+ }
+ loadbtn.addEventListener('click', reloadGJ);
+ }
+ init("foo");
+}();
diff --git a/yuza/yuzasprings.geojson b/yuza/yuzasprings.geojson
new file mode 100644
index 0000000..f721581
--- /dev/null
+++ b/yuza/yuzasprings.geojson
@@ -0,0 +1,161 @@
+{
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "かどっこの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.914617,
+ 39.014557
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "にぎわいの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.912262,
+ 39.015879
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "はっこちゃの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.906372,
+ 39.01635
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "ゆざっこの水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.910502,
+ 39.01815
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸勝の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.916639,
+ 39.015799
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸幸の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.90914,
+ 39.019184
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "京屋の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.913582,
+ 39.014257
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "光月堂の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.907917,
+ 39.019275
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "八面川湧水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.907826,
+ 39.015933
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "六日町の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.911393,
+ 39.017892
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "礒兵衛の水"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.908185,
+ 39.020609
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "name": "丸池様"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 139.891402,
+ 39.072761
+ ]
+ }
+ }
+ ]
+}
\ No newline at end of file
"+feature.properties.name + "
\n" + + ""+wikiRepl(d)+"
\n" + ); + } + + // HTML要素 + var info = document.getElementById("info"), + update = document.getElementById("update"), + undobtn = document.getElementById("undo"), + loadbtn = document.getElementById("reload"), + namefld = document.getElementById("name"), + descfld = document.getElementById("desc"), + rmbtn = document.getElementById("remove"), + gpsbtn = document.getElementById("gps"); + function dispInfo(msg) { + info.textContent = msg; + } + function modifyFlag(flag) { + if (flag) { + update.style.backgroundColor = 'pink'; + update.disabled = false; + } else { + update.style.backgroundColor = 'white'; + undopoint = false; + update.disabled = true; + } + } + function updateGJ(json) { + function respond(str) { + if (this.readyState == 4) { + dispInfo("OK"); + } + modifyFlag(false); + } + var newjson = {name: 'yuzasprings', val: json.toGeoJSON()}; + var val = JSON.stringify(newjson); + if (val) { + var conn = new XMLHttpRequest(); + conn.open('POST', './getgj.cgi'); + conn.setRequestHeader( + 'Content-Type', 'application/x-www-form-urlencoded'); + conn.send(val); + conn.onreadystatechange = respond;// イベントリスナ登録 + } + } + var undopoint = false; + function undoMarker(e) { + if (undopoint) { + let marker = undopoint.marker, + latlng = undopoint.latlng; + marker.setLatLng(latlng); + modifyFlag(false); + } + } + + // 初期化関数 + function init(logfile) { + var baseLayer = {}; + var map_osm = new L.tileLayer( // OpenStretMap + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution : '© OpenStreetMap contributors | Generated with geomapper', + maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["OpenStreetMap"] = map_osm; + + var map_gsi = new L.tileLayer( // 国土地理院 + 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: "国土地理院", + maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["地理院地図"] = map_gsi; + + var map_ort = new // 地理院オルソ + L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { + attribution: "国土地理院", + maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["地理院地図オルソ画像"] = map_ort; + var map_gazo = new L.tileLayer( // 地理院画像1974-1978 + 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', { + attribution: "国土地理院" + }); + baseLayer["地理院画像(1974-1978)"] = map_gazo; + + if (L.BingLayer) { + var bing_key = + "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K"; + map_bing = new L.BingLayer( // BingMap + bing_key, {type: "Road", culture: "ja", + maxZoom: 20, maxNativeZoom: 18}); + baseLayer["Bing Map"] = new L.BingLayer( + bing_key, {type: "Road", culture: "ja", + maxZoom: 20, maxNativeZoom: 18}); + baseLayer["Bing Map 衛星写真"] = new L.BingLayer( + bing_key, {type: "Aerial", culture: "ja", + maxZoom: 20, maxNativeZoom: 18}); + var bing_dbl = baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer( + bing_key, {type: "AerialWithLabels", culture: "ja", + maxZoom: 20, maxNativeZoom: 18}); + } + if (L.Google) { + baseLayer["Google Map"] = new L.Google("ROADMAP"); + baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE'); + baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID'); + } + var jsonmap = L.map('load-json', {layers: [map_ort]}).setView([38.273295,140.761600], 14); + var mapControl = L.control.layers(baseLayer, null).addTo(jsonmap); + var markerLayers = L.featureGroup(); + + // GPS related + var gpsIcon = L.icon({ + iconUrl: 'img/gpsmark.png', + iconAnchor: [12,12] + }); + var gpsmarker = null; + function gps_error() { + dispInfo("GPS信号取得失敗") + } + function gps_success(pos) { + dispInfo("GPSお") + var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); + jsonmap.panTo(latlng); // 地図の中心を取得した位置に + if (!gpsmarker) + gpsmarker = L.marker(latlng, {icon: gpsIcon}).addTo(jsonmap); + else + gpsmarker.setLatLng(latlng); + dispInfo(latlng); + gpsbtn.disabled = false; + } + gpsbtn.addEventListener('click', function() { + gpsbtn.disabled = true; + dispInfo("位置取得中..."); + navigator.geolocation.getCurrentPosition(gps_success, gps_error, { + // enableHighAccuracy: true, + timeout: 8000, + maximumAge: 0000, + }); + }); + + var popupopenmarker = false; + function updatePopup(e) { + var elem = e.target; + if (popupopenmarker) { + let mk = popupopenmarker.marker, + pr = popupopenmarker.props; + pr.name = elem.value; + let newmk = mk.toGeoJSON(); + newmk.properties.name = elem.value; + alert(newmk.properties.name); + gjl.addData(newmk); + mk.remove(); // 古いマーカを消して入れ直す + modifyFlag(true); + } + } + function rmMarker(e) { + var elem = e.target; + if (popupopenmarker) { + var mk = popupopenmarker.marker; + //alert(mk); + mk.removeFrom(gjl); + mk.closePopup(); + mk.remove(); + modifyFlag(true); + } + } + + var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline|umap)/i; + // var fnmatch = fileptn.exec(logfile); + var customLayer = L.geoJson(null, { // omnivoreに引き渡すGeoJSONレイヤ + onEachFeature: function(f, layer) { // レイヤ上に配置する feature(地点) + let p = f.properties; // ごとに、プロパティを取り出し + if (p) { // description(概要)を + let name = p.name, desc = p.description; + let popup = "" + name + "
" + "" + (desc||"") + "
"; + layer.bindPopup(popup); // ポップアップに設定する + layer.bindTooltip(name); + layer.options.draggable = true; + layer.on('popupopen', function(e) { //ポップアップ開く時 + // If this marker is popupped + //dispInfo(e.target.getPopup().getContent()); + // →