Map components can be used as a “single selection” map picker (i.e. choose a location), or to show data-linked map markers (or as both - it’s possible to pick an individual location, while also showing map markers that can be clicked on). In the latter case (with map markers), think of the map component as a kind of graphical
ListBox - it’s showing a selection of data items just like a list, where each item can generate an “item selected” event.
To add a map to the wireframe, in EA:
- Add an
Imagecomponent to the wireframe
- In the Properties panel, add a stereotype called
WireframeMap(you may need to add it as a custom stereotype if it isn’t installed in a UML profile)
- Optionally, delete the
In determining the component type, CodeBot will give preference to
Image, but you might want to delete the
WireframeImagestereotype anyway, so it doesn’t look like an image component in the wireframe.
When configured to be a “map picker”, a map can be used like any other text input control in a form. As with other components, either:
- give the map the same name as the attribute it represents, or
- use the
domaintag to specify the attribute name
The attribute must be a
string data type. When the user clicks the map to choose a location, the value emitted will be a single string containing its “latitude,longitude”.
To add map markers, link the map to a domain class (via the
domain tag or a Dependency arrow). The linked attribute name should be the location coordinates, in the form of a “latitude,longitude” string. Each domain item in the relevant database table/collection will then be added as a clickable marker.
When configured like this, the map will behave like a listbox. Click a marker to “choose” that domain item.
Map component is primarily configured through the following tagged values:
|Tag name||Values||Default value||Notes|
| || ||In a form, default is true, otherwise false.||If true, this is a map picker where you select a single location.|
| ||Any text||If this is a map picker, an optional message to display in a popup when you click the selection marker.|
| ||latitude,longitude string with no spaces, e.g. || ||The map’s default location, if no other location is given (e.g. data-linked, or reacting to the value in some other component).|
| ||Integer|| ||The initial zoom level|
| ||any valid CSS size e.g. || ||Leaflet needs the component size to be set when it’s created, so width and height tags are provided to enable that.|
| ||any valid CSS size|| |
| ||domain attribute name|| ||When the map is linked to a domain class (to display multiple map markers), this is the attribute on the linked domain class containing the “latitude,longitude” string value. The marker will be placed at this location.|
| || || ||Whether the map can be zoomed in or out with the mouse scroll-wheel.|
| ||Any CSS class name, without a preceding |
| ||A URL that follows Leaflet’s tile URL format||An openstreetmap layer||In addition to “everyday” street maps, Leaflet can be extended with third-party tile layers, e.g. satellite or topological views. This tag allows you to specify the main tile layer for the map.|
| ||Any text||openstreetmap attribution||Attribution text that accompanies the tile layer. This text appears at the bottom-right of the map.|
To choose a tile layer, we recommend this resource.
Common tagged values shared by most components.
The following actions/events are triggered at run-time:
|Event||Data type||Created when…||Notes|
|Domain item chosen||Domain object/item||a map marker is clicked||The map must be linked to a domain class (via |
|Value changed||string||“single selection” map (i.e. map picker) is clicked, to choose a location||The text value is a single string containing “latitude,longitude”|
The following action/event types can be received by the map, by binding it to some other component:
|Domain item chosen||Domain object/item||Moves the map to the new location. Requires a text attribute representing “latitude,longitude”; this can be specified in the |
|Value changed||string||Moves the map to the new location. The bound value (emitted by the other component) should be a string representing “latitude,longitude”.|