Neanderthals Programming Machines
    Wondering what’s next for npm?Check out our public roadmap! »

    @coreo/ionic-map
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.4 • Public • Published

    @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');
      }
    }

    Keywords

    none

    Install

    npm i @coreo/ionic-map

    DownloadsWeekly Downloads

    15

    Version

    3.0.4

    License

    MIT

    Unpacked Size

    214 kB

    Total Files

    60

    Last publish

    Collaborators

    • avatar
    • avatar