the map display to be used with the map editor.
Optionaloptions: EditorOptions
options to customize the map editor.
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
});
enable or disable the editor.
Optionalactive: boolean
true to enable or false to disable the editor
the current active state
Add an EventListener to the editor. Valid Events are: "tap", "dbltap", "pointerup", "pointerenter", "pointerleave", "featureUnselected", "error", "geometryValidation", "dragStart", "dragStop".
Additional details about the different events:
valid, blocked, reason, operation, polygonIndex, lineStringIndex, and coordinateIndex.A string representing the event type to listen for.
the listener function that will be called when an event of the specific type occurs
Add an Error EventListener to the editor.
the EventListener type is "error"
the listener function that will be called when an Error occurs
Add a feature to the editor.
Features added with this method are recorded in the editor history, so they can be undone and redone. Use this method for user-created features.
To load data into the editor silently, use TileLayer.addFeature instead. Those features are editable as well, but they do not create a history step, so the data does not show up in undo/redo and the edit history only contains the user's own changes.
Features of class 'NAVLINK', 'PLACE' or 'ADDRESS' are only recognized if the layer's provider overrides EditableFeatureProvider.detectFeatureClass, which maps the GeoJSON to the feature class. Places and Addresses also need the routing position to be readable and writable through the provider.
the feature to be added to the map.
Optionallayer: TileLayer
the layer the feature should be added to.
Optionalorigin: GeoPoint | PixelPoint
offsets the geometry of the feature.
the feature that was successfully added to the map
Add features to the editor.
the features to be added to the map.
Optionallayer: TileLayer
the layer the features should be added to.
Optionalorigin: GeoPoint | PixelPoint
offsets the geometry of the features.
the features that were successfully added to the map
Add features to map editor.
a map where the layerId is the key and the value are the feature(s) that should be added to the respective layer.
Optionallayer: TileLayerOptionalorigin: GeoPoint | PixelPoint
allows to translate features by origin offset.
the feature(s) that were successfully added to map
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'
the type of the operation
the hook function that should be called
Optionalprovider: EditableFeatureProvider
If a provider is defined, the hook is only called if features of the provider are affected by the operation
add a TileLayer to the editor and enable editing of its map data.
the layer to be added to editor.
true indicates layer has been added successfully, otherwise false.
This method registers an observer for the property named by the caller. Supported observables: 'active', 'ready', 'history.current', 'history.length', 'changes.length'
The name of the property to observe.
the observer function that is called when the value of the observable changes.
the name of the property that was modified, created or deleted
the new value of the observable property
the old/previous value of the observable property
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.
A function that contains one or more feature modification actions. All edits within this function will be grouped together as a single history step.
editor.batch(() => {
feature.prop("name", "newName"); // Modify feature property
feature.coord(newCoordinate); // Modify feature coordinates
});
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.
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.
editor.beginBatch(); // 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
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 beginBatch/endBatch block are treated as a single operation.
Get the current value of a specific editor option.
the value of the specific editor option.
Get a deep copy of the currently active editor options.
the editor options as a key/value map.
Set the value of a specific editor option.
the name of the option to set
the value that should be set for the specific option
Set one or more editor options.
the option key/value map that should be merged with the existing editor options.
Destroy the map editor
Ends the current batch operation and creates a single history entry for all changes made since beginBatch.
This function should be called after making all desired edits within a beginBatch block. Once called,
all changes will be committed as a single entry in the local history, enabling easy undo/redo of the entire batch.
editor.beginBatch(); // 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
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.
Export data of all modified features.
A JSON encoded string containing all modified features and its respective layer information.
Convert geographical coordinate to a pixel coordinate relative to the current mapview on screen.
the geographical coordinate
The pixel coordinate.
This method retrieves the current value of an observable property.
The name of the property whose value is to be retrieved
value - The retrieved value of the property or undefined if no such property exists
get the DrawingBoard to enable mouse/touch based drawing of the geometry for Line, Navlink or Area features.
Get a feature by id and layer.
the id of the feature
the id of the layer or the layer itself to which the feature belongs.
the found feature in the map, otherwise null.
Get all registered hooks for the desired operation.
the type of the operation
Returns the overlay TileLayer used for user interaction with the editable map features.
the TileLayer containing all "UI" features used for user interaction with the map features.
get the tool for selecting ranges on Navlink features.
Retrieves the currently selected feature.
null.Get the current zoomLevel.
The current zoomLevel of the map.
Import Features to the editor that have previously been exported with Editor.export.
A JSON encoded string containing all modified features and its respective layer information.
Convert a pixel position relative to the current mapview on screen to a geographical coordinate.
The coordinate on screen in pixels.
the geographical coordinate
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.
Optionalsteps: number
the number of change operations to redo.
Remove an EventListener from the layer. Valid Events are: "tap", "dbltap", "pointerup", "pointerenter", "pointerleave", "featureUnselected", "error", "geometryValidation", "dragStart", "dragStop".
A string which specifies the type of event for which to remove an event listener.
The listener function of the event handler to remove from the editor.
Remove an Error EventListener from the layer.
the EventListener type is "error".
The error event listener to be remove from the editor.
Remove a specific hook for the desired editing operation.
Possible operation types are: 'Navlink.disconnect', 'Navlink.split', 'Feature.remove', 'Coordinates.remove'
the type of the operation
the hook function to remove
Optionalprovider: EditableFeatureProvider
If a provider is defined, the hook is only called if features of the provider are affected by the operation
Remove a layer from the editor.
layer - the layer to be removed from the map editor. Editing get disabled for the layer.
true indicates layer is removed successfully, otherwise false.
This method removes the observer for the property. Supported observables: 'active', 'ready', 'history.current', 'history.length', 'changes.length'
The name of the property that should no longer be observed
The observer function to be removed
the name of the property that was modified, created or deleted
the new value of the observable property
the old/previous value of the observable property
Revert changes, fetch data from repository.
Search for feature(s) in the provider.
configure the search
Optionalfilter?: (feature: Feature[]) => booleanfunction for optional result filtering.
Optionalid?: string | numbersearch feature by id.
Optionalids?: string[] | number[]Array of feature ids to search.
Optionallayers?: TileLayer[]Layers to search in.
Optionalonload?: (result: Feature[]) => voidCallback function for "remote" search.
Optionalpoint?: GeoPointGeographical center point of the circle to search in. options.radius must be defined.
Optionalradius?: numberRadius of the circle in meters, it is used in "point" search.
Optionalrect?: GeoJSONBBox | GeoRectGeographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.
Optionalremote?: booleanForce the data provider(s) to do remote search if no result is found in local cache.
array containing the found features
// 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.
}
})
Sets the desired zoomLevel.
The zoomlevel that the map should zoom to.
Submit changes, return object Ids of submitted objects. Reload and render objects.
submit options
OptionalonError?: (Error: any) => voidcallback function that gets called in case of an error.
OptionalonSuccess?: (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.
OptionaltransactionId?: stringtransactionId that will be attached to all features of the submit operation.
true, if there are changes to be submitted, false otherwise.
Convert a PixelPoint on the screen or a GeoPoint to a geographical Coordinate in GeoJSON format [number,number,number?].
the pixel and/or geographical coordinate(s) to convert.
Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].
the pixel and/or geographical coordinate(s) to convert.
Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].
the pixel and/or geographical coordinate(s) to convert.
Convert PixelPoints or a GeoPoints to a geographical Coordinates in GeoJSON format [number,number,number?].
the pixel and/or geographical coordinate(s) to convert.
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.
Optionalsteps: number
the number of change operations to undo.
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.