@xplorer/map

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