Built with blockbuilder.org
Last active
March 15, 2017 11:30
-
-
Save sugasaki/0f89ce6394e8c668fe371621a8fa2099 to your computer and use it in GitHub Desktop.
箱根駅伝 2016 出身校マップ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**************************************************** | |
| * 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.name) properties += '<center>'+ r.kukan + '区 '+ r.name + '<center>'; | |
| if (r.img) properties += '<center><a href="'+ r.link + '" target="_new"><img src="'+ r.img + '" /></a></center>'; | |
| }); | |
| } | |
| properties += '</div>'; | |
| layer.bindPopup(properties); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"></script> | |
| <script src="hakone.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0px; | |
| margin: 0px; | |
| font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",HiraginoKakuGothicPro,"ＭＳ Ｐゴシック",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; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var resultList = { | |
| id:'geojsonList', | |
| view:"list", | |
| select:true, | |
| // template:'<a target="_blank" href="#link#">#name#</a>:', | |
| template:'#name#', | |
| data:[] | |
| } | |
| var search_input = {id:'search_input', view:'text', placeholder:'e.g. japan or usa or london or polygon'}; | |
| var search_btn = { id:'search_btn', view:'button', width:120,label:'search'} | |
| //var resultClear_btn = {id:'resultClear_btn', view:'button',height:30, label:'Result Clear'} | |
| webix.ui({ | |
| rows:[ | |
| {template:'<h1>箱根駅伝 2016 出身校マップ</h1>', height:40, css:'header'}, | |
| /* | |
| {view:"form", elements:[ | |
| {cols:[ | |
| search_input, | |
| search_btn | |
| ] | |
| } | |
| ] | |
| }, | |
| */ | |
| { | |
| cols:[ | |
| {width:250, | |
| rows:[ | |
| resultList, | |
| // resultClear_btn | |
| ]}, | |
| {view:'resizer'}, | |
| {template:'<div id="map"></div>'} | |
| ] | |
| } | |
| ] | |
| }); | |
| /**************************************************** | |
| * init | |
| ***************************************************/ | |
| var dataName = "http://www.sugasaki.com/d3/hakone2016/teamList.php"; | |
| d3.json(dataName, function(teams){ | |
| teams.forEach(function(item){ | |
| $$('geojsonList').add(item); | |
| }); | |
| }); | |
| /**************************************************** | |
| * Event | |
| ***************************************************/ | |
| $$('geojsonList').attachEvent('onAfterSelect', function(id){ | |
| var item = this.getItem(id); | |
| geojsonLayer.clearLayers(); | |
| d3.json("http://www.sugasaki.com/d3/hakone2016/" + item.link, function(geodata){ | |
| geojsonLayer.addData(geodata); | |
| map.fitBounds(geojsonLayer.getBounds()) | |
| }); | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment