Options
All
  • Public
  • Public/Protected
  • All
Menu

The Offline Map component allows you to show a map in your Project that does not require any internet connection. The map is typically of a small area to reduce project size.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Offline Map Demo', offlineMapDemo)
.addParameter('Map', uActions.ParamType.OFFLINE_MAP)
.register();
function offlineMapDemo(comp) {
var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.mapTilesDefinition = 'Umajin/metadata.json'
mapComp.routingDataFile = 'Umajin/umajin.osm'
mapComp.displayCrosshair = true;
}

Hierarchy

Index

Constructors

Properties

aboveImage: string

An additional image displayed when the user’s location is above the currently displayed level.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.aboveImage = 'marker-location-down.png';
accuracy: number

How accurate the system (GPS) location must be before it will be displayed and used by the map, in metres.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.accuracy = 10;
alpha: number

The alpha transparency of the Component. Range from 0 to 100.

beaconImage: string

The image used to display a location that is detected using BLE beacons.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.beaconImage = 'marker-location.png';
belowImage: string

An additional image displayed when the user’s location is below the currently displayed level.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.belowImage = 'marker-location-up.png';
clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components: ComponentList

Access this Component's sub-components.

customFeedParameters: string

Parameters for a custom feed (defined in JavaScript).

var mapComp = uComps.cast.toOfflineMap(comp);
var currentParameters = mapComp.customFeedParameters;
dataUrl: string

Url of feed data from website or Umajin Cloud.

var mapComp = uComps.cast.toOfflineMap(comp);
var currentUrl = mapComp.dataUrl;
directionIndicator: string

This image is placed over top of the location image, and rotated to match the compass heading of the phone.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.directionIndicator = 'marker-arrow.png';
displayCrosshair: boolean

When true, a centred cross hair is placed over the map so you can be sure where the map is centred.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.displayCrosshair = true;
displayPoiTitle: boolean

If true, a text title will be displayed next to each POI.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.displayPoiTitle = true;
displayRouteMap: boolean

Draws the data used for route finding over top of the tiles. This allows you to visually confirm the correct data is available.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.displayRouteMap = true;
feedId: number

Id of the Umajin Cloud feed.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.feedId = 14725;
formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height: number

The height of the Component.

isBeaconActive: boolean

Find if there is a beacon that is currently active.

var mapComp = uComps.cast.toOfflineMap(comp);
var beaconActive = mapComp.isBeaconActive;
isLocationKnown: boolean

Find if the current location of the user is know.

var mapComp = uComps.cast.toOfflineMap(comp);
var locationKnown = mapComp.isLocationKnown;
isNavigationActive: boolean

Find if the app is currently navigating through a route.

var mapComp = uComps.cast.toOfflineMap(comp);
var activeNavigation = mapComp.isNavigationActive;
isRouteActive: boolean

Find if there is a route currently active.

var mapComp = uComps.cast.toOfflineMap(comp);
var activeRoute = mapComp.isRouteActive;
limitDisplay: boolean

When true, the map can not be scrolled outside the bounds as defined by the tiles.json file.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.limitDisplay = true;
lingerTime: number

The length of time, in seconds, the last location will stay visible, if beacon or GPS location dissappears. Range 1 to 60. Default is 10.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.lingerTime = 10;
locationSize: number

The various location images will be scaled to this physical size, allowing them to adjust to different device resolutions. Range 2 to 20. Default is 5.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.locationSize = 5;
manualImage: string

The image used to display a location set using the Set Manual Location on Map action.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.manualImage = 'marker-location.png';
mapTilesDefinition: string

Location of the map tile images.Tile images should be in numbered folders.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.mapTilesDefinition = 'Umajin/metadata.json'
markerSize: number

When markers are set, their images will be scaled to this physical size, allowing them to adjust to different device resolutions. Range 2 to 20. Default is 5.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.markerSize = 8;

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

name: string

Name of the component.

parent: Component

Access this Component's parent component.

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

poiAlignment: PoiAlignment

Selects if the POI image will be positioned with the location at the bottom center (in the style of a pin in the map) or centered on the location.. uComps.PoiAlignment: 1 - CENTER, 2 - CENTER_BOTTOM

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiAlignment = uComps.PoiAlignment.CENTER;
poiFontColor: string

Color for the POI text as a hexadecimal value. The alpha channel will be added, if not included.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiFontColor = '#631B1B';
poiFontFilename: string

The font file to use for the POI text.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiFontFilename = 'vera.ttf';
poiFontSize: number

The font size for the POI text.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiFontSize = 8;
poiFontTracking: number

The distance between text characters. Range -5 to 10. Default is 0.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiFontTracking = 0.5;
poiSize: number

Defines the width to display POI images, in millimetres. Range 2 to 20. Default is 5.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.poiSize = 4;
routeLineColor: string

