-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
87 lines (76 loc) · 3.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html>
<head>
<title>tokoro</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- tokoroをIE9で使うには、jDataView/jBinaryが必要です -->
<!--[if lt IE 10]>
<script src="https://jdataview.github.io/dist/jdataview.js"></script>
<script src="https://jdataview.github.io/dist/jbinary.js"></script>
<![endif]-->
<!-- 以下は、Riot.jsのためのPolyfillです -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script>html5.addElements('app')</script>
<![endif]-->
<style>
body { margin: 0; padding: 0; font-family: sans-serif }
iframe { width: 100%; height: 400px }
form { margin: 0; padding: 25px; text-align: center }
form > p { margin: 5px 0 0; color: #999; }
input[type=text] { font-size: 18px; line-height: 1em; width: 80%; max-width: 400px; vertical-align: middle; padding: .5em; border: 3px solid #ccc }
input[type=submit] { margin-left: -55px; display: inline-block; width: 40px; line-height: 20px; border: none; background: #eee; color: #999; font-weight: bold }
footer { text-align: center; color: #ccc; padding: 10px }
footer > p { margin: 0 0 1em }
</style>
</head>
<body>
<app></app>
<script type="riot/tag">
<app>
<form onsubmit={ submit }>
<input type="text" name="address" placeholder="東京都世田谷区代田6-11-14">
<input type="submit" value="Go!">
<p if={ notfound }>見つかりません...</p>
</form>
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src={ embeded }></iframe>
<footer>
<p>緯度 { lat || '' } / 経度 { long || '' }</p>
<p><a href="https://github.com/cognitom/tokoro">GitHub</a></p>
</footer>
var self = this
var prefix = 'http://www.openstreetmap.org/export/embed.html?bbox='
var suffix = '&layer=mapnik'
var box = ['120.9375', '25.562265014427492', '155.6982421875', '47.98992166741417']
self.embeded = prefix + box.join('%2C') + suffix
self.lat = 0
self.long = 0
self.notfound = false
submit (e) {
tokoro(self.address.value, function(code){
if (!code) {
self.notfound = true
self.update()
return
}
var d = 0.001
box = [code[1] - d, code[0] - d, code[1] + d, code[0] + d]
self.embeded = prefix + box.join('%2C') + suffix
self.lat = code[0]
self.long = code[1]
self.notfound = false
self.update()
})
}
</app>
</script>
<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<script src="dist/tokoro.js"></script>
<script>
tokoro({ data: 'data' }) // 緯度経度データの格納場所を指定
riot.mount('app')
</script>
</body>
</html>