Init an OpenLayers Map object with TypeScript
private initilizeMap(): void { | |
// | |
// Create placeholders for markers | |
// | |
this.markers = []; | |
for (let i = 0; i < MapComponent.MaxNumMarkers; i++) { | |
this.markers.push(new Feature({})); | |
} | |
this.userMarker = new Feature(); | |
// | |
// Create a map with an OpenStreetMap-layer, | |
// a marker layer and a view | |
var attribution = new Attribution({ | |
// Attach the attribution information | |
// to an element outside of the map | |
target: 'attribution' | |
}); | |
const markersLayer = new VectorLayer({ | |
source: new Vector({ features: this.markers }) | |
}); | |
this.map = new Map({ | |
controls: defaultControls({ attribution: false }).extend([attribution]), | |
target: 'map', | |
layers: [ | |
new TileLayer({ source: new OSM() }), | |
markersLayer, | |
new VectorLayer({ | |
source: new Vector({ features: [this.userMarker] }) | |
}) | |
], | |
view: new View({ | |
center: fromLonLat([0, 0]), | |
zoom: MapComponent.ZoomLevelSingleMarker | |
}) | |
}); | |
setupMarkerClickHandler(this.map, markersLayer, this.markers, (id) => this.onMarkerClicked.emit(id)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment