Converting .JSON list to google maps

Question

Hi I have a aircraft json list on a pi connected to a home network that I would like to convert to a google maps format similar to flightradar24.com etc. I have tried multiple ways but have not got very far. Any help would be good I am only a beginner with coding so excuse the not so good explanation. Thanks :)

{ "now" : 1497814126.3,
  "messages" : 20531195,
  "aircraft" : [
    {"hex":"c82089","squawk":"5625","flight":"ANZ519  ","altitude":3250,"vert_rate":3008,"track":79,"speed":225,"messages":88,"seen":69.0,"rssi":-24.9},
    {"hex":"c81881","squawk":"0262","flight":"ANZ101  ","lat":-36.881150,"lon":174.829440,"nucp":7,"seen_pos":0.3,"altitude":9725,"vert_rate":3136,"track":269,"speed":330,"messages":1360,"seen":0.1,"rssi":-8.1},
    {"hex":"aae597","squawk":"0767","flight":"AAL83   ","lat":-36.149918,"lon":175.464592,"nucp":7,"seen_pos":0.4,"altitude":23400,"vert_rate":-1792,"track":212,"speed":386,"messages":1734,"seen":0.1,"rssi":-24.8},
    {"hex":"c81dd5","squawk":"0256","flight":"QFA140  ","lat":-36.892043,"lon":174.183456,"nucp":7,"seen_pos":0.0,"altitude":21800,"vert_rate":2240,"track":270,"speed":398,"messages":4023,"seen":0.0,"rssi":-27.1},
    {"hex":"c8178c","squawk":"0260","flight":"ANZ937  ","lat":-36.605002,"lon":173.758772,"nucp":6,"seen_pos":52.9,"altitude":26675,"vert_rate":1152,"track":295,"speed":412,"messages":4913,"seen":1.4,"rssi":-32.3}
  ]
}

user2314737 · Accepted Answer · 2017-06-18 20:02:19Z

1

Here is a demo that shows how to view latitude/longitude data as markers on a map

var data = [{
    "hex": "c82089",
    "squawk": "5625",
    "flight": "ANZ519  ",
    "altitude": 3250,
    "vert_rate": 3008,
    "track": 79,
    "speed": 225,
    "messages": 88,
    "seen": 69.0,
    "rssi": -24.9
  },
  {
    "hex": "c81881",
    "squawk": "0262",
    "flight": "ANZ101  ",
    "lat": -36.881150,
    "lon": 174.829440,
    "nucp": 7,
    "seen_pos": 0.3,
    "altitude": 9725,
    "vert_rate": 3136,
    "track": 269,
    "speed": 330,
    "messages": 1360,
    "seen": 0.1,
    "rssi": -8.1
  },
  {
    "hex": "aae597",
    "squawk": "0767",
    "flight": "AAL83   ",
    "lat": -36.149918,
    "lon": 175.464592,
    "nucp": 7,
    "seen_pos": 0.4,
    "altitude": 23400,
    "vert_rate": -1792,
    "track": 212,
    "speed": 386,
    "messages": 1734,
    "seen": 0.1,
    "rssi": -24.8
  },
  {
    "hex": "c81dd5",
    "squawk": "0256",
    "flight": "QFA140  ",
    "lat": -36.892043,
    "lon": 174.183456,
    "nucp": 7,
    "seen_pos": 0.0,
    "altitude": 21800,
    "vert_rate": 2240,
    "track": 270,
    "speed": 398,
    "messages": 4023,
    "seen": 0.0,
    "rssi": -27.1
  },
  {
    "hex": "c8178c",
    "squawk": "0260",
    "flight": "ANZ937  ",
    "lat": -36.605002,
    "lon": 173.758772,
    "nucp": 6,
    "seen_pos": 52.9,
    "altitude": 26675,
    "vert_rate": 1152,
    "track": 295,
    "speed": 412,
    "messages": 4913,
    "seen": 1.4,
    "rssi": -32.3
  }
];

function initMap() {
  var myLatLng = {
    lat: -36.363,
    lng: 175.044
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: myLatLng
  });

  for (var i = 0; i < data.length; i++) {
    var flight = data[i],
      latLng = new google.maps.LatLng(flight.lat, flight.lon);

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.flight
    });
  }

}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap">
</script>


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

answered Jun 18, 2017 at 20:02

user2314737

29.7k20 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kieran Read Over a year ago

Thanks alot! Any way I can make it live and move the <i>]; function initMap() { var myLatLng = { lat: -36.363, lng: 175.044 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: myLatLng }); for (var i = 0; i < data.length; i++) { var flight = data[i], latLng = new google.maps.LatLng(flight.lat, flight.lon); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.flight }); } }</i> to another page:)

user2314737 Over a year ago

Use a setInterval to load new data and change the position of the markers with marker.setPosition()

Kieran Read Over a year ago

Thanks will do :).

Kieran Read Over a year ago

I am having trouble I am very confused I have done some new code so that the json file is external. Please help me make the makers update with the JSON which need to be grabbed aswell. maps.aerophotos.cf/test

Collectives™ on Stack Overflow

Converting .JSON list to google maps

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related