nasa-api/EONET/app.js at 24c9ac09a1c62a74de2f80efb63503b2031a9d25 · OpenGenus/nasa-api · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
$(document).ready(function () {

  var setMap = L.map('mapping').setView([0, 0], 2)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
  }).addTo(setMap)

  var totalColors = []

  var markedColor

  $.ajax({
    type: 'GET',
    url: 'https://eonet.sci.gsfc.nasa.gov/api/v2.1/categories?api_key=e0xaFTehVbUGmZjo2H94BthXsxaR8YYemqp9imxM',
    dataType: 'json'
  }).done(function (fetchedData) {
    fetchedData.categories.forEach(function (data) {
      switch (data.id) {
        case 6:
          totalColors.push({id: data.id, title: data.title, color: '#348899'})
          break
        case 7:
          totalColors.push({id: data.id, title: data.title, color: '#962D3E'})
          break
        case 16:
          totalColors.push({id: data.id, title: data.title, color: '#261722'})
          break
        case 9:
          totalColors.push({id: data.id, title: data.title, color: '#76A68F'})
          break
        case 14:
          totalColors.push({id: data.id, title: data.title, color: '#325943'})
          break
        case 19:
          totalColors.push({id: data.id, title: data.title, color: '#D99C52'})
          break
        case 15:
          totalColors.push({id: data.id, title: data.title, color: '#979C9C'})
          break
        case 10:
          totalColors.push({id: data.id, title: data.title, color: '#E54661'})
          break
        case 17:
          totalColors.push({id: data.id, title: data.title, color: '#553285'})
          break
        case 18:
          totalColors.push({id: data.id, title: data.title, color: '#998A2F'})
          break
        case 12:
          totalColors.push({id: data.id, title: data.title, color: '#35478C'})
          break
        case 13:
          totalColors.push({id: data.id, title: data.title, color: '#002D40'})
          break
        case 8:
          totalColors.push({id: data.id, title: data.title, color: '#FF7F66'})
          break
      }
      console.log(totalColors)
    })
    totalColors.forEach(function (colr) {
      $('#list').append('<li>' + '<div style="background-color:' + colr.color + '; width: 105px; height: 35px;">' + colr.title + '</div>' + '</li>')
    })
  })
  console.log(colr);

  $.ajax({
    type: 'GET',
    url: 'https://eonet.sci.gsfc.nasa.gov/api/v2.1/events?api_key=e0xaFTehVbUGmZjo2H94BthXsxaR8YYemqp9imxM',
    dataType: 'json'
  }).done(function (fetchedData) {
    fetchedData.events.forEach(function (data) {
      totalColors.forEach(function (color) {
        if (data.categories[0].id === color.id) {
          markedColor = color.color
          console.log(markedColor)
        }
      })
      var geo = data.geometries
      if (geo[0].type === 'Point') {
        var setCircle = L.geoJson(geo, {
          pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
              radius: 15,
              color: markedColor,
              weight: 1,
              opacity: 1,
              fillOpacity: 0.4,
              fillColor: markedColor
            })
          }
        }).addTo(setMap)
      } else {
        setCircle = L.geoJson(geo, {
          style: {
            'color': markedColor,
            'weight': 2,
            'opacity': 1,
            fillOpacity: 0.4
          }
        }).addTo(setMap)
      }
      var date = new Date(geo[0].date).toDateString()
      setCircle.bindPopup(data.title + '<br>' + date)
      setCircle.addEventListener('click', function (e) {
        e = e || window.event
        $('#title').empty()
        $('#date').empty()
        $('#description').empty()
        $('#source').empty()

        $('#title').append(data.title)
        $('#date').append('CATEGORY: ' + data.categories[0].title + ' | ' + date)
        $('#description').append(data.description)
        $('#source').append('<a href="' + data.sources[0].url + '">[Source]</a>')
      })
    })
  })
})