Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
ts
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

GPS Plugin for leaflet-ng2

This is a GPS service and directive for YAGA's leaflet-ng2.

How to use

First install this module into your project with npm:

npm install --save @yaga/leaflet-ng2-gps

Keep in mind that you have to add @yaga/leaflet-ng2 as peer dependency

Insert this module into your app module

import { YagaModule } from '@yaga/leaflet-ng2';
import { GpsService, YagaGpsModule } from '@yaga/leaflet-ng2-gps';

// ...

@Component({
    selector: 'app',
    templateUrl: 'app.html',
})
export class AppComponent {
    // ...
}

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ YagaGpsModule, YagaModule ],
})
export class AppModule {}

Use the yaga-gps directive in your template and use the Circle, CircleMarker or Marker directives within. You can style the sub-directives like you with directly in the template. The yaga-gps directive take care about their display state and position. In addition the radius of Circle directives gets set according to the GPS accuracy.

<yaga-map [lat]="lat" [lng]="lng">
  <!-- other YAGA directives -->
  <yaga-gps [active]="activeState" [display]="displayState">
    <yaga-marker>
      <yaga-popup>
        This is your current position...
      </yaga-popup>
    </yaga-marker>
    <yaga-circle-marker [radius]="3" [color]="'blue'"></yaga-circle-marker>
    <yaga-circle [opacity]="0.4" [weight]="1" [color]="'#00c'" [fillColor]="'#33f'"></yaga-circle>
  </yaga-gps>
</yaga-map>

Note: The radius of the CircleMarker directive will not be set by this directive (it makes no sense!)

You can’t perform that action at this time.