Skip to content
Permalink
Browse files

Fix and revamp everything!

- Remove toggle Google Maps transit layer
- Perf fix a bit for marker rendering
- Update all data, from citymapper and wikipedia
- No need yarn anymore, use npm
  • Loading branch information...
cheeaun committed Feb 17, 2018
1 parent 1e4dd8d commit b6264f1ebfca70c45f7b27ef59a3c2ca2ebf9a59
@@ -39,8 +39,6 @@ <h2>RailRouter SG</h2>
<p>Sister sites: <a href="https://busrouter.sg/" target="_blank">🚍 BusRouter SG</a> <a href="https://taxirouter.sg/" target="_blank">🚖 TaxiRouter SG</a></p>
<h2>Legend</h2>
<ul id="legend"></ul>
<h2>Options</h2>
<p><label id="toggle-transit"><input type="checkbox" id="checkbox-transit"> Show Google's transit layer</label></p>
<p><button id="about-okay" ontouchstart>Okay</button></p>
</div>
<div id="map"></div>
@@ -52,11 +50,11 @@ <h2>Options</h2>
<div id="nearest-station"></div>
<div id="bounds-warning">Looks like you're lost.<br><button id="back-sg">Go back to Singapore</button>.</div>
<!--div id="debug" style="position: absolute; z-index: 999; bottom: 0; left: 0; background: red; color: #fff; padding: 10px;"></div-->
<inline-json src="data/all.json" variable="data"></inline-json>
<inline-json src="data/v2/all.json" variable="data"></inline-json>
<script src="assets/infobox.js"></script>
<script src="assets/locationmarker.js"></script>
<script src="assets/app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpk0BS7iLdbn5U545tiIN12k1OCgj2cc4&libraries=geometry&callback=initMap"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpk0BS7iLdbn5U545tiIN12k1OCgj2cc4&libraries=geometry&callback=initMap&v=3.exp"></script>
<script>
if ('serviceWorker' in navigator){
navigator.serviceWorker.register('service-worker.js').then(function(registration){
@@ -32,35 +32,13 @@ function initMap(){
backgroundColor: '#B3D1FF',
disableDefaultUI: true,
keyboardShortcuts: true,
clickableIcons: false,
styles: [
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{ color: '#ffffff' }
]
},{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{ color: '#cccccc' },
]
},{
featureType: 'road.arterial',
stylers: [
{ visibility: 'simplified' }
]
},{
featureType: 'transit.station.rail',
stylers: [
{ visibility: 'off' }
]
},{
featureType: 'road',
elementType: 'labels.icon',
stylers: [
{ visibility: 'off' }
]
}
]
});
@@ -84,6 +62,7 @@ function initMap(){
var $boundsWarning = $('bounds-warning');
map.addListener('bounds_changed', function(){
var bounds = map.getBounds();
if (!bounds) return;
if (bounds.intersects(mapBounds)){
$boundsWarning.classList.remove('visible');
} else {
@@ -95,14 +74,6 @@ function initMap(){
map.fitBounds(mapBounds);
}, false);

var transitLayer = new google.maps.TransitLayer();
var $transitCheckbox = $('checkbox-transit');
transitLayer.setMap($transitCheckbox.checked ? map : null);
$transitCheckbox.addEventListener('change', function(){
transitLayer.setMap($transitCheckbox.checked ? map : null);
}, false);
var $transitToggle = $('toggle-transit');

if (navigator.geolocation){
var LocationMarker = _LocationMarker(google);
var locationMarker = new LocationMarker({
@@ -378,7 +349,15 @@ function init(){
var markers = data.stops.map(function(stop){
var codes = [];
var ref = stop.ref || stop.asset_ref;
if (ref){
var _codes = stop.codes;
if (_codes){
codes = _codes.map(function(c){
return {
code: c.text,
color: c.color,
};
});
} else if (ref){
codes = ref.split(';').map(function(k){
var code = k.match(/^[a-z]{1,2}/i)[0].toLowerCase();
if (data.routeMaps[code]) code = data.routeMaps[code];
@@ -449,7 +428,7 @@ function init(){
html += '<div><span class="exit-info"><b>' + count + '</b> entrance' + s + '/exit' + s + '</span>&nbsp;&nbsp;';
html += '<div class="inline-block">';
stop.exits.forEach(function(exit){
html += '<a class="exit-label" onclick="zoomTo(' + exit.coord.join(',') + ')">' + exit.exit + '</a> ';
html += '<a class="exit-label" onclick="zoomTo(' + exit.coord.join(',') + ')">' + (exit.exit || '&nbsp;&nbsp;') + '</a> ';
});
html += '</div>';
html += '</div>';
@@ -464,7 +443,7 @@ function init(){
var stopExits = [];
var stopLines = [];
(stop.exits || []).forEach(function(exit){
var label = exit.exit;
var label = exit.exit || '';
var eCanvas = exitCanvas(label);
var exitPosition = {lat: exit.coord[0], lng: exit.coord[1]};
stopExits.push(new google.maps.Marker({
@@ -505,26 +484,28 @@ function init(){
return marker;
});

var currentZoom = map.getZoom();
google.maps.event.addListener(map, 'zoom_changed', function(){
var zoom = map.getZoom();

var visible = zoom >= 12;
markers.forEach(function(marker){
marker.setOptions({
visible: visible,
icon: zoom >= 14 ? marker._icons.large : marker._icons.small,
});
marker.setVisible(visible);
});

if ((currentZoom < 14 && zoom >= 14) || (currentZoom >= 14 && zoom < 14)){
markers.forEach(function(marker){
marker.setIcon(zoom >= 14 ? marker._icons.large : marker._icons.small);
});
}
currentZoom = zoom;

var exitVisible = zoom >= 16;
exitMarkers.forEach(function(marker){
marker.setOptions({
visible: exitVisible,
});
marker.setVisible(exitVisible);
});
exitLines.forEach(function(line){
line.setOptions({
visible: exitVisible,
});
line.setVisible(exitVisible);
});
});
}
Oops, something went wrong.

0 comments on commit b6264f1

Please sign in to comment.
You can’t perform that action at this time.