-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
44 lines (34 loc) · 7.68 KB
/
map.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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
svg{
transform: scale(1,-1);/*実際の緯度経度情報を使って図を描くと地図が反転して表示されるのでそれを修正する*/
display:block;/*SVGはデフォルトでインラインです。*/
margin:0 auto;
}
circle:hover{
cursor: pointer;
fill:blue;
}
</style>
</head>
<body>
<svg width="300" height="200" viewBox="139.623900, 35.676508, 0.1, 0.06" xmlns="http://www.w3.org/2000/svg">
<!--↑実際の緯度経度情報を使うため、viewBoxには中野区が収まりそうな緯度経度を設定-->
<!--polygonで中野区の境界線の緯度経度を入力-->
<polygon points="139.67193603515625,35.73341491348694 139.66575622558594,35.7313247120674 139.66009140014646,35.726168647355294 139.6391487121582,35.72644736208901 139.6333122253418,35.735365718650236 139.62713241577148,35.73480835062284 139.6244716644287,35.729652511434224 139.6319818496704,35.71714473101632 139.64155197143555,35.71446174798392 139.6413803100586,35.712510430860604 139.65116500854492,35.70916520463913 139.658203125,35.708886429449805 139.66249465942383,35.69912868360278 139.6614646911621,35.69550407383317 139.66609954833984,35.6950858390275 139.66764450073242,35.69146104550165 139.65871810913086,35.68574469022575 139.65940475463864,35.68198003744061 139.66455459594727,35.676681336293356 139.67931747436523,35.68839378384561 139.6882438659668,35.69940749291485 139.68721389770508,35.7026137299332 139.68875885009766,35.70749253887843 139.69493865966794,35.711395371053676 139.68223571777344,35.71055906596077 139.67897415161133,35.71808549588366 139.67382431030273,35.71920046208453 139.67863082885742,35.73188210447652 139.67193603515625,35.73341491348694" stroke="none" fill="green" />
<polygon id="nakanoku" stroke="none" fill="gray" points="139.67193603515625,35.73341491348694 139.66575622558594,35.7313247120674 139.66009140014646,35.726168647355294 139.6391487121582,35.72644736208901 139.6333122253418,35.735365718650236 139.62713241577148,35.73480835062284 139.6244716644287,35.729652511434224 139.6319818496704,35.71714473101632 139.64155197143555,35.71446174798392 139.6413803100586,35.712510430860604 139.65116500854492,35.70916520463913 139.658203125,35.708886429449805 139.66249465942383,35.69912868360278 139.6614646911621,35.69550407383317 139.66609954833984,35.6950858390275 139.66764450073242,35.69146104550165 139.65871810913086,35.68574469022575 139.65940475463864,35.68198003744061 139.66455459594727,35.676681336293356 139.67931747436523,35.68839378384561 139.6882438659668,35.69940749291485 139.68721389770508,35.7026137299332 139.68875885009766,35.70749253887843 139.69493865966794,35.711395371053676 139.68223571777344,35.71055906596077 139.67897415161133,35.71808549588366 139.67382431030273,35.71920046208453 139.67863082885742,35.73188210447652 139.67193603515625,35.73341491348694"/>
<polyline id="chuo_line" fill="none" stroke="black" stroke-dasharray="0.001" stroke-width="0.001" points="139.68923674878897,35.70594809625882,139.68774357867198,35.706284897879044,139.65223931146625,35.705341849758156"/>
<polyline id="seibushinjyuku_line" fill="none" stroke="black" stroke-dasharray="0.001" stroke-width="0.001" points="139.62640629191947,35.723635558128564 ,139.63193664491223,35.72300170474969 ,139.6358404234948,35.72273759768683 ,139.64078520969997,35.72257913302846 ,139.64390823256605,35.722631954616304 ,139.64592518483386,35.72220938093393 ,139.64943858555887,35.72083600098733 ,139.65353755307018,35.7196738917728 ,139.65535931640926,35.718881534862476 ,139.65731120570132,35.71904000687515 ,139.66056435452032,35.71951542102087 ,139.66212586595339,35.71962106822383 ,139.6653139517967,35.71930412619527 ,139.66759115596903,35.71856458989227 ,139.67175518645763,35.71608181067555 ,139.67312150896186,35.715659202253406 ,139.6740974536071,35.715606376042956 ,139.6764397207582,35.71592333277964 ,139.67793609822093,35.71576481873265 ,139.68001811346443,35.71534220862942 ,139.68242544359123,35.71476111607848"/>
<polyline id="kannanna" fill="none" stroke="#ccc" stroke-width="0.001" points="139.65397075542154,35.7268047741408 ,139.6537099177175,35.720804943016134 ,139.6536229718169,35.71466347147536 ,139.6536229718169,35.713745739676966 ,139.65397075542154,35.711486662533545 ,139.65431853902817,35.707956726305895 ,139.65475326853544,35.70485025311331"/>
<polyline id="waseda_dori" fill="none" stroke="#ccc" stroke-width="0.0007" points="139.6484487295433,35.71002409723427 ,139.65104512280732,35.70938523919003 ,139.6537595339496,35.70964078302248 ,139.65537244491833,35.709736611748056 ,139.6650105714338,35.709928268853574 ,139.6667021609856,35.709960211660174 ,139.6686691255817,35.70980049750136 ,139.66977062575523,35.70976855463074 ,139.67323248344184,35.70909775139964 ,139.67567151953978,35.70852277270886 ,139.67696975506334,35.7083311210275 ,139.67889738036797,35.70839500790727 ,139.68228055947156,35.709896334839115 ,139.6867652387486,35.71079072893174 ,139.68774872104575,35.71111015296091"/> <!--プレパの位置を実際の緯度経度で配置。各ブログへのリンクをはる-->
<polyline id="yamanote_dori" fill="none" stroke="#ccc" stroke-width="0.001" points="139.68498889018105,35.7111906929578 ,139.68267063225488,35.7063053843234 ,139.68222905931583,35.702450709324694 ,139.68300181195792,35.700523301934794 ,139.68300181195792,35.69931304557463 ,139.68272578712828,35.695951126012545 ,139.68178744463603,35.69124420045276 ,139.68167705140002,35.68989931355628"/>
<polyline id="shin_oume" fill="none" stroke="#ccc" stroke-width="0.0007" points="139.62555561657,35.727273109424104 ,139.63135949519653,35.72717068280254 ,139.63337823558953,35.72717068280254 ,139.6381096583844,35.72640247894368 ,139.64120085460905,35.72578791052281 ,139.6464085128584,35.724400091940936 ,139.64748222877733,35.724203260706275 ,139.6485386266986,35.72400642898528 ,139.65033969856432,35.72361276408435 ,139.65292008037136,35.722966024666846 ,139.65430552026896,35.72285354771098 ,139.657638446641,35.722771334570524 ,139.66146685979254,35.72378664178835 ,139.66606095557387,35.7238902438381 ,139.6709157733814,35.72397314703099 ,139.67379984462087,35.72349657698226 ,139.6763010745479,35.723662340801056"/>
<polyline id="nakano_dori" fill="none" stroke="#ccc" stroke-width="0.0009" points="139.6737775619619,35.72346000811412 139.6721599610031,35.72181002221599 139.6713304220482,35.72066511396045 139.6706253139389,35.72005897940015 139.670293498357,35.71904874488493 139.66938100550743,35.717567044426644 139.66859294350172,35.71642207520195 139.66618728053726,35.714266794384386 139.66535774256238,35.71110113734578 139.6649844500331,35.70988871811389 139.66556569541672,35.70274832688044 139.66556568649884,35.702647286399895 139.66672704103382,35.70163683116881 139.66755657998687,35.69938010158181 139.6672247644068,35.69584330732732 139.6683031650453,35.694327490341635 139.66917416635448,35.69031887030067 139.6688423507744,35.68890401067904 139.6691326894072,35.68583839540686 139.66954744414295,35.68105446814593 139.66983778277762,35.68011112164538"/>
<!--児童館の位置を実際の緯度経度で配置。チラシのURLへのリンクを貼る-->
<a id=nogata_jidokan href="https://www.city.tokyo-nakano.lg.jp/dept/247000/d007387.html" target="_blank"><circle cx="139.6602184" cy="35.710712" r="0.001" fill="red"/></a>
</svg>
</body>
</html>