Skip to content

Commit 16943a0

Browse files
taisukeftaisukef
committed
mod latlngmap
1 parent 018e108 commit 16943a0

File tree

3 files changed

+35
-26
lines changed

3 files changed

+35
-26
lines changed

‎egmap.css

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
x-filter: grayscale(100%) brightness(110%); /* 明るめグレースケール */
66
filter: hue-rotate(-10deg) saturate(70%) brightness(104%); /* いい感じの色？ */
77
}
8+
.leaflet-marker-pane > a {
9+
word-break: break-all;
10+
}
811
a {
912
color: #444 !important;
1013
}

‎samples/latlngmap.html

+31-25
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<head>
33
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
44
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
5-
<title>緯度経度地図 - egmapjs</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
5+
<title>緯度経度表示 - egmapjs</title>
6+
<meta name="viewport" content="width=device-width"/>
77
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
88
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
9-
9+
<link rel="stylesheet" href="https://code4fukui.github.io/egmapjs/egmap.css"/>
1010
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
1111
<script src="https://fukuno.jig.jp/fukuno.js"></script>
1212
<script>"use strict"
@@ -22,20 +22,21 @@
2222
iconRetinaUrl: 'crosshairs.png',
2323
iconSize: [ 35, 35 ],
2424
iconAnchor: [ 17, 17 ],
25-
});
26-
const crosshair = new L.marker(map.getCenter(), { icon: iconcenter, clickable:false })
25+
})
26+
const crosshair = new L.marker(map.getCenter(), { icon: iconcenter, clickable: false })
2727
crosshair.addTo(map);
2828
map.on('move', function() {
2929
crosshair.setLatLng(map.getCenter());
30-
});
30+
})
3131

3232
var showLL = function() {
3333
var ll = map.getCenter()
34-
tfll.value = fixfloat(ll.lat, 6) + "," + fixfloat(ll.lng, 6)
34+
const sep = chktab.checked ? "\t" : ","
35+
tfll.value = fixfloat(ll.lat, 6) + sep + fixfloat(ll.lng, 6)
3536
}
3637
showLL()
3738
map.on("move", showLL)
38-
39+
chktab.onchange = showLL
3940
}
4041
</script>
4142
<style>
@@ -49,46 +50,51 @@
4950
color: gray !important;
5051
}
5152
h1 {
52-
font-size: 3vh;
53-
margin: 0;
53+
font-size: 3.5vh;
54+
margin: 0.5vh;
5455
}
5556
#sub {
5657
font-size: 4vw;
5758
}
5859
#mapid {
59-
height: 80vh;
60-
}
61-
.leaflet-tile-container { /* 地図の色味変更 CSS3 filter */
62-
x-filter: sepia(100%) brightness(95%); /* セピア */
63-
x-filter: grayscale(100%) brightness(110%); /* 明るめグレースケール */
64-
filter: hue-rotate(-10deg) saturate(70%) brightness(104%); /* いい感じの色？ */
65-
}
66-
.leaflet-marker-pane > a {
67-
word-break: break-all;
60+
height: 75vh;
6861
}
6962
#tfll {
7063
box-sizing: border-box;
7164
text-align: center;
7265
font-size: 120%;
73-
width: 100%;
66+
width: 90%;
7467
border: 1px solid gray;
7568
}
69+
#tfllbox {
70+
text-align: left;
71+
}
72+
#spantab {
73+
box-sizing: border-box;
74+
text-align: center;
75+
font-size: 120%;
76+
width: 10%;
77+
padding: 0px 5px;
78+
x-border: 1px solid gray;
79+
}
7680
.credit {
7781
margin-top: 1vh;
7882
font-size: 90%;
7983
}
84+
#debug {
85+
text-align: left;
86+
}
8087
</style>
8188

8289
</Head>
8390
<body>
84-
<h1>緯度経度地図 - egmapjs</h1>
91+
<h1>緯度経度表示 - egmapjs</h1>
8592
<div id="mapid"></div>
86-
<input type=text id="tfll">
93+
<div id=tfllbox><input type=text id="tfll"><label id=spantab><input type=checkbox id=chktab>タブ</label></div>
8794

8895
<div class=credit>
89-
App: <a href=http://fukuno.jig.jp/2364>緯度経度地図</a> CC BY fukuno.jig.jp,
90-
Lib: <a href=http://fukuno.jig.jp/2363>egmapjs</a> CC BY fukuno.jig.jp (<a href=https://github.com/code4fukui/egmapjs>src on GitHub</a>)<br>
91-
ご要望は「<a href=https://www.facebook.com/taisuke.fukuno/posts/10158114309768626>こちら</a>」までお気軽にお寄せください<br>
96+
App: <a href=https://fukuno.jig.jp/2369>緯度経度地図</a> CC BY fukuno.jig.jp<br>
97+
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>
9298
</div>
9399

94100
</body>

‎tutorial.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h3>egmapjs サンプル</h3>
3232
<li><a href=samples/myokorefuge.html>妙高市避難所マップデモ</a></li>
3333
<li><a href=samples/sparqlrefugemap.html>避難所マップ(SPARQL API)</a></li>
3434
<li><a href=samples/localgovjpmap.html>フレーズで探そう日本の地方自治体マップ</a></li>
35-
<li><a href=samples/latlngmap.html>緯度経度マップ</a></li>
35+
<li><a href=samples/latlngmap.html>緯度経度表示</a></li>
3636
</ul>
3737
<hr>
3838
<a href=https://fukuno.jig.jp/2363>egmapjs CC BY fukuno.jig.jp</a><br>

0 commit comments

Comments
 (0)