# Map Component Technical Details
This section describes how data flows from the Map to the Calendar and from the Calendar to the Map. We describe the usual sequence of events.
Our goal here is to trace the way location latitude and longitude (along with some kind of descriptive natural language name) get from the map component, to the calendar (that adds time to the Visit), to the graph (whose algorithm can identify other Visits sharing the same space-time values).
# The Visit Definition
The Visit object contains the history of the Visit. Data comes from all three major components (viz., Map, Calendar, and Graph).
{
id: this.attr(null), // Unique generated value
// From Map component (for the graph component (calendar uses only name))
name: this.string(''), // POI or "Gathering"
placeId: this.string(''), // Unique ID of space or place
lat: this.number(), // Latitude of Visit space/place
lng: this.number(), // Longitude of Visit space/place
// From Calendar component
marked: this.string(''), // DateTime Visit made it to the calendar
color: this.string('secondary'), // New event: Secondary. Logged event: Primary
start: this.number(''), // Epoch milliseconds of Visit start
end: this.number(''), // Epoch milliseconds of Visit end
interval: this.string(''), // Date string of start to event values
timed: this.boolean(true), // True means Visit isn't all day
// From the graph component
logged: this.string(''), // ID of the graph node for this Visit
}
# The Marker Definition
The Marker comes from the Map component. It serves two purposes. First, it stores all the data for each visitor interaction with the map. Markers are cached in localStorage and get set when the map reopens. The second use of a Marker is to share a subset of its data with the calendar (viz., name, lat, lng). These values get copied to the Visit object that the Calendar component effects.
{
// for tooltips and visible marker labels
title: title, // "Place" or "Gathering"
label: { text: label, color: 'white' }, // label is assigned a value before
// to cache place data for logging
// displayed in map and sent to Calendar
name, // POI name or name given by Visitor
placeId, // For known places, a unique identifier
position, // Latitude and Longitude of space or place
// displayed in map
address, // Address or Plus_Code of public space
map: this.map, // Used by mapping platform to show markers
}
# Coming to Terms
Mapping platforms all share the same generic set of terms. LCT incorporates these variables into its design.
# Icons
Icons have colors and images. This blog post provides a list that googleMaps implements:
https://www.blog.google/products/maps/google-maps-gets-new-look/ (opens new window)
# Points of Interest
A POI is related to the icons in the mapping platform. LCT will use POI data for Visits, as appropriate.
# Markers
Visitors add Markers to their map. Markers convert a POI into a destination, the space in the space-time identity of a Visit.
# Map to Calendar
The first thing a visitor does is select a point on the map. Since LCT starts with no visits, the map has icons but no markers. The visitor is most likely to select a public place either by name or by selecting a building on the map.
Our goal is to capture the currentPlace
variable (passed to the calendar5 component) wtih the following data:
- Name
- Address
- Position
- PlaceId
Let's convert a POI into a Visit.
# Steps
The map component has a click event handler that does the following with the optional placeId
and the location
data taken from the map:
- Sets the
center
coordinates of the map to thelocation
of the selected place - Since we clicked a category marker we dereference the mapping platform with the
placeId
to get Place details - We use the Place details to render an InfoWindow on the map
- From the InfoWindow we can
- delete the marker or
- mark our calendar or
- use the close button to dismiss the dialog
# Autocomplete
Since we expect LCT to center on a small community or large organization, how do we pick the political or administrative center on the map if the mapping platform does not provide a category marker?
We use the autocomplete field to specify the objective. For instance, typing "Sisters City Hall" will return its address and will place a marker on the map.