Namespace: MpJsApi

Addons. MpJsApi

Addon, which provides a JavaScript API for the LGB Masterportal map viewer. If this addon is included to a LGB Masterportal map viewer a global object window.MpJsApi is injected to the window object of the browser page. The window.MpJsApi object offers the static JavaScript functions listed below. Ensure to call them without the Addons. prefix:

Example

const stateObj = MpJsApi.getMapViewerState();

Methods

staticAddons.MpJsApi.activateGFITool(){void}

addons/mpJsApi/src/marker.js, line 597
Activates the get feature info tool
Example
MpJsApi.activateGFITool()

staticAddons.MpJsApi.addGeoJSONLayer(geojson, cfg){String}

addons/mpJsApi/src/geoJson.js, line 35
Add a GeoJSON layer dynamically
Name Type Description
geojson String | Object The GeoJSON to display on the map
cfg Object The configuration object, consisting of the following properties:
Name Type Description
hoverField string Name of the attribute that should be used in tooltips when hovering. If commited, hovering will be disabled. Optional
layerName String The name to use for the layer
style Object The style object to use for the layer using a syntax as specified by `style.json.md` in `doc` folder. Optional
hoverStyle String The style object to use for a feature when hovered using a syntax as specified by `style.json.md` in `doc` folder. Optional
Returns:
layerId used to reference the added layer
Example
MpJsApi.addGeoJSONLayer('{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[13.05,52.40]},"properties":{"type": "test"}}]}', {
    hoverField: "type",
    layerName: "catering",
    style: {
      "rules": [
        {
          "style": {
            "type": "circle",
            "circleFillColor": [255, 0, 10, 0.8]
          }
        }
      ]
    }
  });

staticAddons.MpJsApi.addGeoJSONLayerFromURL(url, cfg){String}

addons/mpJsApi/src/geoJson.js, line 185
Add GeoJSON from a URL
Name Type Description
url String The URL to the geojson
cfg Object The configuration object, consisting of the following properties:
Name Type Description
useProxy boolean Flag indicating if the configured corsProxy of the masterportal should be used. Optional
hoverField string Name of the attribute that should be used in tooltips when hovering. If commited, hovering will be disabled. Optional
layerName String The name to use for the layer
style Object The style object to use for the layer using a syntax as specified by `style.json.md` in `doc` folder. Optional
hoverStyle String The style object to use for a feature when hovered using a syntax as specified by `style.json.md` in `doc` folder. Optional
Returns:
layerId used to reference the added layer
Example
await MpJsApi.addGeoJSONLayerFromURL("ressources/catering.json", {
          useProxy: false,
          hoverField: "type",
          layerName: "catering",
          style: {
            "rules": [
              {
                "style": {
                  "type": "circle",
                  "circleFillColor": [255, 0, 255, 0.8],
                  "circleRadius": 15
                }
              }
            ]
          }
        });

staticAddons.MpJsApi.addHTMLMarker(coordinates, options)

