Skip to content

Commit 9bb12a5

Browse files
taisukeftaisukef
committed
redirect to new version
1 parent 5752f03 commit 9bb12a5

File tree

2 files changed

+202
-199
lines changed

2 files changed

+202
-199
lines changed

‎samples/kyotoishibumimap-bk.html

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!DOCTYPE html><html lang="ja">
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4+
<link rel="apple-touch-icon" href="kyotoishibumimap.jpg" />
5+
<meta property="og:image" content="kyotoishibumimap.jpg" />
6+
<title>全1470個所 いしぶみマップ - 京都市オープンデータ x egmapjs</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
8+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
9+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
10+
11+
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
12+
<script src="https://fukuno.jig.jp/fukuno.js"></script>
13+
<script>"use strict"
14+
15+
const convertJP2WGS = function(o) {
16+
if (!o.lat || !o.lng)
17+
return
18+
const lat2 = o.lat - o.lat * 0.00010695 + o.lng * 0.000017464 + 0.0046017
19+
const lng2 = o.lng - o.lat * 0.000046038 - o.lng * 0.000083043 + 0.010040
20+
o.lat = lat2
21+
o.lng = lng2
22+
}
23+
// script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"
24+
/*
25+
proj4.defs([
26+
["EPSG:4301", //東京測地系/日本測地系 SRID=4301
27+
"+proj=longlat +ellps=bessel +towgs84=-146.414,507.337,680.507,0,0,0,0 +no_defs"
28+
],
29+
["EPSG:4612", //日本測地系/JGD2000 SRID=4612
30+
"+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs"
31+
]
32+
]);
33+
*/
34+
function convertTokyo2WGS(o) {
35+
if (!o.lat || !o.lng)
36+
return
37+
let ret = proj4("EPSG:4301", "EPSG:4326", [ parseFloat(o.lng), parseFloat(o.lat) ])
38+
o.lat = ret[1]
39+
o.lng = ret[0]
40+
}
41+
const convertDMS2D = function(o) {
42+
if (!o.lat || !o.lng)
43+
return
44+
const dms2d = function(dms) {
45+
// return (Math.floor(dms) + Math.floor(dms * 100) % 100 / 60 + Math.floor(dms * 10000) % 100 / (60 * 60)).toFixed(5)
46+
// 度分秒の秒の小数点以下に対応する修正
47+
return (Math.floor(dms) + Math.floor(dms * 100) % 100 / 60 + Math.floor(dms * 10000) % 100 / (60 * 60) + Math.floor(dms * 1000000) % 100 / (60 * 60 * 100)).toFixed(6)
48+
}
49+
o.lat = dms2d(o.lat)
50+
o.lng = dms2d(o.lng)
51+
}
52+
window.onload = function() {
53+
const map = initMap('mapid')
54+
//map.setZoom(4)
55+
56+
const url = "https://fukuno.jig.jp/app/csv/data/ishibumi-data-281211.csv"
57+
getJSON(url, function(csv) {
58+
//dump(csv);
59+
let lls = []
60+
const icon = "icon-illustya-moses_jikkai.png"
61+
let cnt = 0
62+
for (let i = 1; i < csv.length; i++) {
63+
const c = csv[i]
64+
let d = {
65+
num: c[0],
66+
name: c[1],
67+
address: c[2],
68+
lat: c[3],
69+
lng: c[4]
70+
}
71+
// convertJP2WGS(d)
72+
// convertTokyo2WGS(d)
73+
convertDMS2D(d)
74+
if (!d.lat || !d.lng) {
75+
//console.log("err: " + d.name + ", " + d.address + ", " + d.lat + ", " + d.lng)
76+
cnt++
77+
continue
78+
} else {
79+
//console.log("err: " + d.name + ", " + d.address + ", " + d.lat + ", " + d.lng)
80+
}
81+
//map.addIcon(d.lat, d.lng, d.name, icon, 64)
82+
let name = "<a href=https://www2.city.kyoto.lg.jp/somu/rekishi/fm/ishibumi/html/" + d.num.toLowerCase() + ".html target=_blank rel=noopener>" + d.name + "</a>"
83+
map.addIcon(d.lat, d.lng, [ d.num, name, d.address, d.lat + "," + d.lng ].join("<br>"))
84+
lls.push([ d.lat, d.lng ])
85+
}
86+
//alert(cnt) // =85
87+
//alert(lls.length) // =1470
88+
map.fitBounds(lls)
89+
setShowLL(map)
90+
91+
let watchid = null
92+
gotohere.onclick = function() {
93+
if (watchid)
94+
navigator.geolocation.clearWatch(watchid)
95+
watchid = navigator.geolocation.watchPosition(function(gpos) {
96+
const pos = [ gpos.coords.latitude, gpos.coords.longitude ]
97+
console.log(pos)
98+
map.panTo(pos)
99+
navigator.geolocation.clearWatch(watchid)
100+
watchid = null
101+
}, function() {
102+
alert("現在位置に取得に失敗！")
103+
})
104+
}
105+
})
106+
}
107+
108+
const setShowLL = function(map) {
109+
// センタークロス追加
110+
const iconcenter = L.icon({
111+
iconUrl: 'crosshairs.png',
112+
iconRetinaUrl: 'crosshairs.png',
113+
iconSize: [ 35, 35 ],
114+
iconAnchor: [ 17, 17 ],
115+
});
116+
const crosshair = new L.marker(map.getCenter(), { icon: iconcenter, clickable:false })
117+
crosshair.addTo(map);
118+
map.on('move', function() {
119+
crosshair.setLatLng(map.getCenter());
120+
});
121+
122+
var showLL = function() {
123+
var ll = map.getCenter()
124+
if (window.tfll)
125+
tfll.value = fixfloat(ll.lat, 6) + "," + fixfloat(ll.lng, 6)
126+
}
127+
showLL()
128+
map.on("move", showLL)
129+
}
130+
</script>
131+
<style>
132+
body {
133+
margin: 0;
134+
font-family: sans-serif;
135+
text-align: center;
136+
background: white;
137+
}
138+
a {
139+
color: gray !important;
140+
}
141+
h1 {
142+
font-size: 3vh;
143+
padding: .5vh;
144+
margin: 0;
145+
color: white;
146+
background-color: #9cd;
147+
}
148+
#sub {
149+
font-size: 4vw;
150+
}
151+
#mapid {
152+
height: 70vh;
153+
}
154+
.leaflet-tile-container { /* 地図の色味変更 CSS3 filter */
155+
x-filter: sepia(100%) brightness(95%); /* セピア */
156+
x-filter: grayscale(100%) brightness(110%); /* 明るめグレースケール */
157+
filter: hue-rotate(-10deg) saturate(70%) brightness(104%); /* いい感じの色？ */
158+
}
159+
.leaflet-marker-pane > a {
160+
word-break: break-all;
161+
}
162+
#debug {
163+
text-align: left;
164+
}
165+
#tfll {
166+
box-sizing: border-box;
167+
text-align: center;
168+
font-size: 120%;
169+
width: 100%;
170+
border: 1px solid gray;
171+
}
172+
.credit {
173+
margin-top: 1vh;
174+
font-size: 90%;
175+
}
176+
#gotohere {
177+
background: orange;
178+
color: white;
179+
font-weight: bold;
180+
padding: 1em;
181+
margin: 0.5em;
182+
}
183+
</style>
184+
185+
</Head>
186+
<body>
187+
<h1>全1470個所 いしぶみマップ</h1>
188+
<div id="mapid"></div>
189+
<!--<input type=text id="tfll">-->
190+
<button id=gotohere>現在位置へ移動</button>
191+
192+
<div class=credit>
193+
App: <a href=https://fukuno.jig.jp/2437>全1470個所 いしぶみマップ</a> CC BY fukuno.jig.jp<br>
194+
Data: <a href=https://data.city.kyoto.lg.jp/node/14455>CC BY いしぶみリスト | 京都市オープンデータポータルサイト</a><br>
195+
Icon: <a href=https://www.irasutoya.com/2016/10/blog-post_315.html>モーセの十戒のイラスト | かわいいフリー素材集 いらすとや</a><br>
196+
Lib: <a href=https://fukuno.jig.jp/2363>egmapjs</a> CC BY fukuno.jig.jp (<a href=https://github.com/code4fukui/egmapjs>src on GitHub</a>)<br>
197+
</div>
198+
199+
</body>
200+
</html>

0 commit comments

Comments
 (0)