Live flight tracking

[andyslack]

Hi Guys,

Thought I would show what we are working on here and if anyone has any questions, fire away.

We are live tracking flight data and overlaying some client data.

With over 8,000 airports and 30,000 aircraft, it's a real challenge making google maps play ball.

We are using boundaries to re-render the markers based on their current view, as they move the map or zoom, it will re-render.

Still more work to do, but gives you a little insight into the power of the package.

[NathanAP]

Great job there dude! I'm happy to see your project here!

Sometimes I keep thinking about how many projects we impact with this package. Really glad we can help somehow!

[Viktohblake]

Hi @andyslack is the project open source or accessible? I'm having a challenge with something I believe seeing how you implement something like this with the 'vue-google-maps-community-fork' package could help me.

I have markers displayed on the map which is gotten from my properties array and now I'm trying to display a simple <li> list of my properties data shown on the map, I want that list to re-render and update as user zoom or move the map based on the visible markers that is within the current bound. Like if I zoom the map until only 3 markers are visible, my list should render and show list of those 3 markers.

This is what my data array looks like:
properties: [
{ name: "Property 1", position: {lat: 9.0820,
lng: 8.6753,
}},
{ name: "Property 2", position: {
lat: 11.1360,
lng: 7.6847,
}},
],

I have 2 methods I wrote (visiblemarkers and visibleproperties) to help me display the properties list from the markers and update them based on which marker is visibile:

• visibleMarkers() {
  if(this.mapInstance) {
  console.log("visible markers is called")
  if (this.bounds) {
  return this.properties.filter((property) => {
  return this.bounds.contains(property.position);
  });
  } else {
  return console.log("bounds and properties instance not available");
  }
  } else {
  console.log("map instance not available")
  return [];
  }
  },

• visibleProperties() {
  if(this.mapInstance) {
  console.log("visible properties is called")
  return this.visibleMarkers?.map((marker) => {
  // 'marker' ref is from GMapMarker component where ref="marker"
  const markerPosition = marker.$refs.marker.getPosition();
  return this.properties.find((property) => {
  return property.position === markerPosition;
  });
  });
  }
  };

Here is where I visibleProperties method to show the list:
<li v-for="(property, index) in visibleProperties" :key="index">
<p>{{ property.name }}</p>
<p>{{ property.position }}</p>
</li>

Lastly this is how my event listener for zoom change is, although this is working and firing via my console log test:
map.addListener("zoom_changed", () => {
//update the visible properties
console.log("this is firing")
// update visible properties (re render component)
this.$forceUpdate()
});

So now I think the main issue is with my method and how I'm trying to get the markers that is displayed on the map, and with the above method I keep getting this error Cannot read properties of undefined (reading 'marker').

I will appreciate if you can give me guide on how to go about this. Thanks.

Also @NathanAP I'll be glad if you have an idea on how I can go about this,

[andyslack]

Hey @Viktohblake i will try and share some code tomorrow 👍🏼

[Viktohblake]

Alright @andyslack Thank you!

[andyslack]

@Viktohblake here are some code snippets which should help:

On the <GMapMap> tag you can add something like @idle="mapDragged"

let markers: Ref<FlightMarker[]> = ref([])

<GMapMarker
				:key="index"
				v-for="(m, index) in markers"
				:position="m.position"
				:clickable="true"
				:draggable="false"
				@click="openMarker(m)"
				:icon='{
					path: markerAircraft,
					fillColor: m.fillColor,
					fillOpacity: 1,
					strokeColor: m.strokeColor,
					scale: m.scale,
					rotation: Number(m.position.dir)
				}'>
			</GMapMarker>

async function mapDragged(){
	const google = hiveMap.value.$mapObject
const bounds = google.getBounds()
	const inBoundFlights = flights.filter((t) => {
		return (t.next?.lng && t.next.lng !== 0 && t.next?.lat && t.next.lat !== 0 && bounds.contains({ lat: Number(t.previous.lat), lng: Number(t.previous.lng)}))
	})
	logger({
		severity: LogSeverity.VERBOSE,
		message: `Inbound Flights: ${inBoundFlights.length}`,
	})
	markers.value = inBoundFlights.map((t) => {
		const live = t.flight.status === FlightStatus.live
		if (!live) {
			t.previous = t.next
		}
		return {
			id: t.flight.flight_id,
			position: getPosition(t),
			status: t.flight.status ?? FlightStatus.live,
			fillColor: t.flight.status === FlightStatus.live ? 'orange' : 'white',
			strokeColor: t.flight.status === FlightStatus.live ? 'black' : 'white',
			scale: scale.value
		}
	})
}

Hope it helps.

[Viktohblake]

Thanks for this @andyslack this is definitely helpful!