@coreo/ionic-map

Ionic 2+ module to bring up a map.

Dependencies

This module depends upon leaflet.

Installation

yarn add leaflet @types/leaflet @coreo/ionic-map

Usage

Import the module in your app.module.ts:

import { CoreoMapModule } from '@coreo/ionic-map';
...
@NgModule({
    imports: [
        ...
        CoreoMapModule
        ...
    ]
})
export class AppModule {}

Use the component in your HTML:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <coreo-map geolocate taplocate markLocation (coordsChanged)="coordsChanged($event)" (mapSetupFailed)="mapSetupFailed($event)" (geolocatorStarted)="geolocatorStarted()" (geolocatorStopped)="geolocatorStopped()" (mapReady)="mapReady()"></coreo-map>
</ion-content>

Layers

With no configuration, a default tile layer will added to the map using the Open Street Maps (OSM) set of tiles.

You may add your own tiles by using the [layers] input.

Standard Layers

An example of a basic leaflet tile layer

      Leaflet.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        id: 'OpenTopoMap',
        maxZoom: 17,
        attribution: '...'
      })

Google Maps

It is possible to use google maps tile layer, using the leaflet.gridlayer.googlemutant module.

import 'leaflet.gridlayer.googlemutant';
...
@Component({
  ...
})
export class MyPage{
  googleReady: Promise;

  constructor(googleMaps: CoreoGoogleMaps){}

  ngOnInit(){
    this.googleReady = 
  }
}

Attributes available

Inputs

• coords: Coordinates to center the map on. Coords should conform to the CoreoMapCoords interface. When setting the coords, the map will center at the specified location.
• layers: An array of L.TileLayer objects. If omitted, a default will be used (see above).
• mapConfig: Configuration for Google Map. Refer to the Google Mutant plugin for full configuration options.
• geolocate: Show the geolocate button in the top right hand corner of the map. In addition, if no coords are passed, attempt to locate the user when the map first loads.
• geolocatorColor: hex colour to use for the geolocator icon. Default: #000.
• tolerateAccuracyMeters: number in meters to accept as accuracy when geolocating. If the geolocation service returns a result with a wider accuracy than specified, it will keep trying until it finds a location with an acceptable accuracy, up to a maximum of 60s. Once the 60s is passed, the best accuracy location will be returned via the coordsChanged output, if any was found. Default: 50
• fallbackCoords: if the geolocator couldn't find the user's location, the map will be centered at this location. Value should be a latitude/longtitude string. Default: 54.729223,-3.7391789 (center of the UK).
• taplocate: Allow the user to change the coords by tapping on the map. Often used in conjunction with geolocate and markLocation.
• markLocation: Show a pin marker at the curent coords.
• markerFillColor: hex colour to use for the marker colour. Default: #007fff (a blue hue).
• markerStrokeColor: hex colour to use for the marker outline. Default: #000.
• markerCircleColor: hex colour to use for the marker inner circle. Default: #000.
• initAfter: wait to initialise the map until after the specified number of ms has passed. Useful when the DOM needs to sort itself out beforehand (e.g. when using an Ionic modal). Default: 0.

Outputs

• coordsChanged: emitted whenever the coordinates have changed. Value emitted will confirm to CoreoMapCoords.
• mapSetupFailed: emitted if the Google Maps API could not be reached. Normally this will be due to the user being offline.
• geolocatorStarted: emitted when the geolocator starts
• geolocatorStopped: emitted when the geolocator stops

Component API

The map can be mounted as a ViewChild in your host component. The following properties and methods are available:

• map: the L.Map instance. Useful for modifying the map with the Leaflet API.
• locationMarker: the L.Marker pin marker instance. Will only be available if the markLocation attribute was set.
• googleMapLayer: the L.GridLayer Google Map layer.

Example

map.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Map Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <coreo-map
   [mapConfig]="mapConfig"
   initAfter="100"
   [coords]="coords"
   fallbackCoords="49.4089694,5.5960209"
   geolocate
   geolocatorColor="#222"
   tolerateAccuracyMeters="20"
   taplocate
   markLocation
   markerFillColor="#cc271f"
   markerStrokeColor="#5b201d"
   markerCircleColor="#5b201d"
   (coordsChanged)="coordsChanged($event)"
   (mapSetupFailed)="mapSetupFailed($event)"
   (geolocatorStarted)="geolocatorStarted($event)"
   (geolocatorStopped)="geolocatorStopped($event)"></coreo-map>
  <p *ngIf="coords">Your coords are: {{ coords.lat }}, {{ coords.lng }}.</p>
  <p *ngIf="coords?.acc">Your position is accurate to {{ coords.acc }}m.</p>
</ion-content>

map.ts

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { CoreoMapComponent } from '@coreo/ionic-map';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage implements AfterViewInit {
  coords;
  mapConfig = {
    type: 'satellite'
  }

  @ViewChild(CoreoMapComponent) coreoMap;

  ngAfterViewInit() {
    console.log(this.coreoMap);
  }

  coordsChanged(c) {
    this.coords = c;
  }

  mapSetupFailed() {
    console.log('map setup failed');
  }

  geolocationFailed() {
    console.log('geo failed');
  }
}