Defines the color of the line drawn to show a route, once found.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.routeLineColor = '#f6a950';
routeLineWidth: number

The width in pixels of the route line. Range 1 to 50. Default is 5.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.routeLineColor = 6;
routingDataFile: string

The .OSM file containing the data to be used for finding routes on the map.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.routingDataFile = 'Umajin/umajin.osm'
showVisitedNodes: boolean

for Routing After trying to find a route, this will show a marker at every node (point) on the route map that was checked in the search. This allows you to find gaps in paths, by looking for nodes that are not marked when it seems they should be.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.showVisitedNodes = true;
signalThreshold: number

The minimum signal level to consider the beacon “close” enough to define location. Range -120 to 0. Default is -80.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.signalThreshold = -50;
systemImage: string

The image used to display System (GPS) location, if enabled.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.systemImage = 'marker-location.png';
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

unvisitedImage: string

This image is displayed if the beacon is not showing a close image, and has not been visited before.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.unvisitedImage = 'unvisited.png';
useSystemLocation: boolean

When true, location from GPS/wifi/cellular is displayed on the map.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.useSystemLocation = true;
visible: boolean

Whether or not the Component is visible.

visitedImage: string

This image is displayed if the beacon is not showing a close image, and has been visited before.

var mapComp = uComps.cast.toOfflineMap(comp);
mapComp.visitedImage = 'visited.png';
width: number

The width of the Component.

x: number

The x position of the Component relative to its parent.

y: number

The y position of the Component relative to its parent.

