https://www.werneck.de/_/scripts/rgElements/src/Elements/rgMap/rg-map.js

1import {rgElement} from '../rgElement/rg-element.js';
2
3function waitForApi(args, fn) {
4    this.addEventListener('rg-map:apiready', function () {
5        if (typeof this[fn] === 'function') {
6            this[fn](...args);
7        }
8    }.bind(this), {
9        once: true,
10        passive: true
11    });
12}
13
14export class rgMap extends rgElement {
15
16    lat = null;
17    lon = null;
18    center = null;
19    zoom = 14;
20    maxzoom = null;
21    usecluster = false;
22    location = '';
23    map = null;
24    apiReady = false;
25    mapReady = false;
26    config = new Map([
27        ['baseLayer', ''],
28        ['layers', []],
29        ['ApiKeys', new Map()],
30        ['displayProjection', 'EPSG:900913'],
31        ['nominatimUrls', [
32            'https://photon.komoot.io/api/?lang=de&q=',
33            'https://nominatim.openstreetmap.org/search?format=geojson&q=',
34        ]],
35        ['lastLocation', ''],
36    ]);
37    status = new Map([
38        ['manipulatingAttributes', false],
39    ]);
40    /**Layers**/
41    layers = new Map();
42    features = new Map();
43
44    static observedAttributes = [
45        'data-zoom',
46        'data-lat',
47        'data-lon',
48        'data-center',
49        'data-location',
50    ];
51
52    constructor() {
53        super();
54    }
55
56    connectedCallback() {
57        this.setUpElement();
58        !this.shadowRoot && this.attachShadow({mode: 'open'});
59        this.loadCss(this.rootpath + '/css/rg-map.css');
60        this.addEventListener('rg-map:apiloaded', function () {
61            rgMapApi.assignTo(this);
62            this.dispatchEvent(new CustomEvent(this.tagName.toLowerCase() + ':apiready', {
63                detail: {el: this}
64            }));
65            this.setup();
66        }.bind(this));
67        this.extendApi('/api/rg-map-api.js');
68        this.setupComplete();
69    }
70
71    attributeChangedCallback(name, oldValue, newValue) {
72        if (!this.status.get('manipulatingAttributes') && this.map && newValue) {
73            if (name === 'data-center') {
74                this.lat = null;
75                this.lon = null;
76            }
77            this.setAttributes();
78        }
79    }
80
81    setAttributes() {
82        waitForApi.call(this, arguments, 'setAttributes');
83    }
84
85    addDataLayer() {
86        waitForApi.call(this, arguments, 'addDataLayer');
87    }
88
89    zoomToMaxExtent() {
90        waitForApi.call(this, arguments, 'zoomToMaxExtent');
91    }
92
93    zoomToLayerExtent() {
94        waitForApi.call(this, arguments, 'zoomToLayerExtent');
95    }
96
97    getDataLayer() {
98        waitForApi.call(this, arguments, 'getDataLayer');
99    }
100
101    showLocation() {
102        waitForApi.call(this, arguments, 'showLocation');
103    }
104}