set current Location marker

Question

I worked through this tutorial and got it all up and running. Now I want to get my current browser Location and set a marker for it onMapReady. I am pretty new to programming and I'm just starting to learn about Angular, so sorry for this noobie question :D

All the examples I found (like this for e.g.) from leaflet are not working for me, as I can't translate them to my Angular project.

Can someone help me with this?

Here's my code from the component.ts

    import { Component } from '@angular/core';
import { icon, latLng, marker, polyline, tileLayer, Map, point } from 'leaflet';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {



  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  OSM =  tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });

  // Marker for the top of Mt. Ranier
  currentLocation = marker([ 46.8523, -121.7603 ], {
    icon: icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    }),
    title: "I am here"
  });

  // Path from paradise to summit - most points omitted from this example for brevity
  route = polyline([[ 46.78465227596462,-121.74141269177198 ],
    [ 46.80047278292477, -121.73470708541572 ],
    [ 46.815471360459924, -121.72521826811135 ],
    [ 46.8360239546746, -121.7323131300509 ],
    [ 46.844306448474526, -121.73327445052564 ],
    [ 46.84979408048093, -121.74325201660395 ],
    [ 46.853193528950214, -121.74823296256363 ],
    [ 46.85322881676257, -121.74843915738165 ],
    [ 46.85119913890958, -121.7519719619304 ],
    [ 46.85103829018772, -121.7542376741767 ],
    [ 46.85101557523012, -121.75431755371392 ],
    [ 46.85140013694763, -121.75727385096252 ],
    [ 46.8525277543813, -121.75995212048292 ],
    [ 46.85290292836726, -121.76049157977104 ],
    [ 46.8528160918504, -121.76042997278273 ]]);

  // Layers control object with our two base layers and the three overlay layers
  layersControl = {
    baseLayers: {
      'Google Maps': this.googleMaps,
      'Google Hybrid': this.googleHybrid,
      'OSM': this.OSM
    },
    overlays: {
      'My Location': this.currentLocation,
      'Mt. Rainier Climb Route': this.route

    }
 /*    overlays: {
      'Mt. Rainier Summit': this.summit,
      'Mt. Rainier Paradise Start': this.paradise,
      'Mt. Rainier Climb Route': this.route
    } */
  };


  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
  options = {
    /* layers: [ this.googleMaps, this.route, this.summit, this.paradise ], */
    layers: [ this.googleMaps, this.currentLocation,this.route], 
    zoom: 7,
    center: latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: Map) {
    map.fitBounds(this.route.getBounds(),{
      padding: point(24, 24),
      maxZoom: 12,
      animate: true
    });
  }

}

please read up on ["how to create a minimal, verifiable and complete example"](https://stackoverflow.com/help/mcve) and ["how to ask?"](https://stackoverflow.com/help/how-to-ask). — blkpingu, May 19 '18 at 13:19
Which part are you having trouble with? Figuring out the current location? Or putting the marker on the map? — reblace, May 19 '18 at 22:56
@reblace: with figuring out the current location, the markers are already there — ArminFB, May 20 '18 at 21:44
Getting the geolocation of the browser isn't specific to Angular or Leaflet. You can reference the MDN docs for info: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation — reblace, May 21 '18 at 13:32
@ArminFB Hi. Did you solve the issue or you still need help? — kboul, Aug 05 '18 at 20:06

score 0 · Answer 1 · answered Feb 02 '21 at 13:35

Angular does not have any built-in instruments to use Geolocation API. This is an Observable based abstraction over Geolocation API to use with Angular

How to use Usage is pretty simple: just import service in your component and subscribe to it. Service extends Observable and will emit the Position object.

import {GeolocationService} from '@ng-web-apis/geolocation';

// ...

constructor(private readonly geolocation$: GeolocationService) {}

getPosition() {
       geolocation$.subscribe(position => 
        doSomethingWithPosition(position));
   }

You also can use async pipe

<app-component-using-position [position]="geolocation$ | async"></app-component-using-position>

Single position

If you need to get the position just once and stop observing user location, you can subscribe to geolocation$ and use take(1) RxJs operator. Service is cold, meaning if there are no Subscribers, it doesn't track position.

https://ng-web-apis.github.io/geolocation/

https://www.npmjs.com/package/@ng-web-apis/geolocation

set current Location marker

1 Answers1