地下鉄モニター

Readme
JavaScript 175 lines
HTML 19 lines
CSS 99 lines

地下鉄モニター

var tIcon = L.AwesomeMarkers.icon({
    prefix: 'fa',
    markerColor: 'green',
    icon: 'subway'
});

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);
        }                    
    });  
});

地下鉄モニター

#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;
}

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

地下鉄モニター

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags