View Source MbtaMetro.Live.Map (MbtaMetro v0.0.61)

A live component that renders a map using maplibre-gl.

You can optionally pass in the following assigns:

  • :class - The CSS classes to apply to the map container. You'll most likely want to set the height and width of the map here.
  • :config - The maplibre gl configuration.
  • :click_handler - A boolean indicating whether to handle map clicks.
  • :lines - A list of lists of coordinates to draw lines on the map. Each list of coordinates should be a list of two numbers: the longitude and latitude.
  • :pins - A list of coordinates to place pins on the map. Each coordinate should be a list of two numbers: the longitude and latitude.
  • :points - A list of coordinates to place points on the map. Each coordinate should be a list of two numbers: the longitude and latitude.

If :click_handler is true, the component will send a map-clicked event to the parent live view when the map is clicked.

pins will be assigned a letter A-Z for each marker added to the map. E.g., 0 => A, 1 => B, etc.

Summary

Functions

The map has to be loaded before we can draw anything on it. Once the Hook tells us it has loaded, we tell it to update the lines and markers. We then update the loaded assign to true so we know future updates can be drawn on the map.

There are three main sections of the map component. The container will hold the map itself. The lines will hold the lines to draw on the map. The markers will hold the points and pins to place on the map.

We check if the map is loaded; if so, we tell the Hook to update the lines and markers every time the component updates. If the map is not loaded, we check for for assigns and assign defaults for any not passed into the component.

Functions

Link to this function

handle_event(binary, params, socket)

View Source

The map has to be loaded before we can draw anything on it. Once the Hook tells us it has loaded, we tell it to update the lines and markers. We then update the loaded assign to true so we know future updates can be drawn on the map.

There are three main sections of the map component. The container will hold the map itself. The lines will hold the lines to draw on the map. The markers will hold the points and pins to place on the map.

The associated Hook will take the lines and markers and draw them on the map.

We check if the map is loaded; if so, we tell the Hook to update the lines and markers every time the component updates. If the map is not loaded, we check for for assigns and assign defaults for any not passed into the component.