1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| export class Map {
constructor({target = " ",center = [], map='', zoom = " ", pitch = " ", bearing = " ", maxZoom = " ", withDem = true, withGeocoder = true, withUrlPos = true, token=''}) {
this._target = target;
this._center = center;
this._zoom = zoom;
this._pitch = pitch;
this._bearing = bearing;
this._maxZoom = maxZoom;
this._withDem = withDem,
this._withGeocoder = withGeocoder,
this._withUrlPos = withUrlPos,
this._token = token
}
onAdd(){
this._div = document.createElement('div');
this._div.id = "free-map";
this._container = document.getElementById(this._target);
this._container.appendChild(this._map);
this._map = new maplibregl.Map({
container: "free-map",
style:"https://api.maptiler.com/maps/bright/style.json?key="+token,
center: this._center, // starting position [lng, lat]
zoom: this._zoom, // starting zoom
pitch: 0,
bearing: 0,
maxPitch: 80,
maxZoom: 22
})
this._map.addControl(new maplibregl.NavigationControl());
if(this._withDem === true){
this.getDem(this._map);
}
if(this._withUrlPos === true){
this.getUrlPosition(this._map);
}
if(this._withGeocoder === true){
this.getGeocoder(this._map);
}
this._container = document.getElementById(this._target);
this._container.appendChild(this._div);
return this._map; |
Partager