Methods

  • addMapMarker(markerName: string, latitude: number, longitude: number, imageFilename: string, title: string, description: string): void
  • Places a named map marker at a latitude and longitude. This marker will remain on the map until cleared. If there is an existing marker with the same name it will be replaced.

    Parameters

    • markerName: string

      Name used to identify the marker.

    • latitude: number

      Positionn of marker.

    • longitude: number

      Positionn of marker.

    • imageFilename: string

      Marker image to use.

    • title: string

      Title to display for the marker.

    • description: string

      Description of the marker.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.addMapMarker('City Center', -40.35595165, 175.61109933, 'pointer.png', 'The Square', 'Te Marae o Hine is a large open space at the center of Palmerston North');

    Returns void

  • addMapRouteByLatLong(startLongitude: number, startLatitude: number, startLevel: string, endLongitude: number, endLatitude: number, endLevel: string): void
  • Finds a route between two (latitude, longitude) points. It will first find the nearest points on a path on the route map, and then find a route between the two points. To find a route from the user’s current location, leave the start latitude and longitude blank.

    Parameters

    • startLongitude: number

      start position.

    • startLatitude: number

      start position.

    • startLevel: string

      name of level for start position.

    • endLongitude: number

      end position.

    • endLatitude: number

      end position.

    • endLevel: string

      name of level for end position.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.addMapRouteByLatLong(-40.3387903838, 175.620532865, 'G', -40.338455091, 175.618837709, 'G')

    Returns void

  • centreMapOnUserLocation(lock: boolean, zoom: boolean, zoomLevel: number): void
  • This moves the map so that the user’s current location is centered.

    Parameters

    • lock: boolean

      When true, the map will move as the user moves, to keep centered on their location.

    • zoom: boolean

      When true, map will be zoomed to the level defined by zoomLevel.

    • zoomLevel: number

      number to define zoom level. Range 1 to 25.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.centreMapOnUserLocation(true, true, 19);

    Returns void

  • clearAllMarkers(): void
  • Clears all map markers.

    var mapComp = uComps.cast.toOfflineMap(comp);
    mapComp.clearAllMarkers();

    Returns void

  • clearManualLocation(): void
  • Clears a manually set user location. The map will go back to showing location by beacons, GPS etc as applicable.

    var mapComp = uComps.cast.toOfflineMap(comp);
    mapComp.clearManualLocation()

    Returns void

  • clearMapMarker(markerName: any): void
  • Clears a map marker with the given name.

    Parameters

    • markerName: any

      Name used to identify the marker.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.clearMapMarker('City Center');

    Returns void

  • clearMapRoute(): void
  • Clears the currently displayed route.

    var mapComp = uComps.cast.toOfflineMap(comp);
    mapComp.clearMapRoute();

    Returns void

  • emit(eventType: string, data: Object): void
  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

  • fakeBeaconClose(beaconId: string): void
  • This makes the map behave as if a specified Beacon ID is nearby. This helps you test beacon behaviours, especially on the desktop when designing the app.

    Parameters

    • beaconId: string

      name of beacon.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.fakeBeaconClose('Reception Area')

    Returns void

  • focus(): void
  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
    .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
    .register();
    function setFocus(textEntry) {
    textEntry.focus();
    }

    Returns void

  • get(propertyName: string): any
  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
    var text1=uPages.current.components.getText('Text 1');
    console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

  • mapStartNavigation(bluetoothDisabledMessage: string, locationUnknownMessage: string, beforeRouteMessage: string, zoomAtStart: boolean, zoomLevel: number): void
  • Starts turn-by-turn directions for the current route.

    Parameters

    • bluetoothDisabledMessage: string

      Message displayed if Bluetooth is currently disabled.

    • locationUnknownMessage: string

      Message displayed if location is unknown.

    • beforeRouteMessage: string

      Message displayed when location is known, but has not yet reached the route.

    • zoomAtStart: boolean

      When true, map will be zoomed to the start of the route.

    • zoomLevel: number

      number to define zoom level. Range 1 to 25.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.mapStartNavigation("To receive directions, please switch Bluetooth on", "Directions will be available when we detect your location", "Please make your way to the Reception", true, 21);

    Returns void

  • mapStopNavigation(): void
  • Stops turn-by-turn directions.

    var mapComp = uComps.cast.toOfflineMap(comp);
    mapComp.mapStopNavigation();

    Returns void

  • on(eventType: string, callback: Function): void
  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

  • refresh(): void
  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

  • set(propertyName: string, value: any): void
  • set(data: Object): void
  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
    uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

  • setManualLocation(longitude: number, latitude: number, levelName: string): void
  • Sets the map to show a fixed location. The image is changed to that set by the manualImage property.

    Parameters

    • longitude: number

      position for the map to center on.

    • latitude: number

      position for the map to center on.

    • levelName: string

      name of a level found in levels.txt.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setManualLocation(15)

    Returns void

  • setMapCenterLocation(longitude: number, latitude: number, levelName: string): void
  • Positions the map to be centred on the specified latitude and longitude and on the specified level. Note that if latitude, longitude and level are blank then the map will be centered on the current user location (if known), same as the centreMapOnUserLocation action.

    Parameters

    • longitude: number

      position for the map to center on.

    • latitude: number

      position for the map to center on.

    • levelName: string

      name of a level found in levels.txt.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setMapCenterLocation(-43.5309385, 172.6338719, '2')

    Returns void

  • setMapDiagnostics(setDiagnostics: boolean): void
  • Turns display of diagnostics on the map on and off. Useful for debugging issues.

    Parameters

    • setDiagnostics: boolean

      When true, diagnostic information becomes visible on the screen.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setMapDiagnostics(true);

    Returns void

  • setMapGps(useSystemLocation: boolean): void
  • Allows you to control whether the map will use GPS (system) location while running. This can be useful to switch between indoor and outdoor operation.

    Parameters

    • useSystemLocation: boolean

      When true, use the system (GPS) location while running.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setMapGps(true);

    Returns void

  • setMapLevel(option: string, levelName: string): void
  • Changes the level (floor) of the map that is being viewed. Options allow you to set a specific floor or go up or down. This may have no effect if already at top or bottom, or you specify a level that doesn’t exist in levels.txt.

    Parameters

    • option: string

      'up', 'down', or 'set', if a levelName is also defined.

    • levelName: string

      name of a level found in levels.txt.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setMapLevel('set','Top Floor')

    Returns void

  • setMapZoomLevel(level: number): void
  • Zooms the map to a specified level. Note that the map tiles will only support a certain range.

    Parameters

    • level: number

      number to define zoom level. Range 1 to 25.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.setMapZoomLevel(15)

    Returns void

  • tween(seconds: number, params: Object, type?: TweenType): void
  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void

  • updateMapDirections(): void
  • Triggers the current direction again. This can be useful to update the display when something else may have changed.

    var mapComp = uComps.cast.toOfflineMap(comp);
    mapComp.updateMapDirections();

    Returns void

  • zoomMapToFitPoints(latitudeA: number, longitude_A: number, latitudeB: number, longitudeB: number): void
  • Zooms and pans the map to fit two specified coordinates in a defined area.

    Parameters

    • latitudeA: number

      First coordinate of defined area.

    • longitude_A: number

      First coordinate of defined area.

    • latitudeB: number

      Second coordinate of defined area.

    • longitudeB: number

      Second coordinate of defined area.

      var mapComp = uComps.cast.toOfflineMap(comp);
      mapComp.zoomMapToFitPoints(-40.35508262, 175.603959,-40.35757633, 175.6178425);

    Returns void

  • zoomMapToRoute(fitAreaComponent: Component): void
  • Zooms and pans the map to show the current route in a defined area. To define the area, create any component such as a rectangle and make it invisible or behind the map. This allows an area of the screen to be selected, which is used to show the route.

    Parameters

    • fitAreaComponent: Component

      component to define the area for the map to move to.

      var mapComp = uComps.cast.toOfflineMap(comp);
      var rectComp = uComps.cast.toRectangle(comp2);
      mapComp.zoomMapToRoute(rectComp);

    Returns void