ash_tree_project/render_ashtrees.js at master · codeforprinceton/ash_tree_project · 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
82
83
84
85
86
var lang = 'en-US'
var accessToken = 'CFPAT-9b7a21488af237b472d49f2a7a235f8dacc4f99cee5df788bcb47bf6c5a4bb4d'
var space_id = 'vxu5be6w735m'
var query = {}
query.content_type = 'ashTree'
var baseAPI = 'https://api.contentful.com'
var assetAPI = baseAPI +"/spaces/" + space_id + "/assets/<asset_id>"; // ?access_token=" + accessToken;

var client = contentful.createClient({
  // This is the access token for this space. Normally you get the token in the Contentful web app
  accessToken: accessToken
})

refresh();

function refresh() {
  client.getSpace(space_id)
  .then((space) => space.getEntries(query))
  .then((response) => renderPhotos(response.items))
  .catch(console.error)
}

function assetEndpoint(asset_id) {
  return assetAPI.replace("<asset_id>", asset_id);
}

function paintEntries (photo, entry) {
  mylat.push(photo.fields.latlong[lang].lat)
  mylon.push(photo.fields.latlong[lang].lon)
  var $photo = $("<div class='well well-sm'>" + photo.fields.datetime[lang] + " / " + photo.fields.latlong[lang].lat + ":" + photo.fields.latlong[lang].lon + "</div>")
  var $img = $("<img width='250px' src='" + photo.fields.s3url[lang] + "'>");
  $photo.append($img);
  $('#ashtree-row').append($photo)
}

//Render AshTrees
function renderPhotos (data) {
  $('#ashtree-row').empty()
  if( data.length > 0 ) {
    $.each( data, function( i, photo ){
      mylat.push(photo.fields.latlong[lang].lat)
      mylon.push(photo.fields.latlong[lang].lon)
      var $media = $("<div class='media'>");
      var $img = $("<div class='media-left'><img class='d-flex mr-3' width='250px' src='" + photo.fields.s3url[lang] + "'></div>");
      var $photo = $("<div class='media-body'>" + photo.fields.datetime[lang] + " / " + photo.fields.latlong[lang].lat + ":" + photo.fields.latlong[lang].lon + "</div>")
      $media.append($img);
      $media.append($photo);
      $('#ashtree-row').append($media)

      //var $photo = $("<div class='well well-sm'>" + photo.fields.datetime[lang] + " / " + photo.fields.latlong[lang].lat + ":" + photo.fields.latlong[lang].lon + "</div>")
      //var $img = $("<img width='250px' src='" + photo.fields.s3url[lang] + "'>");
      //$photo.append($img);
      //$('#ashtree-row').append($photo)
    });
    drawMap();
  }else{
    var $photo = $("<div>No ash trees yet!</div>")
    $('#ashtree-row').append($photo)
  }
}

var mymap;
var mylat = [40.3516366];
var mylon = [-74.6602049];

function initMap() {
        mymap = new google.maps.Map(document.getElementById('mymap'), {
           center: {lat: mylat[0], lng: mylon[0]},
            zoom: 14
        });
}

function drawMap() {
        mymap = new google.maps.Map(document.getElementById('mymap'), {
           center: {lat: mylat[0], lng: mylon[0]},
            zoom: 14
        });

        for (i = 0; i < mylat.length; i++) {
          mymarker = new google.maps.Marker({
              position:  {lat: mylat[i], lng: mylon[i]},
              map: mymap,
              title: 'blah!'
          });
        }
}