Frontend Map Default View

View Rectangle

  • The view rectangle is the part of the map that is visible to the user. The rectangle is tracked by the center point of the view, together with the width and the height of the visible component.

View State

  • The view state is used to keep track of the center coordinates of the map, together with the current scale.
  • This view state is necessary, in order to 'remember' the last map view the user had when navigating away, and to return to the same view when the map is loaded again.

View Behavior

  • Combining the two concepts, view rectangle and view state, we can determine what elements are in view and how the map should behave when the user pans/zooms/etc. on the map, or when elements of the web page resize (browser window resizes, or the toolbars left/right of the map resize).

  • In the case of the map actions, like panning or zooming, the view state will be updated with the new center coordinate and with the new scale (if it changed).

  • For the resizing events, to keep in line with the behavior of leaving the map and returning to the same map view as before, the app maintains the same center coordinate and scale, and instead changes the width and height of the view rectangle, keeping the map centered. This behavior also means that when the toolbars left/right of the map get resized, the map apparently 'pans' slightly left/right to keep the same center coordinate. This is the result of the coordinate being fixed, but the width/height of the view rectagle getting changed. (see following screenshot for example of toolbar resize result). Default View Behavior

  • By default, when entering a map that did not have a saved view state, the map gets centered on (0, 0), with a default scale of 1, and the width/height of the view rectangle are determined by the size of the map element in the browser.