xplorer

Work in progress.

This plugin is wrapper over ol. It gives interactive map component to create you applications.

Installation

To install this library, run:

$ npm install @xplorer/map --save

Usage

1. Add the default styles

• As this plugin is based on openlayers, we need to Import ol.css into web page. you can use its CDN like mentioned below in your index.html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol.css" />

or

You can download it and provide it in .angular-cli.json

 "styles": [
    "YOUR_STYLE_ASSEST_PATH/ol.css",
    "styles.css"
  ]

node_modules/ng2-dnd/bundles/style.css

2. Import the XpMap module.

In your Angular AppModule you need to import XpMap module :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { XpMap } from '@xplorer/map';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    XpMap
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its component in your Angular application:

app.component.ts

import { Component } from '@angular/core';
import Map from 'ol/map';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import TileWMS from 'ol/source/tileWMS';
import Stamen from 'ol/source/stamen';
import View from 'ol/view';

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

export class AppComponent {
  title = 'app';
  view = new View({
    center: [0, 0],
    zoom: 2
  });

  layers;

  constructor() {
    const OsmLayer = new TileLayer({
      source: new OSM()
    });
    OsmLayer.setProperties({ name: 'OpenLayers' });



    const StamenLayer = new TileLayer({
      source: new Stamen({
        layer: 'watercolor'
      })
    });
    layer.setProperties({ name: 'Stamen' });

    this.layers = [OsmLayer, StamenLayer];
    // or you can provide single layer
    // this.layers = OsmLayer
  }
}

In your app.component.html

<!-- You can now use your library map component in app.component.html -->
<xp-map [layers]="layers" [view]="view"></xp-map>

API of xp-map component

| Property Name | Type | Description | | ----------------- |:---------------:| ------------:| | layers | Input | It can be array or object of layer. | | view | Input | View object of openlayers | | height | Input (optional)| Desired height of map. | | width | Input (optional)| Desired width of map. | | onClick | output | Map click Event| | onDblClick | output | Map dblclick Event| | onMoveEnd | output | Map moveend Event | | onPointerDrag | output | Map pointerdrag Event | | onPointerMove | output | Map pointermove Event | | onPostCompose | output | Map postcompose Event | | onPostRender | output | Map postrender Event | | onPreCompose | output | Map precompose Event | | onPropertyChange | output | Map propertychange Event | | onSingleClick | output | Map singleclick Event |

With the help of template ref variable you can also use following method.

• getMap() This gives you openlayer map object.
• setView(view: View) Used to set view of map.
• getLayers() Used to get layer's array on map
• addLayers(olLayer) It can be array or object of layer.

License

MIT © Ashwani Kumar