Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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 })
}); = new Map({
controls: defaultControls({ attribution: false }).extend([attribution]),
target: 'map',
layers: [
new TileLayer({ source: new OSM() }),
new VectorLayer({
source: new Vector({ features: [this.userMarker] })
view: new View({
center: fromLonLat([0, 0]),
zoom: MapComponent.ZoomLevelSingleMarker
setupMarkerClickHandler(, 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