addons/mpJsApi/src/marker.js, line 415
Adds a marker to the map at the given coordinates and with further optional functionality. When adding multiple markers, please ensure to use distinct IDs. This is nesseccary to prevent unwanted behaviour on marker interaction.
Name Type Description
coordinates Array The array with x / y coordinates in projection EPSG:4326 for the marker
options Object The options object of the marker.
Name Type Description
id number The distinct id of the marker.
color string optional Color like string (named-color, hex, rgb(a), hsl).
centerMap boolean optional If set to false, map will no be centered to added marker.
popup Object Object containing html content
Name Type Description
content string Content of popup as HTML string
hoverContent string optional Hover content of popup as HTML string
className string optional CSS class name of the popup
offset Array optional Offsets in pixels used when positioning the popup. Default [0, -20].
Example
MpJsApi.addHTMLMarker([13,51.5], {color: "red", id: 123, popup: { hoverContent: "short hover info", content: "
Hi!
I am a 
popup
", className: "fancy-popup"}} )
MpJsApi.addHTMLMarker([13,52], {centerMap: false, color: "green", id: 124, popup: { content: "
Hi!
I am another 
popup
", className: "fancy-popup2"}} )

staticAddons.MpJsApi.addMarker(coordinates, options)

addons/mpJsApi/src/marker.js, line 171
Adds a marker to the map at the given coordinates and with further optional functionality
Name Type Description
coordinates Array The array with x / y coordinates in projection EPSG:4326 for the marker
options Object The optional options object
Example
MpJsApi.addMarker([13,52], {color: "green", id: 123, address: "Mainstreet 123"})

staticAddons.MpJsApi.addResetButton(state, callback, targetSelector, btnOpts){Object}

addons/mpJsApi/src/resetButton.js, line 50
Adds a button to the MapViewer in order to reset the MapViewer state.

The MapViewer state object which will be applied on click has to be provided as first argument. The state object is mandatory, otherwise the function exits without rendering the button.
In order to apply a normal map state object AND a themed map ("Themenkarte") configuration you can pass in an array as first function parameter: [0 => normal map state, 1 => themed map conf].
On button click the provided callback function will be called with a notify function accepting a string argument, to use the application specific notification API. If no callback is defined, a no-op function will be called.
The default targetSelector is #root a. should be overwritten if the button should not be placed within the application menu.
The button options can be overwritten, e.g. to apply custom styles. Please note that we do not provide any translations, as they should be handled by the calling instance. The class property will be completely overwritten, so make sure that all required classes (e.g. Bootstrap button classes) will be set explicitly by the calling instance, when setting the btnOpts.class property.
Name Type Description
state Object | Array The state object or array with a state object and a themed map conf to be applied on click
callback function Callback function to be triggered onClick
targetSelector String Selector for the button target
btnOpts Object Object that contains the button options
Returns:
The added reset button markup element
Example
// executing with map state object only
const stateObj = {extent: [353813, 5800182, 381488, 5813993], layers: []};
const resetCallback = (msg) => {msg("Zurückgesetzt")};
MpJsApi.addResetButton(stateObj, resetCallback, null, {text: ''});

// executing with map state object and themed map config
const themedMap = {"extent": [268579, 5672299, 493510, 5954804], "layers": [{ "uuid": "99999-2222-11111", "url": "https://isk.geobasis-bb.de/ows/alkis_wms", "layers": "adv_alkis_gewaesser,adv_alkis_vegetation,adv_alkis_verkehr,adv_alkis_siedlung,adv_alkis_gebaeude,adv_alkis_flurstuecke", "title": "Liegenschaftskataster (ab 1 : 5000)", "opacity": 0.8, "visible": false }, { "uuid": "99999-2222-22222", "url": "https://isk.geobasis-bb.de/ows/sonnenenergie_wms", "layers": "photovoltaik_kreise", "title": "Sonnenenergie im Land Brandenburg (WMS-MWE-Sonnenenergie)", "transparent": true, "opacity": 0.86, "visible": true }]};
MpJsApi.addResetMenuEntry([stateObj, themedMap], resetCallback, {icon: "fas fa-sync fa-lg"});

staticAddons.MpJsApi.addResetMenuEntry(state, callback, opts){Object}

addons/mpJsApi/src/resetButton.js, line 216
Adds a menu entry to the MapViewer's main menu in order to reset the MapViewer state.

Similar to the function Addons.MpJsApi.addResetButton but instead of adding a button markup this creates the correct markup to add an entry to the MapViewer's main menu.
The MapViewer state object will be applied on click and has to be provided as first argument. The state object is mandatory, otherwise the function exits without rendering the menu entry.
In order to apply a normal map state object AND a themed map ("Themenkarte") configuration you can pass in an array as first function parameter: [0 => normal map state, 1 => themed map conf].
By clicking the menu entry the provided callback function will be called with a notify function accepting a string argument, to use the application specific notification API. If no callback is defined, a no-op function will be called.
The markup options can be overwritten, e.g. to apply custom styles. Please note that we do not provide any translations, as they should be handled by the calling instance. The class property will be completely overwritten, so make sure that all required classes (e.g. Bootstrap classes) will be set explicitly by the calling instance, when setting the opts.class property.
Name Type Description
state Object | Array The state object or array with a state object and a themed map conf to be applied on click
callback function Callback function to be triggered on click
opts Object Object that contains the options
Returns:
The added reset li markup element
Example
// executing with map state object only
const stateObj = {extent: [353813, 5800182, 381488, 5813993], layers: []};
const resetCallback = (msg) => {msg("Zurückgesetzt")};
MpJsApi.addResetMenuEntry(stateObj, resetCallback, {icon: "fas fa-sync fa-lg"});

// executing with map state object and themed map config
const themedMap = {"extent": [268579, 5672299, 493510, 5954804], "layers": [{ "uuid": "99999-2222-11111", "url": "https://isk.geobasis-bb.de/ows/alkis_wms", "layers": "adv_alkis_gewaesser,adv_alkis_vegetation,adv_alkis_verkehr,adv_alkis_siedlung,adv_alkis_gebaeude,adv_alkis_flurstuecke", "title": "Liegenschaftskataster (ab 1 : 5000)", "opacity": 0.8, "visible": false }, { "uuid": "99999-2222-22222", "url": "https://isk.geobasis-bb.de/ows/sonnenenergie_wms", "layers": "photovoltaik_kreise", "title": "Sonnenenergie im Land Brandenburg (WMS-MWE-Sonnenenergie)", "transparent": true, "opacity": 0.86, "visible": true }]};
MpJsApi.addResetMenuEntry([stateObj, themedMap], resetCallback, {icon: "fas fa-sync fa-lg"});

staticAddons.MpJsApi.addSaveButton(callback, targetSelector, btnOpts){Object}

addons/mpJsApi/src/saveButton.js, line 37
Adds a saveButton to the MapViewer.

On button click, the callback function will be called with an array holding the current MapViewerState (array index 0) and the current themed map configuration with the external layers (array index 1) as its first argument. The second argument is a notify function accepting a string argument, to use the application specific notification API. If no callback is defined, a no-op function will be called.
The default targetSelector is #root a. should be overwritten if the button should not be placed within the application menu.
The button options can be overwritten, e.g. to apply custom styles. Please note that we do not provide any translations, as they should be handled by the calling instance. The class property will be completely overwritten, so make sure that all required classes (e.g. Bootstrap button classes) will be set explicitly by the calling instance, when setting the btnOpts.class property.
Name Type Description
callback function Callback function to be triggered onClick
targetSelector String Selector for the button target
btnOpts Object Object that contains the button options
Returns:
The added save button markup element
Example
const saveCallback = (stateObjArr, msg) => {msg("Erfolgreich gespeichert")};
MpJsApi.addSaveButton(saveCallback, null, {text: ''});

staticAddons.MpJsApi.addSaveMenuEntry(callback, opts){Object}

addons/mpJsApi/src/saveButton.js, line 173
Adds a menu entry to the MapViewer's main menu in order to save the map state.

Similar to the function Addons.MpJsApi.addSaveButton but instead of adding a button markup this creates the correct markup to add an entry to the MapViewer's main menu.
By clicking the menu entry the callback function will be called with an array holding the current MapViewerState (array index 0) and the current themed map configuration with the external layers (array index 1) as its first argument. The second argument is a notify function accepting a string argument, to use the application specific notification api. If no callback is defined, a no-op function will be called.
The options can be overwritten, e.g. to apply custom styles. Please note that we do not provide any translations, as they should be handled by the calling instance. The class property will be completely overwritten, so make sure that all required classes (e.g. Bootstrap classes) will be set explicitly by the calling instance, when setting the opts.class property.
Name Type Description
callback function Callback function to be triggered on click
opts Object Object that contains the options
Returns:
The added save li markup element
Example
const saveCallback = (stateObjArr, msg) => {msg("Erfolgreich gespeichert")};
MpJsApi.addSaveMenuEntry(saveCallback, {icon: "fas fa-save fa-lg"});

staticAddons.MpJsApi.applyMapViewerState(state){void}

addons/mpJsApi/src/mapFunctions.js, line 70
Applies the given state object (extent and the layers) to the LGB Masterportal map viewer.

The state object has to be in the form as it is returned by Addons.MpJsApi.getMapViewerState.
Name Type Description
state Object The map viewer state object
Example
MpJsApi.applyMapViewerState({extent: [353813, 5800182, 381488, 5813993]});

staticAddons.MpJsApi.applyThemedMap(themedMapConf){void}

addons/mpJsApi/src/themedMaps.js, line 39
Applies the themed map ("Themenkarten") config object to the LGB Masterportal map viewer. The layers part of the config object has to be in the form as it is returned by Addons.MpJsApi.getExternalLayers.
Name Type Description
themedMapConf Object The JSON configuration for a themed map ("Themenkarte")
Example
const tmConf = {
    "extent": [268579, 5672299, 493510, 5954804], // EPSG:25833 as default
    "layers": [{
        "uuid": "99999-2222-11111",
        "url": "https://isk.geobasis-bb.de/ows/alkis_wms",
        "layers": "adv_alkis_gewaesser,adv_alkis_vegetation,adv_alkis_verkehr,adv_alkis_siedlung,adv_alkis_gebaeude,adv_alkis_flurstuecke",
        "legendURL": "http://isk.geobasis-bb.de/ows/legends/WMS-ALKIS_Farbe.png",
        "title": "Liegenschaftskataster (ab 1 : 5000)",
        "opacity": 0.8,
        "singleTile": false,
        "visible": false
    }, {
        "uuid": "99999-2222-22222",
        "url": "https://isk.geobasis-bb.de/ows/sonnenenergie_wms",
        "layers": "photovoltaik_kreise",
        "legendURL": "https://isk.geobasis-bb.de/ows/sonnenenergie_wms?VERSION=1.3.0&SERVICE=WMS&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=photovoltaik_kreise&SLD_VERSION=1.1.0",
        "title": "Sonnenenergie im Land Brandenburg (WMS-MWE-Sonnenenergie)",
        "transparent": true,
        "opacity": 0.86,
        "tilesize": 512,
        "visible": true
    }]
};
MpJsApi.applyThemedMap(tmConf);

staticAddons.MpJsApi.changeLanguage(langCode){Promise}

addons/mpJsApi/src/i18n.js, line 30
Sets the given language by the lang code (e.g. "de" or "en") if it is defined in the Masterportal map viewer. Otherwise nothing is done. Functionality that depends on the changeLanguage promise being fullfilled should be placed into the callback of the promise.
Name Type Description
langCode String The code of the language to activate
Returns:
promise of the i18next.changeLanguage method.
Example
MpJsApi.changeLanguage('en');

staticAddons.MpJsApi.deactivateGFITool(){void}

addons/mpJsApi/src/marker.js, line 613
Deactivates the get feature info tool
Example
MpJsApi.deactivateGFITool()

staticAddons.MpJsApi.enableMarkerClick()

addons/mpJsApi/src/marker.js, line 565
Enable click on marker by adding singleclick listener to the map
Example
MpJsApi.enableMarkerClick()

staticAddons.MpJsApi.enableMarkerHover()

addons/mpJsApi/src/marker.js, line 533
Enable hover by adding pointermove listener to the map
Example
MpJsApi.enableMarkerHover()

staticAddons.MpJsApi.exportDrawGeometries(){String}

addons/mpJsApi/src/drawImportExport.js, line 12
Returns the GeoJSON representation of the drawn geometries within the map viewer as string or null if nothing is drawn on the map.
Returns:
The GeoJSON representation of the drawn geometries
Example
const drawnGeomsAsGeoJsonText = MpJsApi.exportDrawGeometries();

staticAddons.MpJsApi.getExternalLayerModels(){Array.<Object>}

addons/mpJsApi/src/themedMaps.js, line 84
Returns the external layer Backbone models of the LGB Masterportal map viewer.
.
Returns:
Array of external layer Backbone models
Example
const externalLayerModels = MpJsApi.getExternalLayerModels();

staticAddons.MpJsApi.getExternalLayers(){Array.<Object>}

addons/mpJsApi/src/themedMaps.js, line 115
Returns the external layers of the LGB Masterportal map viewer.

The returned layer objects are of equivalent structure than the one, which is accepted by Addons.MpJsApi.applyThemedMap
Returns:
Array of external layer configurations
Example
const externalLayers = MpJsApi.getExternalLayers();

staticAddons.MpJsApi.getLanguages(){Object}

addons/mpJsApi/src/i18n.js, line 13
Returns the defined languages in the LGB Masterportal map viewer as object mapping the lang code to the human readable form (e.g. {de: "deutsch"}).
Returns:
The object with supported languages
Example
const langs = MpJsApi.getLanguages();

staticAddons.MpJsApi.getMapViewerState(){Object}

addons/mpJsApi/src/mapFunctions.js, line 30
Returns the current state (extent, layers) of the LGB Masterportal map viewer.
Returns:
The map viewer state object
Example
const mvs = MpJsApi.getMapViewerState();

staticAddons.MpJsApi.getMarkerAsPointCoords(){Array}

addons/mpJsApi/src/marker.js, line 120
Return all Marker Coords (Search, Coordinate query) in EPSG:4326

No Search Results => Return empty Array[]
Returns:
returns an array with the coordinates or empty Array
Example
MpJsApi.getMarkerAsPointCoords();

staticAddons.MpJsApi.getMarkerAsPointLayer(){ol.layer.Vector}

addons/mpJsApi/src/marker.js, line 57
Return the marker vector layer containing all markers [Search, Coordinate query]. If the layer cannot be found, it will be created and added to the map.
Returns:
vector layer containing the marker features

staticAddons.MpJsApi.getMarkerCoords(){Array}

addons/mpJsApi/src/marker.js, line 100
Return all Marker Coords [extern] in EPSG:4326
Returns:
returns an array with the coordinates
Example
MpJsApi.getMarkerCoords();

staticAddons.MpJsApi.getMarkerLayer(){ol.layer.Vector}

addons/mpJsApi/src/marker.js, line 27
Return the marker vector layer containing all markers. If the layer cannot be found, it will be created and added to the map.
Returns:
vector layer containing the marker features

staticAddons.MpJsApi.getOlMap(){ol/Map}

addons/mpJsApi/src/mapFunctions.js, line 10
Returns the main OpenLayers map of the LGB Masterportal map viewer.
Returns:
The main OL map instance of the map viewer
Example
const olMap = MpJsApi.getOlMap();

staticAddons.MpJsApi.getThemedMapConf(){Array.<Object>}

addons/mpJsApi/src/themedMaps.js, line 181
Returns a themed map ("Themenkarten") configuration object for the current map of the LGB Masterportal map viewer.
The external layers in the map viewer are stored in the "layers" section of the returned themed map config.

The returned object is equivalent to the one, which is accepted by Addons.MpJsApi.applyThemedMap
Returns:
Array of external layer configurations
Example
const tmConf = MpJsApi.getThemedMapConf();

staticAddons.MpJsApi.highlightMarker(id, highlight, color, size)

addons/mpJsApi/src/marker.js, line 262
Highlights a marker for the given id on the map.
Name Type Description
id number The id of the marker to highlight
highlight boolean If true, highlight the Marker for the given id, unhighlight if false
color string Optional color used for highlighting as hexcode
size number Optional marker size used for highlighting in em. Default: 4em. 1em ≙ 14px (default font size).
Example
MpJsApi.highlightMarker(123, true, "#ffff00", 6)

staticAddons.MpJsApi.removeExternalLayers(){void}

addons/mpJsApi/src/themedMaps.js, line 157
Removes all external layers of the LGB Masterportal map viewer.
Example
MpJsApi.removeExternalLayers();

staticAddons.MpJsApi.removeGeoJSONLayer(layerid)

addons/mpJsApi/src/geoJson.js, line 223
Removes the layer by the given id
Name Type Description
layerid String The uuid of the layer to remove

staticAddons.MpJsApi.removeMarker(id)

addons/mpJsApi/src/marker.js, line 315
Remove the marker for the given id.
Name Type Description
id number The id of the marker to remove

staticAddons.MpJsApi.setAddMarkerOnClick(active, callback)

addons/mpJsApi/src/marker.js, line 360
Toggles the add marker on map click mode

On map click, the callback function will be called with an array holding the clicked coordinates (EPSG:4326). If the the first argument (active) is false, the mode will be de-activated. The function ensures that the gfi tool is deactivated to prevent gfi click events.
Name Type Description
active Boolean Flag to activate or deactive the add marker mode
callback function Callback function to be triggered on singleclick
Example
const callback = (coordinate) => {console.log(coordinate)};
MpJsApi.setAddMarkerOnClick(true, callback);

staticAddons.MpJsApi.toggleMarkerTooltip(id, visible)

addons/mpJsApi/src/marker.js, line 295
Toggle the visibility of a marker's tooltip for the given id.
Name Type Description
id number The id of the marker whose tooltip should be toggled
visible boolean If true, show the tooltip for the given marker id, hide if false
Example
MpJsApi.toggleMarkerTooltip(123, true)

staticAddons.MpJsApi.triggerSearch(searchText, opts){void}

addons/mpJsApi/src/search.js, line 52
Triggers the search functionality within the LGB Masterportal map viewer. The function can be executed with a search string and an optional options object as function arguments. Following options can be set: 

- searchCategory (String): The name of the search category to pre-filter
     the search results by
- restrictToMapExtent (Boolean): True, if search should be restricted
     to the current map extent
- openDetailSearch (Boolean): True, if the detailed search should
     be opened
- sortBy ("relevance" | "alphabetical" | "source"): By which property
     results should be sorted
- sortOrder ("asc" | "desc"): Sort order of search results
- limit (Number): Number of search results per page
- filters (Array[Array]): Filters (connected with AND) to apply to search
     in the form: [[filterProperty: [filterValue1, filterValue2]]] e.g.:

     [
        ["keywords": ["keyword1"]],
        ["keywords": ["keyword2", "keyword3"]], // connected with OR
        ["types": ["netzknoten"]]
     ]
Name Type Description
searchText String Text to search for
opts Object optional Search options
Example
const searchOpts = {
   searchCategory: "strassendaten",
   restrictToMapExtent: true,
   openDetailSearch: true,
   sortBy: "relevance",
   sortOrder: "desc",
   limit: 8,
   filters: [
       ["keywords", ["keyword1"]],
       ["keywords", ["keyword2", "keyword3"]],
       ["types", ["netzknoten"]]
   ]
};
MpJsApi.triggerSearch("Berlin", searchOpts);

staticAddons.MpJsApi.zoomOnMarkerLayer()

addons/mpJsApi/src/marker.js, line 627
Zoom to Geometry/Layer - The BoundingBox is adjusted based on the provided coordinates to ensure all coordinates are visible.
Example
MpJsApi.zoomOnMarkerLayer()

Events

mpjsapi-ready

addons/mpJsApi/mpJsApi.js, line 26
Will be fired as soon as the MpJsApi object is ready to use.