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
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.