Meldemichel MapClient API 🗺️ @polar/client-meldemichel
This client is based on POLAR and subsequently the masterportalAPI. The following documentation only contains how this specific client can be used, and the minimal information required to get it running.
For the development test deployments, see here.
Basic usage
The NPM package @polar/client-meldemichel can be installed via NPM or downloaded from the release page. When using import mapClient from '@polar/client-meldemichel', the object mapClient contains a method createMap. This is the main method required to get the client up and running. Should you use another import method, check the package's dist folder for available files.
The method expects a single object with the following parameters.
| fieldName | type | description |
|---|---|---|
| containerId | string | ID of the container the map is supposed to render itself to. |
| mode | enum["REPORT", "SINGLE", "COMPLETE"] | See chapters below for an overview of the modes. |
| stadtwaldActive | boolean? | This layer only works in 'SINGLE' mode and should not be activated in the others. If not set, any existing previous state is kept; off by default. |
| afmUrl | string? | COMPLETE mode only. The URL used here is the URL of the AfM service to open to create a new damage report. |
| reportServiceId | string? | COMPLETE mode only. ID of the report layer to display. Both the Filter and the Feature List will work with this layer. The client will also provide tooltips and cluster the features. |
| configOverride | object? | This can be used to override the configuration of any installed plugin; see full documentation. It is also used to set initial pins in SINGLE mode. See documentation of SINGLE further below. |
It returns a Promise of a map instance. This returned instance is required to retrieve information from the map.
The package also includes a style.css and an index.html file. The style.css's relative path must, if it isn't the default value './style.css', be included in the configOverride as follows:
{
// ...
configOverride: {
stylePath: '../the/relative/path/style.css'
}
}
The value to stylePath is the same as as a link tag would have in its href.
The index.html is used in COMPLETE mode, which is not run in the AfM. You may, however, use it for testing or inspecting an example.
Instance reuse
The mapInstance and its HTML environment are kept in the client; it is returned and rerendered on subsequent createMap calls to a div with the given id. Due to this, everything will appear to the user as it was previously left, including opened menus.
Since in SINGLE mode, changes to the pins are required between renders, hence the parameters in configOverride.pins are used to update the client. Should additional updates be required, please let us know.
Calling watch/subscribe on the client will return an unwatch/unsubscribe method. It should be called on leaving the map's page; depending on framework/library in e.g. the beforeDestroy or beforeUnmount method.
Rendering in SINGLE or REPORT mode
A document rendering the map client could e.g. look like this:
<!DOCTYPE html>
<html>
<head>
<title>REPORT EXAMPLE</title>
<style>
#meldemichel-map-client {
min-width: 320px;
max-width: 930px;
height: 500px;
position: relative;
margin: 5px;
-webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="meldemichel-map-client">
<!-- Optional, may use if your page does not have its own <noscript> information -->
<noscript>Please use a browser with active JavaScript to use the map client.</noscript>
</div>
<script type="module">
import meldemichelMapClient from './client-meldemichel.js'
const meldemichelMapInstance = await meldemichelMapClient.createMap({
containerId: 'meldemichel-map-client',
mode: 'REPORT', // or 'SINGLE',
// This layer only works in 'SINGLE' mode and should not be activated in the others
stadtwaldActive: true, // or `false`; if not set, previous state is kept; off by default
// For 'SINGLE' mode where a singular coordinate is inspected/worked on
configOverride: {
pins: {
initial: {
centerOn: true,
// The coordinate that is inspected/worked on
coordinates: [569028, 5932885],
},
movable: 'drag', // or 'none' to have an immovable pin
style: {
fill: '#0392cf' // or (optionally) '#ff0019' if 'none' is set
},
},
},
})
// If an old view state should be set, use this snippet:
meldemichelMapInstance.$store.dispatch('meldemichel/setMapState', {
vendor_maps_position: '566167.224436667,5935872.419250831',
vendor_maps_address_str: 'Alte Rabenstraße',
vendor_maps_address_hnr: '28',
mapZoomLevel: 6,
mapBaseLayer: 452,
mapCenter: '566808.8386735287,5935896.23173797',
// NOTE: vendor_maps_distance_to and -_plz are not read
})
/* To change the stadtwald layer's visibility in 'SINGLE' mode, use this;
* this key can be used standalone or within the call seen above */
meldemichelMapInstance.$store.dispatch('meldemichel/setMapState', {
stadtwaldActive: true, // or false
})
// to retrieve map state updates, use this snippet:
const unwatch = mapInstance.$store.watch(
(_, getters) => getters["meldemichel/mapState"],
({
mapCenter,
mapZoomLevel,
mapBaseLayer,
vendor_maps_position,
// The following fields are not changed/set in 'SINGLE' mode
vendor_maps_address_hnr,
vendor_maps_address_str,
vendor_maps_address_plz,
vendor_maps_distance_to
}) => {
// do anything with the map values here; example print
console.info(`MapState Update
Center coordinate: ${mapCenter}
Zoom level: ${mapZoomLevel}
Base layer: ${mapBaseLayer}
Pin coordinate: ${vendor_maps_position}
Address: ${vendor_maps_address_str + ' ' + vendor_maps_address_hnr}
PLZ: ${vendor_maps_address_plz}
Distance to address: ${vendor_maps_distance_to}`)
},
// will return initial values; delete parameter if not desired
{ immediate: true }
)
</script>
</body>
</html>
Rendering COMPLETE mode (full page)
The index.html included in the package's dist folder has been prepared for this mode and must merely be hosted.
Please see the table in chapter Basic usage about configuration options.
Rendering COMPLETE mode (embedded element)
To embed the COMPLETE mode map on any page, provide a div with an id like meldemichel-map-client; you may choose any id you like.
The following script tag can then be used to render the productive services of the Meldemichel map client.
<script type="module">
// adjust path to where the client is
import meldemichelMapClient from '../dist/client-meldemichel.js'
meldemichelMapClient.createMap({
containerId: 'meldemichel-map-client', // the id you used
mode: 'COMPLETE',
afmUrl: `https://afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
reportServiceId: '6059',
configOverride: {
// adjust path to where the client is
stylePath: '../dist/style.css'
}
})
</script>
POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id meldemichel-map-client-wrapper (resp. ${yourId}-wrapper) and can be used to style the map's height and width with, for example:
#meldemichel-map-client-wrapper {
/* "position: relative;" is the minimum required styling */
position: relative;
height: 400px;
width: 100%;
}
To also serve users with JS disabled some content, this fragment is common:
<div id="meldemichel-map-client">
<!-- Optional, if your page does not have its own <noscript> information -->
<noscript>Please use a browser with active JavaScript to use the map client.</noscript>
</div>
For a complete example, you may also check the running embedded scenario or its source file.
Child documents
Locales
| Locale Key | German default | English default |
|---|---|---|
| meldemichel.attributions.stadtplan | Kartografie Stadtplan: Landesbetrieb Geoinformation und Vermessung | |
| meldemichel.attributions.stadtwald | Kartografie Stadtwald: Freie und Hansestadt Hamburg, Behörde für Umwelt, Klima, Energie und Agrarwirtschaft (BUKEA) | |
| meldemichel.attributions.luftbilder | Kartografie Luftbilder: Landesbetrieb Geoinformation und Vermessung | |
| meldemichel.attributions.reports | Meldungen durch Bürger | |
| meldemichel.gfi.title | Meldung | |
| meldemichel.gfi.skat | Kategorie | |
| meldemichel.gfi.beschr | Beschreibung | |
| meldemichel.gfi.rueck | Rückmeldung | |
| meldemichel.gfi.start | Gemeldet am | |
| meldemichel.gfi.statu | Status | |
| meldemichel.gfi.tooltip.multiHeader | Mehrere Anliegen | |
| meldemichel.gfi.tooltip.multiBody | Klick zum Zoomen | |
| meldemichel.gfi.tooltip.multiBodyUnresolvable | Klick zum Öffnen | |
| meldemichel.layers.stadtplan | Stadtplan | |
| meldemichel.layers.stadtwald | Stadtwald | |
| meldemichel.layers.luftbilder | Luftbildansicht | |
| meldemichel.layers.reports | Meldungen | |
| meldemichel.layers.hamburgBorder | Stadtgrenze Hamburg | |
| meldemichel.skat.100 | Wege und Straßen | |
| meldemichel.skat.101 | Schlagloch und Wegeschaden | |
| meldemichel.skat.102 | Verunreinigung und Vandalismus | |
| meldemichel.skat.103 | Wildwuchs und Überwuchs | |
| meldemichel.skat.104 | Beschädigtes Verkehrszeichen | |
| meldemichel.skat.105 | Beschädigte Brücke, Tunnel, Mauer, Treppe | |
| meldemichel.skat.106 | Beschädigte Geländer, Poller, Fahrradständer, Sitzgelegenheit | |
| meldemichel.skat.111 | Schrottfahrräder | |
| meldemichel.skat.112 | Abgemeldete Fahrzeuge | |
| meldemichel.skat.113 | Radverkehr | |
| meldemichel.skat.114 | Stadtwald Hamburg | |
| meldemichel.skat.115 | Stadtwald: Schäden am Baumbestand | |
| meldemichel.skat.116 | Stadtwald: Schäden an Einrichtungen | |
| meldemichel.skat.117 | Stadtwald: Wegeschäden | |
| meldemichel.skat.118 | Stadtwald: Verschmutzung / Müll | |
| meldemichel.skat.119 | Stadtwald: Illegale Aktivitäten | |
| meldemichel.skat.120 | Stadtwald: Sonstige Schäden | |
| meldemichel.skat.200 | Ampeln und Leuchten | |
| meldemichel.skat.202 | Ampel gestört | |
| meldemichel.skat.203 | beleuchtetes Schild gestört | |
| meldemichel.skat.204 | Straßenbeleuchtung ausgefallen | |
| meldemichel.skat.205 | Straßenbeleuchtung tagsüber in Betrieb | |
| meldemichel.skat.400 | Grünanlagen und Spielplätze | |
| meldemichel.skat.401 | Baumschaden | |
| meldemichel.skat.402 | Spielgeräteschaden | |
| meldemichel.skat.500 | Siele und Gewässer | |
| meldemichel.skat.501 | Gully-Schaden | |
| meldemichel.skat.502 | Graben | |
| meldemichel.skat.503 | Gewässerverunreinigung | |
| meldemichel.status.In Bearbeitung | In Bearbeitung | |
| meldemichel.status.abgeschlossen | Bearbeitet | |
| meldemichel.time.0 | Keine Einschränkung | |
| meldemichel.time.1 | Die letzten 7 Tage | |
| meldemichel.time.2 | Die letzten 30 Tage | |
| meldemichel.time.3 | Zeitraum wählen | |
| plugins.filter.layerName.6059 | Meldungen — Filter | |
| plugins.filter.layerName.6061 | Meldungen (Stage) — Filter | |
| plugins.filter.category.6059.skat.100 | Wege und Straßen | |
| plugins.filter.category.6059.skat.101 | Schlagloch und Wegeschaden | |
| plugins.filter.category.6059.skat.102 | Verunreinigung und Vandalismus | |
| plugins.filter.category.6059.skat.103 | Wildwuchs und Überwuchs | |
| plugins.filter.category.6059.skat.104 | Beschädigtes Verkehrszeichen | |
| plugins.filter.category.6059.skat.105 | Beschädigte Brücke, Tunnel, Mauer, Treppe | |
| plugins.filter.category.6059.skat.106 | Beschädigte Geländer, Poller, Fahrradständer, Sitzgelegenheit | |
| plugins.filter.category.6059.skat.111 | Schrottfahrräder | |
| plugins.filter.category.6059.skat.112 | Abgemeldete Fahrzeuge | |
| plugins.filter.category.6059.skat.113 | Radverkehr | |
| plugins.filter.category.6059.skat.114 | Stadtwald Hamburg | |
| plugins.filter.category.6059.skat.115 | Stadtwald: Schäden am Baumbestand | |
| plugins.filter.category.6059.skat.116 | Stadtwald: Schäden an Einrichtungen | |
| plugins.filter.category.6059.skat.117 | Stadtwald: Wegeschäden | |
| plugins.filter.category.6059.skat.118 | Stadtwald: Verschmutzung / Müll | |
| plugins.filter.category.6059.skat.119 | Stadtwald: Illegale Aktivitäten | |
| plugins.filter.category.6059.skat.120 | Stadtwald: Sonstige Schäden | |
| plugins.filter.category.6059.skat.200 | Ampeln und Leuchten | |
| plugins.filter.category.6059.skat.202 | Ampel gestört | |
| plugins.filter.category.6059.skat.203 | beleuchtetes Schild gestört | |
| plugins.filter.category.6059.skat.204 | Straßenbeleuchtung ausgefallen | |
| plugins.filter.category.6059.skat.205 | Straßenbeleuchtung tagsüber in Betrieb | |
| plugins.filter.category.6059.skat.400 | Grünanlagen und Spielplätze | |
| plugins.filter.category.6059.skat.401 | Baumschaden | |
| plugins.filter.category.6059.skat.402 | Spielgeräteschaden | |
| plugins.filter.category.6059.skat.500 | Siele und Gewässer | |
| plugins.filter.category.6059.skat.501 | Gully-Schaden | |
| plugins.filter.category.6059.skat.502 | Graben | |
| plugins.filter.category.6059.skat.503 | Gewässerverunreinigung | |
| plugins.filter.category.6059.statu.In Bearbeitung | In Bearbeitung | |
| plugins.filter.category.6059.statu.abgeschlossen | Bearbeitet | |
| plugins.filter.category.6059.title.skat | Kategorien | |
| plugins.filter.category.6059.title.statu | Status | |
| plugins.filter.category.6061.skat.100 | Wege und Straßen | |
| plugins.filter.category.6061.skat.101 | Schlagloch und Wegeschaden | |
| plugins.filter.category.6061.skat.102 | Verunreinigung und Vandalismus | |
| plugins.filter.category.6061.skat.103 | Wildwuchs und Überwuchs | |
| plugins.filter.category.6061.skat.104 | Beschädigtes Verkehrszeichen | |
| plugins.filter.category.6061.skat.105 | Beschädigte Brücke, Tunnel, Mauer, Treppe | |
| plugins.filter.category.6061.skat.106 | Beschädigte Geländer, Poller, Fahrradständer, Sitzgelegenheit | |
| plugins.filter.category.6061.skat.111 | Schrottfahrräder | |
| plugins.filter.category.6061.skat.112 | Abgemeldete Fahrzeuge | |
| plugins.filter.category.6061.skat.113 | Radverkehr | |
| plugins.filter.category.6061.skat.114 | Stadtwald Hamburg | |
| plugins.filter.category.6061.skat.115 | Stadtwald: Schäden am Baumbestand | |
| plugins.filter.category.6061.skat.116 | Stadtwald: Schäden an Einrichtungen | |
| plugins.filter.category.6061.skat.117 | Stadtwald: Wegeschäden | |
| plugins.filter.category.6061.skat.118 | Stadtwald: Verschmutzung / Müll | |
| plugins.filter.category.6061.skat.119 | Stadtwald: Illegale Aktivitäten | |
| plugins.filter.category.6061.skat.120 | Stadtwald: Sonstige Schäden | |
| plugins.filter.category.6061.skat.200 | Ampeln und Leuchten | |
| plugins.filter.category.6061.skat.202 | Ampel gestört | |
| plugins.filter.category.6061.skat.203 | beleuchtetes Schild gestört | |
| plugins.filter.category.6061.skat.204 | Straßenbeleuchtung ausgefallen | |
| plugins.filter.category.6061.skat.205 | Straßenbeleuchtung tagsüber in Betrieb | |
| plugins.filter.category.6061.skat.400 | Grünanlagen und Spielplätze | |
| plugins.filter.category.6061.skat.401 | Baumschaden | |
| plugins.filter.category.6061.skat.402 | Spielgeräteschaden | |
| plugins.filter.category.6061.skat.500 | Siele und Gewässer | |
| plugins.filter.category.6061.skat.501 | Gully-Schaden | |
| plugins.filter.category.6061.skat.502 | Graben | |
| plugins.filter.category.6061.skat.503 | Gewässerverunreinigung | |
| plugins.filter.category.6061.statu.In Bearbeitung | In Bearbeitung | |
| plugins.filter.category.6061.statu.abgeschlossen | Bearbeitet | |
| plugins.filter.category.6061.title.skat | Kategorien | |
| plugins.filter.category.6061.title.statu | Status | |
| plugins.geoLocation.toast.notInBoundary | Das System konnte Sie leider nicht in Hamburg verorten. Bitte benutzen Sie Karte und Suche, um einen Schaden innerhalb von Hamburg zu melden. | |
| plugins.geoLocation.toast.boundaryError | Die Verortung ist fehlgeschlagen. Bitte benutzen Sie Karte und Suche, um einen Schaden innerhalb von Hamburg zu melden. | |
| plugins.gfi.header.close | Zurück zur Listenansicht der Meldungen | |
| plugins.gfi.list.header | Meldungsliste | |
| plugins.gfi.list.entry | Meldung | |
| plugins.gfi.list.emptyView | Im aktuellen Kartenausschnitt sind keine Meldungen enthalten. | |
| plugins.gfi.list.pagination.currentPage | Aktuelle Seite, Seite {{page}} von {{maxPage}} der Schadensmeldungen | |
| plugins.gfi.list.pagination.page | Öffne Seite {{page}} von {{maxPage}} der Schadensmeldungen | |
| plugins.gfi.list.pagination.next | Nächste Seite öffnen | |
| plugins.gfi.list.pagination.previous | Vorherige Seite öffnen | |
| plugins.gfi.list.pagination.wrapper | Seitenauswahl | |
| plugins.gfi.noActiveLayer | Die Meldungen sind derzeit ausgeschaltet. Sie können Sie über die Kartenauswahl (Buch-Symbol in der Werkzeugleiste) wieder einschalten. | |
| plugins.iconMenu.hints.filter | Filter | |
| plugins.iconMenu.hints.gfi | Meldungsliste | |
| plugins.pins.toast.notInBoundary | Es können nur Koordinaten innerhalb von Hamburg gewählt werden. |