JSFiddle - React, Tailwind, and code Playground

Using socket.io to plot points on the map.

by MoonScript

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<script src="http://cdn.drivlabs.net/realtimemetrics/globe/socket.io.js"></script>
<div id="map_canvas">map should load here</div>

CSS

html, body, #map_canvas {height: 100%;}
body {margin: 0; padding: 0}
.info-overlay {height: 200px; overflow: auto;}
.request-label {font-weight: bold; margin-bottom: 0; padding-bottom: 0;}
#control-form {margin: 0 0 3px 3px; padding: 3px 5px 3px 3px; border: 1px solid #678AC7; background-color: #FFF; -webkit-border-radius: 6px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px; box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;}
.map-no-display {display: none;}
.map-input {width: 55px; margin: 0 3px 4px;}
.map-input-label {padding: 0 3px;}
.map-input-label, .map-input-text {font-family: Arial; font-size: 10px;}
.dr-info {font-family: Arial;}
.browser-version {font-weight: bold;}
.browser-logo {height: 38px; background-repeat: no-repeat; background-image: url(https://xencdn.drivlabs.net/static/4e52a657bfb22efd05010000/all_browser_logos.png);}
.browser-msie {width: 41px; background-position: 0 0;}
.browser-mozilla {width: 39px; background-position: -38px 0;}
.browser-safari {width: 40px; background-position: -72px 0;}
.browser-opera {width: 36px; background-position: -112px 0;}
.browser-chrome {width: 40px; background-position: -144px 0;}
.browser-other {width: 41px; background-position: -180px 0;}
.browser-win {width: 40px; background-position: -54px -40px;}
.browser-mac {width: 40px; background-position: -90px -40px;}

JavaScript

(function(){
    
var dotFactor = 500000;
var initialZoom = 5;
var joplin = new google.maps.LatLng(37.081476,-94.510574);
var headquarters = new google.maps.LatLng(44.90004,-93.409989);
var debugged = false;
var dots = [], newDots = [];
var dotMax = 1000; // max # of dots on map
var usMap, plotTimer = null;
var plotInterval = 1500; // ms
var thankYouRegEx = /ThankYouPage/;
var timeStampRegEx = /\/Date\(-?(\d+)-\d+\)\//;
var chromeRegEx = /Chrome/;
var safariRegEx = /AppleWebKit/;
var operaRegEx = /Opera/;
var firefoxRegEx = /Firefox/;
var msieRegEx = /MSIE (\d+\.?\d*)/;
var macRegEx = /Macintosh/;
var winRegEx = /Windows/;
var domainRegEx = /^https?:\/\/([^\/]+)\//;
var storefrontRegEx = /\/DRHM\/Storefront\//;
var numericRegEx = /^\d+$/;
    
var socketURL = 'http://cappy-broadcaster.cwa01.drivlabs.net:10101';
var subscribename = 'all requests';
var drIconURL = 'https://xencdn.drivlabs.net/static/4d964a42efc2375611150000/favicon.ico';
var dollarSignURL = 'https://xencdn.drivlabs.net/static/4e4ebe62bfb22e5905010000/dollarsign.png';
/*
var trendLogo = {
    url: 'http://us.trendmicro.com/images/common/logo_tagline_09.gif',
    height: 50,
    width: 305,
    icon: 'https://xencdn.drivlabs.net/static/4e52d57f3eb821391d010000/trend-favicon-16.ico'
};
var eaLogo = {
    url: 'http://drh.img.digitalriver.com/DRHM/Storefront/Site/ea/cm/images/logos/vertical/WebstoreNew_166x59_English.png',
    height: 59,
    width: 166,
    icon: 'https://xencdn.drivlabs.net/static/4e52d777bfb22e7c05010000/origin-favicon-16.ico'
};
var parallelsLogo = {
    url: 'https://xencdn.drivlabs.net/static/4e52d5cc3cc3078734010000/parallels-logo.gif',
    height: 29,
    width: 133,
    icon: 'https://xencdn.drivlabs.net/static/4e52d6293cc3072f34010000/favicon-parallels.ico'
};
*/

var iconSize = new google.maps.Size(16, 16);
    var iconPoint = new google.maps.Point(0, 0);
    
// When favicon isn't in the root folder, get the URL from this list
var iconMap = {
    'www.mattycollector.com':...