Skip to content

Instantly share code, notes, and snippets.

@ko31

ko31/index.html

Created December 16, 2016 02:31
Show Gist options
  • Save ko31/05847a22b95563e97a78fe24d54ffb73 to your computer and use it in GitHub Desktop.
Save ko31/05847a22b95563e97a78fe24d54ffb73 to your computer and use it in GitHub Desktop.
Download ZIP
【HTML】棋士出身地マップ
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
$(function() {
var map = L.map('map').setView([35.6772243, 139.707258], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
$.getJSON("map.json" , function(data) {
len = data.length;
for(var i = 0; i < len; i++) {
L.marker([data[i].lat, data[i].lng]).addTo(map)
.bindPopup('<a href="http://www.shogi.or.jp/player/pro/'+data[i].no+'.html" target="_blank">'+data[i].name+'</a><br>'+data[i].birthplace+'<br><img src="'+data[i].image+'" width="120">');
.openPopup();
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment