MbtaMetro.Live.Map (MbtaMetro v1.1.2)

View Source

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 component. 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.
  • :icons - A list of maps with the following keys:
    • :coordinates - A list of two numbers in geojson format: longitude first, then latitude.
    • :name / :type - These are the same as for MbtaMetro.Components.Icon.icon/1. :type indicates which icon package the icon comes from (one of "regular", "solid", "brands", "metro", "system", or a custom type), and :name is the name of the specific icon.
    • :class - A string or list of strings with additional CSS classes
    • :anchor - One of "center", "top", "bottom-left", etc, to indicate what part of the icon should be anchored to coordinates. Defaults to "center".

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

handle_event(binary, params, socket)

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.

render(assigns)

There are three main sections of the map component. The wrapper 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.

update(assigns, socket)

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

handle_event(binary, params, socket)

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.

render(assigns)

There are three main sections of the map component. The wrapper 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.

update(assigns, socket)

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.