Built with blockbuilder.org
forked from sugasaki's block: 箱根駅伝 2016 出身校マップ
license: mit |
Built with blockbuilder.org
forked from sugasaki's block: 箱根駅伝 2016 出身校マップ
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="style.css" type="text/css" /> | |
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" /> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<title>箱根駅伝 2016 出身校マップ</title> | |
<body> | |
<script src="http://cdn.webix.com/edge/webix.js"></script> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="view.js?v=20170318_2358"></script> | |
<script src="map.js?v=20170318_2258"></script> | |
</body> |
/**************************************************** | |
* leaflet Init | |
***************************************************/ | |
var map = L.map('map').setView([38.0, 138.9773654], 6); | |
var layer = L.tileLayer( | |
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | |
{ | |
// attribution: 'Map data © ' + '<a href="http://openstreetmap.org">OpenStreetMap</a>', | |
attribution: 'Map data © ' + 'OpenStreetMap', | |
maxZoom: 18 | |
} | |
).addTo(map); | |
var geojsonLayer = L.geoJson(null, {onEachFeature:drawItem}).addTo(map); | |
/**************************************************** | |
* mapping | |
***************************************************/ | |
function drawItem(feature, layer) { | |
if (!feature.properties) return ; | |
var p = feature.properties; | |
var properties = '<div class="popup">'; | |
if (p.name) properties += '<center>'+ p.name + '<center>'; | |
if (p.name) properties += '<hr />'; | |
if (feature.runners){ | |
feature.runners.forEach(function(r){ | |
if (r.runner_name) properties += '<center>'+ r.kukan + '区 '+ r.runner_name + '<center>'; | |
if (r.img_url) properties += '<center><a href="'+ r.link + '" target="_new"><img src="'+ r.img_url + '" /></a></center>'; | |
}); | |
} | |
properties += '</div>'; | |
layer.bindPopup(properties); | |
} |
html, body { | |
width: 100%; | |
height: 100%; | |
padding: 0px; | |
margin: 0px; | |
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",HiraginoKakuGothicPro,"MS Pゴシック",sans-serif; | |
} | |
.webix_view {border: none;} | |
.webix_template{ padding: 0px;} | |
.header { | |
padding-left: 10px; | |
color:#B21A3F; | |
background-color: white; | |
} | |
.header h1 { | |
margin-top: 4px; | |
margin-bottom: 0px; | |
} | |
#map { | |
width: 100%; | |
height: 100%; | |
} | |
.area:hover { | |
fill:blue; | |
stroke:black; | |
stroke-width:2; | |
} | |
.info { | |
padding: 10px; | |
font-size: 14px; | |
background: white; | |
background: rgba(255,255,255,0.8); | |
box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
border-radius: 5px; | |
z-index: 99998; | |
} | |
#thresholdInput { | |
position:relative; | |
width: 3em; | |
height: 16px; | |
line-height: 16px; | |
margin: 0px; | |
vertical-align:middle; | |
} | |
#thresholdRage { | |
width:100%; | |
} | |
.tooltip { | |
font-size: 12px; | |
min-width: 268px; | |
min-height: 100px; | |
border: 1px solid black; | |
background-color: white; | |
padding-top: 8px; | |
padding-bottom: 8px; | |
border-radius: 4px; | |
-moz-border-radius: 4px; | |
-webkit-border-radius: 4px; | |
z-index: 99999; | |
} | |
.leftLabel { | |
display: inline-block; | |
min-width: 120px; | |
margin-left: 6px; | |
} | |
.rightLabel { | |
display: inline-block; | |
min-width: 80px; | |
text-align: right; | |
} | |
.perLabel { | |
display: inline-block; | |
min-width: 60px; | |
text-align: right; | |
} | |
.popup { | |
width: 200px; | |
} | |
var resultList = { | |
id:'geojsonList', | |
view:"list", | |
select:true, | |
template:'#name#', | |
data:[] | |
} | |
webix.ui({ | |
rows:[ | |
{template:'<h1>箱根駅伝 2016 出身校マップ</h1>', height:40, css:'header'}, | |
{ | |
cols:[ | |
{width:250, | |
rows:[ | |
resultList, | |
// resultClear_btn | |
]}, | |
{view:'resizer'}, | |
{template:'<div id="map"></div>'} | |
] | |
} | |
] | |
}); | |
/**************************************************** | |
* init | |
***************************************************/ | |
var dataName = "http://suga-app.azurewebsites.net/api/Universities"; | |
d3.json(dataName, function(teams){ | |
if (!teams)return; | |
teams.forEach(function(item){ | |
$$('geojsonList').add(item); | |
}); | |
}); | |
/**************************************************** | |
* Event | |
***************************************************/ | |
$$('geojsonList').attachEvent('onAfterSelect', function(id){ | |
var universe = this.getItem(id); | |
geojsonLayer.clearLayers(); | |
d3.json("http://suga-app.azurewebsites.net/api/EntryRunners/2016/" + universe.id, function(geodata){ | |
geojsonLayer.addData(geodata); | |
map.fitBounds(geojsonLayer.getBounds()) | |
}); | |
}); | |