backtracker/render-posts.html at master · iainbryson/backtracker · 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
77
78
79
80
81
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

    <script type="text/javascript" src="markers2.js" />
    <script type="text/javascript"></script>
    <script type="text/javascript">

;;

// https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker
function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   }
}

function initialize() {

    markers = markers.filter(function(d) { return d.gps; })

    markers.forEach(function(d) { console.log(d.gps.latitude); })

    var latExt = d3.extent(markers, function(d) { return d.gps.latitude; })
    var longExt = d3.extent(markers, function(d) { return d.gps.longitude; })

    var marker_dates = markers.map( function(d) { if (d.date_time) return new Date(d.date_time); })
    var date_extent = d3.extent(marker_dates)
    var time_range = d3.time.scale().domain(date_extent).range([0,1])

    var mapOptions = {
        zoom: 3,
        draggableCursor: 'default',
        center: new google.maps.LatLng((latExt[1] - latExt[0])/2, (longExt[1] - longExt[0])/2)
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)

    for (var i = 0; i < markers.length; i++) {
        var m = markers[i]
        var myLatLng = new google.maps.LatLng(m.gps.latitude, m.gps.longitude)
        var pin = pinSymbol(d3.interpolateRgb(d3.rgb(0x40,0x00,0x00),
        d3.rgb(0xff,0x00,0x00))(time_range(new Date(m.date_time))))
        var marker = new google.maps.Marker({
            position: myLatLng,
            map:map,
            icon: pin,
            link: m.post,
            title: m.title
        });
        marker.link = m.link
    }
}


function loadScript() {

  var script = document.createElement('script');
  script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

</script>
  </head>
  <body onload = "loadScript()">
    <div id="map-canvas"></div>
  </body>
</html>