twitmapperjs/map.html at master · RGUCode/twitmapperjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
    <title>Leaflet.heat demo</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src='/socket.io/socket.io.js'></script>
    <script src="https://drive.google.com/uc?export=download&id=0B6ZJ33KlacBgM2VxbTR5N1FqZ3M"></script>
    <style>
        #map { width: 800px; height: 600px; }
        body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
        .ghbtns { position: relative; top: 4px; margin-left: 5px; }
        a { color: #0077ff; }
    </style>

</head>
<body>

<p>
    Brexit and bremain
    <span id='totals'> </span>

</p>

<div id="map"></div>

<!-- <script src="../node_modules/simpleheat/simpleheat.js"></script>
<script src="../src/HeatLayer.js"></script> -->

<script>


    var socket = io();

    socket.on('welcome', function(data) {
        addMessage(data.message);

        // Respond with a message including this clients' id sent from the server
        //socket.emit('i am client', {data: 'foo!', id: data.id});
    });
    socket.on('time', function(data) {
        addToMap(data);

    });
    socket.on('error', console.error.bind(console));
    socket.on('message', console.log.bind(console));
    socket.on('data', console.log.bind(console));

    function addMessage(message) {
      document.getElementById('totals').innerHTML = message;
        //var text = document.createTextNode(JSON.stringify(message));
            console.log(message);
    }
    function addToMap(p){
      console.log(p);
      var latlng = L.latLng(p.cord[0], p.cord[1], 1);
      //addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });
      if(p.eu=='i'){
        yes.addLatLng(latlng);
      }
      else if (p.eu=='o'){
        no.addLatLng(latlng);
      }
      L.marker(latlng).addTo(map);
    }

    var map = L.map('map').setView([54.6983304,-1.2311024], 7);
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
    var yes = L.heatLayer([], {radius: 30,blur: 15, gradient:{0.4: 'lightblue', 0.65: 'blue', 1: 'darkblue'}}).addTo(map);
    var no = L.heatLayer([], {radius: 30,blur: 15, gradient:{0.4: 'lightpink', 0.65: 'red', 1: 'darkred'}}).addTo(map);

</script>
</body>
</html>