Skip to main content

Map object

The Map object shows a map with your own objects on it: stations, vehicles, pipelines or lines at their geographic position. Their values and colors come from signals like on any other screen.

Before you begin​

  • A page is open in the screen editor.
  • A base map is available: an offline map package on the server, or an online map server that you may use.

Steps​

1. Place a map and choose the base map​

Click Map in the palette and draw the map. Base map in the Map group chooses the background:

Base mapWhere the tiles come from
Project defaultThe default of the project (below)
A map packageAn offline PMTiles package on the YTCC server; no internet needed
An online source of the projectAn XYZ map server or a WMS layer defined by the project
No base mapOnly the background color

Upload package uploads an offline map package (PMTiles, raster); only a server administrator can do it. OSM preview adds the public OpenStreetMap server; here it is used to show the map. After that, Base map shows OpenStreetMap (online preview) and the button is gone. Without a map package the group says No map package on the server.

Map object showing OpenStreetMap tiles; the Map group with Base map OpenStreetMap, No map package on the server, Upload package and the centre fields.
warning

OpenStreetMap's own server is for previews only. Production and offline use are not allowed; use a map package or a map server you are licensed to use in production.

Online sources are defined in the page properties (click an empty part of the page) under Map › Sources: + XYZ base map and + WMS overlay, with Name, URL ({z} {x} {y} for XYZ, {bbox-epsg-3857} for WMS), Attribution, the zoom range and, for overlays, On at start and Opacity. Default base map sets the project default; the first package on the server is used when nothing is set. The attribution is always shown on the map.

2. Set the initial view​

Enter Center latitude, Center longitude and Zoom; here Istanbul at zoom 11. Min zoom and Max zoom (2 and 19 by default) limit how far operators can zoom. The centre and the zoom can be bound to signals, for example to follow a vehicle.

Map of Istanbul at zoom 11 after setting the centre and the zoom.

3. Save a view​

Under Saved views click Add this view. The view stores the centre and the zoom under a name that must be unique on the map; Make initial view makes it the starting view. Operators open saved views from the views button on the map, and the click action Map View goes to a view by name (see Click actions).

Saved views of the map with the new view at zoom 11 and Add this view.

4. Put an object on the map​

Double-click the map to edit its contents: a green bar opens with GeoJSON, Save view, Fit all and Done. Draw an object or drop it from the palette onto the map; it is placed at that geographic position. Here a circle is placed on the map.

Map editing bar above the map of Istanbul with a circle placed on the map.

Each object on the map has a Map location group: Latitude and Longitude (both can be bound to signals, so a moving object follows its position) and Visible zoom (min) and Visible zoom (max). Lines, areas and pipes keep their points on the map and scale with it; other objects keep their size on the screen. GeoJSON imports points, lines and areas as objects (up to 5,000 features and 20 MB). Done or Esc ends the editing.

What operators can do​

ControlSetting
Drag to pan, wheel and double-click to zoomOperator can pan, Operator can zoom
Zoom in, Zoom out, Initial view buttonsZoom buttons, Initial view button
Saved viewsViews button
Base map and overlaysLayer switcher (off by default)
Scale barScale bar

Clicking an object on the map runs its own click actions. Followed object keeps an object in the centre; when the operator pans, following pauses and a button resumes it. Cluster groups objects that lie close together into one badge with their number, colored by the worst state; clicking the badge zooms in.

Good to know​

  • Without internet an online base map shows only the background color.
  • Scripts can move the map with Maps.setView, Maps.fitItems, Maps.follow and Maps.gotoBookmark.