better IE support

staugaard · Mar 8, 2011 · a453712 · a453712
1 parent 4ef96a5
commit a453712
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -34,30 +34,34 @@
         };
         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
-        overlays.push(new HeatMapOverlay(map, {fade: 0.01}));
-        //overlays.push(new ImageOverlay(map, {src: 'heart.png', fade: 0.1}));
-        //overlays.push(new MarkerOverlay(map, {maxMarkers: 50}));
+
+        if (document.createElement("canvas").getContext) {
+          overlays.push(new HeatMapOverlay(map, {fade: 0.01}));
+        } else {
+          overlays.push(new MarkerOverlay(map, {maxMarkers: 50}));
+        };
 
 
-        var ws = null
+        var ws = null;
 
         function liveMapConnect() {
-          console.log('connecting...');
+          //console.log('connecting...');
           ws = new WebSocket("ws://chat.zende.sk:9999/");
 
           ws.onmessage = function(e) {
+            //alert(e);
             var data = JSON.parse(e.data);
             for (var i = 0; i < overlays.length; i++) {
               overlays[i].addDot(data[0], data[1]);
             };
           };
 
           ws.onclose = function() {
-            console.log("socket closed");
+            //alert("socket closed");
           };
 
           ws.onopen = function() {
-            console.log("connected...");
+            //alert("connected...");
           };
         };
 

diff --git a/public/test.html b/public/test.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css">
+      html { height: 100% }
+      body { height: 100%; margin: 0px; padding: 0px }
+    </style>
+    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
+    <!--[if IE]><script src='js/excanvas.js'></script><![endif]-->
+    <script src='js/swfobject.js'></script>
+    <script src='js/FABridge.js'></script>
+    <script src='js/web_socket.js'></script>
+    <script src='js/canvas_overlay.js'></script>
+    <script>
+      var map = null;
+      var overlays = [];
+
+      var sf = new google.maps.LatLng(37.779399,-122.420654);
+
+      $(document).ready(function() {
+        var myOptions = {
+          center: new google.maps.LatLng(30,0),
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+          keyboardShortcuts: false,
+          zoom: 2,
+          maxZoom: 2,
+          minZoom: 2,
+          mapTypeControl: false,
+          panControl: false,
+          scaleControl: false,
+          streetViewControl: false,
+          zoomControl: false,
+          scrollwheel: false
+        };
+        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+
+        //overlays.push(new HeatMapOverlay(map, {fade: 0.01}));
+        //overlays.push(new ImageOverlay(map, {src: 'heart.png', fade: 0.1}));
+        overlays.push(new MarkerOverlay(map, {maxMarkers: 50}));
+
+        setInterval(function() {
+          var data = [Math.random() * 45, Math.random() * 45];
+          for (var i = 0; i < overlays.length; i++) {
+            overlays[i].addDot(data[0], data[1]);
+          };
+        }, 1000);
+
+        var ws = null
+
+        function liveMapConnect() {
+          console.log('connecting...');
+          ws = new WebSocket("ws://chat.zende.sk:9999/");
+
+          ws.onmessage = function(e) {
+            var data = JSON.parse(e.data);
+            for (var i = 0; i < overlays.length; i++) {
+              overlays[i].addDot(data[0], data[1]);
+            };
+          };
+
+          ws.onclose = function() {
+            console.log("socket closed");
+          };
+
+          ws.onopen = function() {
+            console.log("connected...");
+          };
+        };
+
+        liveMapConnect();
+      });
+    </script>
+  </head>
+  <body>
+    <p style="margin: auto; text-align: center;">
+      <a href="index.html">Heat Map</a>
+      <a href="marker.html">Markers</a>
+      <a href="heart.html">Hearts</a>
+      <div id="map_canvas" style="margin: auto; text-align: center; width:1024px; height:600px;"></div>
+    </p>
+  </body>
+</html>