JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="http://www.nextbus.com/googleMap/googleMapJavascript.min.js"></script>
<script src="http://www.nextbus.com/googleMap/elabel.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?client=gme-nextbusinc&amp;v=3.EXP&amp;channel=index"></script>
<script src="http://www.nextbus.com/js/vendor/lzstring-1.3.3.min.js"></script>
<script src="http://www.nextbus.com/googleMap/debug.js"></script>
<link rel="stylesheet" href="http://www.nextbus.com/googleMap/mobile/c/map.css">
<link rel="stylesheet" href="http://www.nextbus.com/googleMap/mobile/c/mobile.css">
<script src="http://www.nextbus.com/googleMap/mobile/j/mobile.js"></script>
<div id='shell'><div id='skin'>
	  <p id='stats'></p>
		<header id='header'>
			<nav>
				<ul>
					<li id='logo'><a href='/'>NextBus Inc.</a></li>
					<li id='nbgm-menu'><a href='#' data-w='menu'>Menu</a></li>
				</ul>
			</nav>
		</header>
		<div id='map_shell'>
			<div id='map'></div>
		</div>
		<div id='overlay'></div>
		<section id='menu' class='overlay'>
			<h2>Menu <span></span></h2>
			<ul>
				<li data-w='route-list'>Select Routes</li>
				<li data-w='help'>Help</li>
				<li class='func' data-func='showOrHideAdherence'>Schedule Adherance</li>
				<li class='func' data-func='showOrHideNoBlockVehicles'>Unassigned Vehicles</li>
			</ul>
		</section>
		<section id='route-list' class='overlay'>
			<h2>Select Routes <span></span></h2>
			<div id='canvas-wrap'>
				<ul>
				
					<li id="_F" data-func='routeSelected'>F-Market & Wharves</li>
				
					<li id="_J" data-func='routeSelected'>J-Church</li>
				
					<li id="_KT" data-func='routeSelected'>KT-Ingleside/Third Street</li>
				
					<li id="_L" data-func='routeSelected'>L-Taraval</li>
				
					<li id="_M" data-func='routeSelected'>M-Ocean View</li>
				
					<li id="_N" data-func='routeSelected'>N-Judah</li>
				
					<li id="_NX" data-func='routeSelected'>NX-N Express</li>
				
					<li id="_1" data-func='routeSelected'>1-California</li>
				
					<li id="_1AX"...

JavaScript

var RADIUS_IN_PIXELS_FOR_MATCHING_CLICK_TO_STOPS = 7;
	  var TIMEOUT_BETWEEN_UPDATING_PREDICTIONS = 20000;
	   
	  var TIMEOUT_BETWEEN_UPDATING_VEHICLES = 4000;
	  var STALE_VEHICLE_TIME_IN_SECS = 10*60;  // 10 minutes
	  
	  // Variables for affecting margins around map and also
	  // the border type. These are used in the onResize() function.
	  // These do NOT affect 
	  var LEFT = 150;
	  var TOP = 6;
	  var RIGHT = 6;
	  var BOTTOM = 16;  // This value needs to be at least 16 to work with Firefox when reducing size of window.
	  var BORDER = 4;
	  var BORDER_TYPE = 'groove';
	
	  departingWord = 'Departing';
	  arrivingWord = 'Arriving';
	
		
	  var agencyTag = "sf-muni";
	  // The initial route to show
	  var routeTags = [
	  
	       "22"
	    
	  ];
	
	  // MGS var routeLaneOrder=[['38L','38']];
	
	  var showAffectedByLayover = true;
		
		var dirTag;
		var stopTag;
		
		
		
		
		
		var useSmoothAnimation = false;
		var smoothAnimationDuration = 0; // time in milliseconds for marker to move to position
		
	
	
	  
	  var keyForNextTime="2173320968482";
	  
	   // Displays the help window. Called when user clicks on Help... link
	  function popupHelp() { 
      window.open("help.jsp", "help", "left=10,top=10,width=500,height=650,scrollbars,dependent");
	  }
  
	  // Displays the route selector window. 
	  // Called when user clicks on Select Routes... link
	  function popupRouteSelector() {
      window.open("routeSelector.jsp?a=" + agencyTag + (am?"&agencyMap=true":""), "routeSelector", "left=10,top=10,width=380,height=500,scrollbars,resizable,dependent");	      
	  }