Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Editor

The Editor is an API for editing map data that can be used to easily access, add, remove and edit various types of map data. Changes can be automatically synchronized with various remote backends services. It offers various tools for manipulating map-data through user interaction.

Hierarchy

  • Editor

Index

Constructors

constructor

  • example
     import {Map} from '@here/xyz-maps-display';
     import {Editor} from '@here/xyz-maps-editor';
    
     //create map display
     const display = new Map( mapDiv, {
         zoomLevel : 19,
         center: {
             longitude: 8.53422,
             latitude: 50.16212
         },
         // add layers to display
         layers: layers
     });
    
    // create the map editor
    editor = new Editor( display, {
         // add the layers that should be edited
        layers: layers
    });
    

    Parameters

    • display: Map

      the map display to be used with the map editor.

    • Optional options: EditorOptions

      options to customize the map editor.

    Returns Editor

Properties

container

container: HTMLElement

The HTMLElement used by the Map Editor.

Methods

active

  • active(active?: boolean): boolean
  • enable or disable the editor.

    Parameters

    • Optional active: boolean

      true to enable or false to disable the editor

    Returns boolean

    the current active state

addEventListener

  • addEventListener(type: EditorEventTypes, listener: (event: EditorEvent) => void): any
  • addEventListener(type: "error", listener: (event: Error) => void): any
  • Add an EventListener to the editor. Valid Events are: "tap", "dbltap", "pointerup", "pointerenter", "pointerleave", "featureUnselected", "error", "dragStart", "dragStop".

    Additional details about the different events:

    • "tap", "pointerup", "dbltap": These events are thrown when the user taps (or double taps) on any feature or the map itself.
    • "pointerenter", "pointerleave": Occurs when a pointer enters or leaves the hit test area of a map feature.
    • "featureUnselected": This event is fired when a feature gets unselected automatically by the Editor ( eg: automatic linksplit ).
    • "error": The event is fired when error occurs.
    • "dragStart": The event is fired when the user starts dragging an Address, Place, Marker or a shape-point of a Navlink/Area.
    • "dragStop": The event is fired when the user finishes dragging of a Address, Place, Marker or a shape-point of a Navlink/Area.

    Parameters

    • type: EditorEventTypes

      A string representing the event type to listen for.

    • listener: (event: EditorEvent) => void

      the listener function that will be called when an event of the specific type occurs

    Returns any

  • Add an Error EventListener to the editor.

    Parameters

    • type: "error"

      the EventListener type is "error"

    • listener: (event: Error) => void

      the listener function that will be called when an Error occurs

        • (event: Error): void
        • Parameters

          • event: Error

          Returns void

    Returns any

addFeature

addHook

  • Add a hook function that will be called during the execution of the editing operation.

    Possible operation types are: 'Navlink.disconnect', 'Navlink.split', 'Feature.remove', 'Coordinates.remove'

    Parameters

    Returns boolean

addLayer

  • add a TileLayer to the editor and enable editing of its map data.

    Parameters

    • layer: TileLayer

      the layer to be added to editor.

    Returns boolean

    true indicates layer has been added successfully, otherwise false.

addObserver

  • addObserver(name: "active" | "ready" | "history.current" | "history.length" | "changes.length", observer: (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any) => void): void
  • This method registers an observer for the property named by the caller. Supported observables: 'active', 'ready', 'history.current', 'history.length', 'changes.length'

    Parameters

    • name: "active" | "ready" | "history.current" | "history.length" | "changes.length"

      The name of the property to observe.

    • observer: (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any) => void

      the observer function that is called when the value of the observable changes.

        • (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any): void
        • Parameters

          • name: "active" | "ready" | "history.current" | "history.length" | "changes.length"
          • value: any
          • prevValue: any

          Returns void

    Returns void

