地下鉄モニター ohisama1 Follow 2019-01-11 15:16:22 License: MIT License Fork0 Fav0 View233 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 175 lines HTML 19 lines CSS 99 lines 地下鉄モニター (function (window, document, undefined) { "use strict"; L.AwesomeMarkers = {}; L.AwesomeMarkers.version = '2.0.1'; L.AwesomeMarkers.Icon = L.Icon.extend({ options: { iconSize: [35, 45], iconAnchor: [17, 42], popupAnchor: [1, -32], shadowAnchor: [10, 12], shadowSize: [36, 16], className: 'awesome-marker', prefix: 'glyphicon', spinClass: 'fa-spin', extraClasses: '', icon: 'home', markerColor: 'blue', iconColor: 'white' }, initialize: function(options) { options = L.Util.setOptions(this, options); }, createIcon: function() { var div = document.createElement('div'), options = this.options; if (options.icon) { div.innerHTML = this._createInner(); } if (options.bgPos) { div.style.backgroundPosition = (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px'; } this._setIconStyles(div, 'icon-' + options.markerColor); return div; }, _createInner: function() { var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options; if (options.icon.slice(0, options.prefix.length + 1) === options.prefix + "-") { iconClass = options.icon; } else { iconClass = options.prefix + "-" + options.icon; } if (options.spin && typeof options.spinClass === "string") { iconSpinClass = options.spinClass; } if (options.iconColor) { if (options.iconColor === 'white' || options.iconColor === 'black') { iconColorClass = "icon-" + options.iconColor; } else { iconColorStyle = "style='color: " + options.iconColor + "' "; } } return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>"; }, _setIconStyles: function(img, name) { var options = this.options, size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']), anchor; if (name === 'shadow') { anchor = L.point(options.shadowAnchor || options.iconAnchor); } else { anchor = L.point(options.iconAnchor); } if (!anchor && size) { anchor = size.divideBy(2, true); } img.className = 'awesome-marker-' + name + ' ' + options.className; if (anchor) { img.style.marginLeft = (-anchor.x) + 'px'; img.style.marginTop = (-anchor.y) + 'px'; } if (size) { img.style.width = size.x + 'px'; img.style.height = size.y + 'px'; } }, createShadow: function() { var div = document.createElement('div'); this._setIconStyles(div, 'shadow'); return div; } }); L.AwesomeMarkers.icon = function(options) { return new L.AwesomeMarkers.Icon(options); }; }(this, document)); var tIcon = L.AwesomeMarkers.icon({ prefix: 'fa', markerColor: 'green', icon: 'subway' }); var map = L.map('map').setView([35.7, 139.7], 12); var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + mapLink + ' Contributors', maxZoom: 18, }).addTo(map); d3.json("http://jsrun.it/assets/m/7/y/Y/m7yYq", function(error, json) { for (var i = 0; i < json.length; i++) { var railway = json[i]; var col = railway.color; var pre_loc = ""; for (var j = 0; j < railway.stations.length; j++) { var st = railway.stations[j]; var lat = st.location.lat; var lon = st.location.lon; if (pre_loc) { var Line = L.polyline([[pre_loc.lat, pre_loc.lon], [lat, lon]], { "color": "#" + col, "weight": 5, "opacity": 0.6 }).addTo(map); } pre_loc = st.location; } } }); d3.json("http://jsrun.it/assets/y/u/x/L/yuxLx", function(error, json0) { d3.json("http://asa.lotasclub.com/ctm.php", function(error, json1) { for (var i = 0; i < json1.length; i++) { var lat; var lon; var id = json1[i]['@id']; var name = json1[i]['odpt:trainNumber']; var st = json1[i]['odpt:fromStation']; for (var j = 0; j < json0.length; j++) { if (st === json0[j]['owl:sameAs']) { lat = json0[j]['geo:lat']; lon = json0[j]['geo:long']; } } var marker = L.marker([lat, lon], { icon: tIcon, title: name, win_url: "http://jsrun.it/ohisama1/GceR?q=" + name }).on("click", function() { window.open(this.options.win_url, "_blank"); }); marker.addTo(map); } }); }); <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"> </script> <center> <h2> 地下鉄モニター </h2> <a href="http://jsrun.it/ohisama1/aies">help</a> <div id="map"> </div> <a href="http://jsdo.it/ohisama1/s99A">source</a> </center> 地下鉄モニター #map { width: 800px; height: 800px; } .awesome-marker { background: url('http://jsrun.it/assets/C/0/Y/P/C0YP3.png') no-repeat 0 0; width: 35px; height: 46px; position:absolute; left:0; top:0; display: block; text-align: center; } .awesome-marker-shadow { background: url('http://jsrun.it/assets/K/V/v/Q/KVvQY.png') no-repeat 0 0; width: 36px; height: 16px; } @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) { .awesome-marker { background-image: url('https://github.com/lvoogdt/Leaflet.awesome-markers/tree/2.0/develop/dist/images/markers-soft@2x.png'); background-size: 720px 46px; } .awesome-marker-shadow { background-image: url('https://github.com/lvoogdt/Leaflet.awesome-markers/tree/2.0/develop/dist/images/markers-shadow@2x.png'); background-size: 35px 16px; } } .awesome-marker i { color: #333; margin-top: 10px; display: inline-block; font-size: 14px; } .awesome-marker .icon-white { color: #fff; } .awesome-marker-icon-red { background-position: 0 0; } .awesome-marker-icon-darkred { background-position: -180px 0; } .awesome-marker-icon-lightred { background-position: -360px 0; } .awesome-marker-icon-orange { background-position: -36px 0; } .awesome-marker-icon-beige { background-position: -396px 0; } .awesome-marker-icon-green { background-position: -72px 0; } .awesome-marker-icon-darkgreen { background-position: -252px 0; } .awesome-marker-icon-lightgreen { background-position: -432px 0; } .awesome-marker-icon-blue { background-position: -108px 0; } .awesome-marker-icon-darkblue { background-position: -216px 0; } .awesome-marker-icon-lightblue { background-position: -468px 0; } .awesome-marker-icon-purple { background-position: -144px 0; } .awesome-marker-icon-darkpurple { background-position: -288px 0; } .awesome-marker-icon-pink { background-position: -504px 0; } .awesome-marker-icon-cadetblue { background-position: -324px 0; } .awesome-marker-icon-white { background-position: -574px 0; } .awesome-marker-icon-gray { background-position: -648px 0; } .awesome-marker-icon-lightgray { background-position: -612px 0; } .awesome-marker-icon-black { background-position: -682px 0; } (function (window, document, undefined) { "use strict"; L.AwesomeMarkers = {}; L.AwesomeMarkers.version = '2.0.1'; L.AwesomeMarkers.Icon = L.Icon.extend({ options: { iconSize: [35, 45], iconAnchor: [17, 42], popupAnchor: [1, -32], shadowAnchor: [10, 12], shadowSize: [36, 16], className: 'awesome-marker', prefix: 'glyphicon', spinClass: 'fa-spin', extraClasses: '', icon: 'home', markerColor: 'blue', iconColor: 'white' }, initialize: function(options) { options = L.Util.setOptions(this, options); }, createIcon: function() { var div = document.createElement('div'), options = this.options; if (options.icon) { div.innerHTML = this._createInner(); } if (options.bgPos) { div.style.backgroundPosition = (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px'; } this._setIconStyles(div, 'icon-' + options.markerColor); return div; }, _createInner: function() { var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options; if (options.icon.slice(0, options.prefix.length + 1) === options.prefix + "-") { iconClass = options.icon; } else { iconClass = options.prefix + "-" + options.icon; } if (options.spin && typeof options.spinClass === "string") { iconSpinClass = options.spinClass; } if (options.iconColor) { if (options.iconColor === 'white' || options.iconColor === 'black') { iconColorClass = "icon-" + options.iconColor; } else { iconColorStyle = "style='color: " + options.iconColor + "' "; } } return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>"; }, _setIconStyles: function(img, name) { var options = this.options, size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']), anchor; if (name === 'shadow') { anchor = L.point(options.shadowAnchor || options.iconAnchor); } else { anchor = L.point(options.iconAnchor); } if (!anchor && size) { anchor = size.divideBy(2, true); } img.className = 'awesome-marker-' + name + ' ' + options.className; if (anchor) { img.style.marginLeft = (-anchor.x) + 'px'; img.style.marginTop = (-anchor.y) + 'px'; } if (size) { img.style.width = size.x + 'px'; img.style.height = size.y + 'px'; } }, createShadow: function() { var div = document.createElement('div'); this._setIconStyles(div, 'shadow'); return div; } }); L.AwesomeMarkers.icon = function(options) { return new L.AwesomeMarkers.Icon(options); }; }(this, document)); var tIcon = L.AwesomeMarkers.icon({ prefix: 'fa', markerColor: 'green', icon: 'subway' }); var map = L.map('map').setView([35.7, 139.7], 12); var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + mapLink + ' Contributors', maxZoom: 18, }).addTo(map); d3.json("http://jsrun.it/assets/m/7/y/Y/m7yYq", function(error, json) { for (var i = 0; i < json.length; i++) { var railway = json[i]; var col = railway.color; var pre_loc = ""; for (var j = 0; j < railway.stations.length; j++) { var st = railway.stations[j]; var lat = st.location.lat; var lon = st.location.lon; if (pre_loc) { var Line = L.polyline([[pre_loc.lat, pre_loc.lon], [lat, lon]], { "color": "#" + col, "weight": 5, "opacity": 0.6 }).addTo(map); } pre_loc = st.location; } } }); d3.json("http://jsrun.it/assets/y/u/x/L/yuxLx", function(error, json0) { d3.json("http://asa.lotasclub.com/ctm.php", function(error, json1) { for (var i = 0; i < json1.length; i++) { var lat; var lon; var id = json1[i]['@id']; var name = json1[i]['odpt:trainNumber']; var st = json1[i]['odpt:fromStation']; for (var j = 0; j < json0.length; j++) { if (st === json0[j]['owl:sameAs']) { lat = json0[j]['geo:lat']; lon = json0[j]['geo:long']; } } var marker = L.marker([lat, lon], { icon: tIcon, title: name, win_url: "http://jsrun.it/ohisama1/GceR?q=" + name }).on("click", function() { window.open(this.options.win_url, "_blank"); }); marker.addTo(map); } }); }); <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"> </script> <center> <h2> 地下鉄モニター </h2> <a href="http://jsrun.it/ohisama1/aies">help</a> <div id="map"> </div> <a href="http://jsdo.it/ohisama1/s99A">source</a> </center> #map { width: 800px; height: 800px; } .awesome-marker { background: url('http://jsrun.it/assets/C/0/Y/P/C0YP3.png') no-repeat 0 0; width: 35px; height: 46px; position:absolute; left:0; top:0; display: block; text-align: center; } .awesome-marker-shadow { background: url('http://jsrun.it/assets/K/V/v/Q/KVvQY.png') no-repeat 0 0; width: 36px; height: 16px; } @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) { .awesome-marker { background-image: url('https://github.com/lvoogdt/Leaflet.awesome-markers/tree/2.0/develop/dist/images/markers-soft@2x.png'); background-size: 720px 46px; } .awesome-marker-shadow { background-image: url('https://github.com/lvoogdt/Leaflet.awesome-markers/tree/2.0/develop/dist/images/markers-shadow@2x.png'); background-size: 35px 16px; } } .awesome-marker i { color: #333; margin-top: 10px; display: inline-block; font-size: 14px; } .awesome-marker .icon-white { color: #fff; } .awesome-marker-icon-red { background-position: 0 0; } .awesome-marker-icon-darkred { background-position: -180px 0; } .awesome-marker-icon-lightred { background-position: -360px 0; } .awesome-marker-icon-orange { background-position: -36px 0; } .awesome-marker-icon-beige { background-position: -396px 0; } .awesome-marker-icon-green { background-position: -72px 0; } .awesome-marker-icon-darkgreen { background-position: -252px 0; } .awesome-marker-icon-lightgreen { background-position: -432px 0; } .awesome-marker-icon-blue { background-position: -108px 0; } .awesome-marker-icon-darkblue { background-position: -216px 0; } .awesome-marker-icon-lightblue { background-position: -468px 0; } .awesome-marker-icon-purple { background-position: -144px 0; } .awesome-marker-icon-darkpurple { background-position: -288px 0; } .awesome-marker-icon-pink { background-position: -504px 0; } .awesome-marker-icon-cadetblue { background-position: -324px 0; } .awesome-marker-icon-white { background-position: -574px 0; } .awesome-marker-icon-gray { background-position: -648px 0; } .awesome-marker-icon-lightgray { background-position: -612px 0; } .awesome-marker-icon-black { background-position: -682px 0; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ohisama1 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/s99A/js"></script> application Discussion Questions on this code? Tags application