phpvms/resources/js/maps/live_map.js

const leaflet = require('leaflet');

import draw_base_map from './base_map'
import { ACTUAL_ROUTE_COLOR } from './config'

/**
 * Render the live map
 * @param opts
 * @private
 */
export default (opts) => {

  opts = Object.assign({
    update_uri: '/api/acars',
    pirep_uri: '/api/pireps/{id}/acars',
    positions: null,
    render_elem: 'map',
    aircraft_icon: '/assets/img/acars/aircraft.png',
  }, opts);

  const map = draw_base_map(opts);
  const aircraftIcon = leaflet.icon({
    iconUrl: opts.aircraft_icon,
    iconSize: [42, 42],
    iconAnchor: [21, 21],
  })

  let layerFlights = null
  let layerSelFlight = null
  let layerSelFlightFeature = null
  let layerSelFlightLayer = null

  /**
   * When a flight is clicked on, show the path, etc for that flight
   * @param feature
   * @param layer
   */
  const onFlightClick = (feature, layer) => {

    const uri = opts.pirep_uri.replace('{id}', feature.properties.pirep_id)

    const flight_route = $.ajax({
      url: uri,
      dataType: 'json',
      error: console.log
    })

    $.when(flight_route).done((routeJson) => {
      if (layerSelFlight !== null) {
        map.removeLayer(layerSelFlight)
      }

      layerSelFlight = leaflet.geodesic([], {
        weight: 7,
        opacity: 0.9,
        color: ACTUAL_ROUTE_COLOR,
        wrap: false,
      }).addTo(map)

      layerSelFlight.geoJson(routeJson.line)

      layerSelFlightFeature = feature
      layerSelFlightLayer = layer
      //map.fitBounds(layerSelFlight.getBounds());
    })
  }

  const updateMap = () => {

    console.log('reloading flights from acars...')

    /**
     * AJAX UPDATE
     */

    let flights = $.ajax({
      url: opts.update_uri,
      dataType: 'json',
      error: console.log
    })

    $.when(flights).done(function (flightGeoJson) {

      if (layerFlights !== null) {
        layerFlights.clearLayers()
      }

      layerFlights = leaflet.geoJSON(flightGeoJson, {
        onEachFeature: (feature, layer) => {

          layer.on({
            click: (e) => {
              onFlightClick(feature, layer)
            }
          })

          let popup_html = ''
          if (feature.properties && feature.properties.popup) {
            popup_html += feature.properties.popup
          }

          layer.bindPopup(popup_html)
        },
        pointToLayer: function (feature, latlon) {
          return leaflet.marker(latlon, {
            icon: aircraftIcon,
            rotationAngle: feature.properties.heading
          })
        }
      })

      layerFlights.addTo(map)

      if (layerSelFlight !== null) {
        onFlightClick(layerSelFlightFeature, layerSelFlightLayer)
      }
    })
  }

  updateMap()
  setInterval(updateMap, 10000)
};