CODEWITHSUNDEEP
typescriptangular6openstreetmap
ArgV
ArgV

Reputation: 195

Open Street Maps with Angular 6 - Add a marker to map

Based on this post I've created an OSM layer component. Now I want to add a pin/marker for target geo-location. Does someone has already done this?

Upvotes: 2

Views: 9097

Answers (1)

Juan Carlos Quispe
Juan Carlos Quispe

Reputation: 176

Create a component (called for example "map").
map.component.html:

<div id="map" class="map" style="height:500px"></div>

map.component.ts:

import { Component, OnInit } from '@angular/core';

declare var ol: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class PrincipalComponent implements OnInit {

  constructor() { }

  latitude: number = -16.509418;
  longitude: number = -68.124151;

  ngOnInit() {
    this.map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([this.longitude, this.latitude]),
        zoom: 12
      })
    });
    this.addPoint(this.latitude, this.longitude);
  }

  setCenter() {
    var view = this.map.getView();
    view.setCenter(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.addMarker(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.setZoom(12);
  }

  addPoint(lat: number, lng: number) {
    var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
        })]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: "assets/img/my-icon.png"
        })
      })
    });
    this.map.addLayer(vectorLayer);
    }
}

Upvotes: 4

Related Questions