Skip to content

Instantly share code, notes, and snippets.

Embed
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 })
});
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