batch

  • batch(action: () => void): void
  • Batches multiple feature edits into a single history entry. This allows combining multiple actions, such as modifying properties or coordinates, so that only a single history step is created for undo/redo purposes.

    Use this method when you want to group multiple feature modifications (such as setting properties or coordinates) into a single history step for easier undo/redo management.

    example

    editor.batch(() => { feature.prop("name", "newName"); // Modify feature property feature.coord(newCoordinate); // Modify feature coordinates });

    remarks

    This method is useful when you want to execute multiple edits in sequence but treat them as a single operation for undo/redo. The changes will be bundled into one history entry, simplifying the undo/redo process.

    see

    {@link editor.undo} for undoing the last action.

    see

    {@link editor.redo} for redoing the last undone action.

    see

    {@link editor.beginBatch} for starting a batch of edits manually.

    see

    {@link editor.endBatch} for finalizing a batch of edits manually.

    Parameters

    • action: () => void

      A function that contains one or more feature modification actions. All edits within this function will be grouped together as a single history step.

        • (): void
        • Returns void

    Returns void

beginBatch

  • beginBatch(): void
  • Begins a new batch operation for multiple feature edits.

    Call this function before making a series of edits to a feature. All changes made between beginBatch and endBatch will be grouped together as a single history entry. This allows more control over when to create a history step for a series of edits.

    example

    editor.startBatch(); // Start a batch operation feature.prop("name", "newName"); // Modify feature property feature.coord(newCoordinate); // Modify feature coordinates editor.endBatch(); // Finish the batch and commit changes as a single history entry

    remarks

    This method is helpful when you want to make multiple edits and control when the changes are committed to history. The edits made within the startBatch/endBatch block are treated as a single operation.

    see

    {@link editor.endBatch} for finalizing a batch operation.

    see

    {@link editor.undo} for undoing the last action.

    see

    {@link editor.redo} for redoing the last undone action.

    see

    {@link editor.batch} for an alternative method to group edits without manually starting and ending a batch.

    Returns void

config

  • Get the current value of a specific editor option.

    Parameters

    • name: string

    Returns any

    the value of the specific editor option.

  • Get a deep copy of the currently active editor options.

    Returns EditorOptions

    the editor options as a key/value map.

  • Set the value of a specific editor option.

    Parameters

    • name: string

      the name of the option to set

    • value: any

      the value that should be set for the specific option

    Returns any

  • Set one or more editor options.

    Parameters

    • options: EditorOptions

      the option key/value map that should be merged with the existing editor options.

    Returns any

createFeatureContainer

destroy

  • destroy(): void
  • Destroy the map editor

    Returns void

endBatch

  • endBatch(): void
  • Ends the current batch operation and creates a single history entry for all changes made since startBatch.

    This function should be called after making all desired edits within a startBatch block. Once called, all changes will be committed as a single entry in the local history, enabling easy undo/redo of the entire batch.

    example

    editor.startBatch(); // Start a batch operation feature.prop("name", "newName"); // Modify feature property feature.coord(newCoordinate); // Modify feature coordinates editor.endBatch(); // Finalize the batch and create a single history entry

    remarks

    The endBatch method ensures that all modifications made within the batch are recorded as a single step in the local history. After calling this, you can undo or redo the entire set of changes together.

    see

    {@link editor.startBatch} for beginning a batch operation.

    see

    {@link editor.undo} for undoing the last action.

    see

    {@link editor.redo} for redoing the last undone action.

    see

    {@link editor.batch} for an alternative method to group feature edits into a single history step without manually starting and ending a batch.

    Returns void

export

  • export(): string
  • Export data of all modified features.

    Returns string

    A JSON encoded string containing all modified features and its respective layer information.

geoToPixel

  • Convert geographical coordinate to a pixel coordinate relative to the current mapview on screen.

    Parameters

    • coordinate: GeoPoint | [number, number, number]

      the geographical coordinate

    Returns PixelPoint

    The pixel coordinate.

get

  • get(key: "active" | "ready" | "history.current" | "history.length" | "changes.length"): any
  • This method retrieves the current value of an observable property.

    Parameters

    • key: "active" | "ready" | "history.current" | "history.length" | "changes.length"

      The name of the property whose value is to be retrieved

    Returns any

    value - The retrieved value of the property or undefined if no such property exists

getDrawingBoard

  • get the DrawingBoard to enable mouse/touch based drawing of the geometry for Line, Navlink or Area features.

    Returns DrawingBoard

getFeature

  • getFeature(featureId: string | number, layerId: string | TileLayer): any
  • Get a feature by id and layer.

    Parameters

    • featureId: string | number

      the id of the feature

    • layerId: string | TileLayer

      the id of the layer or the layer itself to which the feature belongs.

    Returns any

    the found feature in the map, otherwise null.

getHooks

getLayers

  • Get all layers that are added to the editor.

    Returns TileLayer[]

    Array if layers that are added to the editor.

  • Get a specific Layer at the index in the layer list of the editor.

    Parameters

    • index: number

    Returns TileLayer

    the respective layer at index

getOverlay

  • Returns the overlay TileLayer used for user interaction with the editable map features.

    Returns TileLayer

    the TileLayer containing all "UI" features used for user interaction with the map features.

getRangeSelector

  • get the tool for selecting ranges on Navlink features.

    Returns RangeSelector

getSelectedFeature

  • Retrieves the currently selected feature.

    Returns Feature

    • The currently selected feature. If no Feature is selected, it returns null.

getZoomLevel

  • getZoomLevel(): number
  • Get the current zoomLevel.

    deprecated

    Returns number

    The current zoomLevel of the map.

import

  • import(json: string): void
  • Import Features to the editor that have previously been exported with Editor.export.

    Parameters

    • json: string

      A JSON encoded string containing all modified features and its respective layer information.

    Returns void

info

  • Get information of all modified Features of the editor.

    Returns Feature[]

    Array of modified objects.

pixelToGeo

  • Convert a pixel position relative to the current mapview on screen to a geographical coordinate.

    Parameters

    • coordinate: PixelPoint | [number, number, number]

      The coordinate on screen in pixels.

    Returns GeoPoint

    the geographical coordinate

redo

  • redo(steps?: number): void
  • Redo the latest change operation(s). One change operation can contain multiple feature modifications.

    The changes are stored and managed locally. Submitting Editor.submit modified Feature(s) to the remote will clear the local change history.

    Parameters

    • Optional steps: number

      the number of change operations to redo.

    Returns void

removeEventListener

  • removeEventListener(type: EditorEventTypes, listener: (event: EditorEvent) => void): any
  • removeEventListener(type: "error", listener: (event: Error) => void): any
  • Remove an EventListener from the layer. Valid Events are: "tap", "dbltap", "pointerup", "pointerenter", "pointerleave", "featureUnselected", "error", "dragStart", "dragStop".

    Parameters

    • type: EditorEventTypes

      A string which specifies the type of event for which to remove an event listener.

    • listener: (event: EditorEvent) => void

      The listener function of the event handler to remove from the editor.

    Returns any

  • Remove an Error EventListener from the layer.

    Parameters

    • type: "error"

      the EventListener type is "error".

    • listener: (event: Error) => void

      The error event listener to be remove from the editor.

        • (event: Error): void
        • Parameters

          • event: Error

          Returns void

    Returns any

removeHook

  • Remove a specific hook for the desired editing operation.

    Possible operation types are: 'Navlink.disconnect', 'Navlink.split', 'Feature.remove', 'Coordinates.remove'

    Parameters

    Returns boolean

removeLayer

  • Remove a layer from the editor.

    layer - the layer to be removed from the map editor. Editing get disabled for the layer.

    Parameters

    Returns boolean

    true indicates layer is removed successfully, otherwise false.

removeObserver

  • removeObserver(name: "active" | "ready" | "history.current" | "history.length" | "changes.length", observer: (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any) => void): void
  • This method removes the observer for the property. Supported observables: 'active', 'ready', 'history.current', 'history.length', 'changes.length'

    Parameters

    • name: "active" | "ready" | "history.current" | "history.length" | "changes.length"

      The name of the property that should no longer be observed

    • observer: (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any) => void

      The observer function to be removed

        • (name: "active" | "ready" | "history.current" | "history.length" | "changes.length", value: any, prevValue: any): void
        • Parameters

          • name: "active" | "ready" | "history.current" | "history.length" | "changes.length"
          • value: any
          • prevValue: any

          Returns void

    Returns void

revert

  • revert(): void
  • Revert changes, fetch data from repository.

    Returns void

search

  • Search for feature(s) in the provider.

    example
    // searching by id:
    provider.search({id: 1058507462})
    // or:
    provider.search({ids: [1058507462, 1058507464]})
    
    // searching by point and radius:
    provider.search({
     point: {longitude: 72.84205, latitude: 18.97172},
     radius: 100
    })
    
    // searching by Rect:
    provider.search({
     rect:  {minLon: 72.83584, maxLat: 18.97299, maxLon: 72.84443, minLat: 18.96876}
    })
    
    // remote search:
    provider.search({
     rect:  {
       minLon: 72.83584,
       maxLat: 18.97299,
       maxLon: 72.84443,
       minLat: 18.96876
     },
     remote: true, // force provider to do remote search if feature/search area is not cached locally
     onload: function(result){
      // search result is only return in this callback function if features are not found in cache.
     }
    })
    

    Parameters

    • options: { filter?: (feature: Feature[]) => boolean; id?: number | string; ids?: number[] | string[]; layers?: TileLayer[]; onload?: (result: Feature[] | null) => void; point?: GeoPoint; radius?: number; rect?: GeoRect | GeoJSONBBox; remote?: boolean }

      configure the search

      • Optional filter?: (feature: Feature[]) => boolean

        function for optional result filtering.

          • Parameters

            Returns boolean

      • Optional id?: number | string

        search feature by id.

      • Optional ids?: number[] | string[]

        Array of feature ids to search.

      • Optional layers?: TileLayer[]

        Layers to search in.

      • Optional onload?: (result: Feature[] | null) => void

        Callback function for "remote" search.

          • Parameters

            Returns void

      • Optional point?: GeoPoint

        Geographical center point of the circle to search in. options.radius must be defined.

      • Optional radius?: number

        Radius of the circle in meters, it is used in "point" search.

      • Optional rect?: GeoRect | GeoJSONBBox

        Geographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature[]

    array containing the found features

setZoomLevel

  • setZoomLevel(zoomlevel: number): void
  • Sets the desired zoomLevel.

    deprecated
    • use the map display directly {@link display.Map.setZooomlevel}

    Parameters

    • zoomlevel: number

    Returns void

submit

  • submit(options: { onError?: (Error: any) => void; onSuccess?: (data: { permanentIDMap: {} }) => void; transactionId?: string }): boolean
  • Submit changes, return object Ids of submitted objects. Reload and render objects.

    Parameters

    • options: { onError?: (Error: any) => void; onSuccess?: (data: { permanentIDMap: {} }) => void; transactionId?: string }

      submit options

      • Optional onError?: (Error: any) => void

        callback function that gets called in case of an error.

          • (Error: any): void
          • Parameters

            • Error: any

            Returns void

      • Optional onSuccess?: (data: { permanentIDMap: {} }) => void

        callback function which returns additional information about the commit process. If id(s) of the submitted feature(s) had to be changed by the remote datasource a "permanentIDMap" is provided.

          • (data: { permanentIDMap: {} }): void
          • Parameters

            • data: { permanentIDMap: {} }
              • permanentIDMap: {}
                • [layerId: string]: {}
                  • [featureId: string]: number | string

            Returns void

      • Optional transactionId?: string

        transactionId that will be attached to all features of the submit operation.

    Returns boolean

    true, if there are changes to be submitted, false otherwise.

toGeoJSONCoordinates

  • Convert a PixelPoint on the screen or a GeoPoint to a geographical Coordinate in GeoJSON format [number,number,number?].

    example
    // create a Feature at a specific position of the current mapview on the screen.
    editor.addFeature({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: editor.toGeoJSONCoordinates({x: 300, y:300})
        }
    })
    

    Parameters

    Returns GeoJSONCoordinate

  • Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].

    example
    // create a Feature at a specific position of the current mapview on the screen.
    editor.addFeature({
        type: 'Feature',
        geometry: {
            type: 'LineString',
            coordinates: editor.toGeoJSONCoordinates([{x: 300, y:300},{longitude:50.1, latitude:8.5}])
        }
    })
    

    Parameters

    Returns GeoJSONCoordinate[]

  • Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].

    example
    // create a Feature at a specific position of the current mapview on the screen.
    editor.addFeature({
      type: 'Feature',
        geometry: {
          type: 'Polygon',
            coordinates: editor.toGeoJSONCoordinates([
              [{x:10, y:10}, {longitude:50.1, latitude:8.5}, {x:90, y:90}, {x:10,y:90}, {x:10, y:10}]
            ])
        }
    })
    

    Parameters

    Returns GeoJSONCoordinate[][]

  • Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].

    example
    // create a Feature at a specific position of the current mapview on the screen.
    editor.addFeature({
        type: 'Feature',
        geometry: {
            type: 'MultiPolygon',
            coordinates: editor.toGeoJSONCoordinates([
              [
                [{x:10, y:10}, {longitude:50.1, latitude:8.5}, {x:90, y:90}, {x:10,y:90}, {x:10, y:10}]
              ]
            ])
        }
    })
    

    Parameters

    Returns GeoJSONCoordinate[][][]

undo

  • undo(steps?: number): void
  • Undo the latest change operation(s). One change operation can contain multiple feature modifications. The changes are stored and managed locally.

    Submitting Editor.submit modified Feature(s) to the remote will clear the local change history.

    Parameters

    • Optional steps: number

      the number of change operations to undo.

    Returns void

Generated using TypeDoc