Maps created with Angular & OpenLayers using Material design

Mangol is an open source library for combining Angular, Angular Material components and OpenLayers to create a modern, responsive interactive GUI for web maps (M stands for Material, ang for Angular and ol for OpenLayers). The project has been created using @angular/cli, a command-line tool for Angular projects (1.5.0). The project is written in TypeScript 2.4.2 and uses SCSS for styling. It has been built with Angular 5.0.1 and OpenLayers 4.4.2, Angular Material 5.0.0-rc0. The packaging is done via Webpack module bundler.

Formerly, Mangol was called ng2ol3 and was based on SystemJS and without angular-cli.

Node.js with npm is required. The preferenced version of Node.js is 8.x.x, the preferenced version of npm is 5.x.x. After git clone, navigate to the main directory and run npm install to download all dependencies. If you prefer Yarn, you can also run yarn install instead. You also need angular-cli to build or run the project. To install it (globally) on your machine, run npm install -g @angular/cli in your terminal.

An online example can be opened here.

If you wish to see the built-in demos or modify the source files, simply run ng serve to load the demo page on localhost:4200. With this command you can also watch file changes until you shut it down.

If you would like to use Mangol as an npm library in your Angular2+ (TypeScript) project, you can also do that since Mangol is on npm as well.

First, add Mangol as a dependency to your project:

npm install mangol --save

You have to add to your app.module.ts (or whatever you call it in your project, the one that gets bootstrapped in main.ts)

import {MangolModule} from 'mangol';

And in @NgModule add MangolModule to the imports:

imports: [
    ...,
    MangolModule,
    ...
]

It is highly recommended to add some vendor js files. If you use Webpack and created your project with @angular/cli, add the following libraries to your angular-cli.json:

"scripts": [
    "../node_modules/openlayers/dist/ol.js",
    "../node_modules/proj4/dist/proj4.js",
    "../node_modules/jspdf/dist/jspdf.min.js"
]

If you use SystemJS add the files above in a regular way to your index.html (with script tags).

At the beginning of your main SCSS file, you should import mangol.scss like this:

@import "~mangol/mangol";

After that, you can use Mangol html tags in your templates such as

<mangol></mangol>

This is the simplest implementation of Mangol in a component (this will create a default map with zoom buttons and with one OpenStreetMap layer) :

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `
      <mangol></mangol>
    `
})
export class AppComponent {

}

You can further configure your Mangol component for example by adding a sidebar and a layertree like this (for more examples, see the src/app/demos folder, for all possible configuration settings examine the /src/app/demos/demo-full.ts file):

import { Component, OnInit } from '@angular/core';
import { MangolConfig } from 'mangol/src/lib/interfaces/mangol-config.interface';

import * as ol from 'openlayers';

@Component({
  selector: 'app',
  template: `
      <mangol [config]="config"></mangol>
    `
})
export class AppComponent implements OnInit {

  // Notice the MangolConfig type, this  is a helper interface to easily fill out the required and optional parameters for your Mangol configuration.
  config = {} as MangolConfig;

  public ngOnInit(): any {
    this.config = {
      map: {
        renderer: 'canvas',
        target: 'mangol-map',
        view: {
          projection: 'EPSG:900913',
          center: ol.proj.fromLonLat([19.39563, 47.16846], 'EPSG:900913'),
          zoom: 7
        },
        layertree: {
          layers: [{
            name: 'OpenStreetMap layer',
            layer: new ol.layer.Tile({
              source: new ol.source.OSM()
            })
          }],
          groups: []
        }
      },
      sidebar: {
        collapsible: true,
        opened: true,
        toolbar: {
          layertree: {}
        }
      }
    };
  };
}

Mangol uses Material components and therefore it supports some SCSS customization. For example if you wish to alter the default colors, you can easily do that by overwriting the primary, accent and warn Material palettes before importing mangol.scss. Do it like this:

@import '~@angular/material/theming';
@include mat-core();
$mangol-primary: mat-palette($mat-teal);
$mangol-accent: mat-palette($mat-lime);
$mangol-warn: mat-palette($mat-deep-orange);
$mangol-theme: mat-light-theme($mangol-primary, $mangol-accent, $mangol-warn);

@import "~mangol/mangol";

If you wish to set the component height, sidebar width or the quicksearch panel width, also do it before importing mangol.scss:

$mangol-height: 400px;
$mangol-sidebar-width: 450px;
$mangol-quicksearch-width: 250px;

@import "~mangol/mangol";

In order to reach more functionality, you can access the MangolReady object, which returns your MangolConfig and the MangolMapService instance. This latter stores the map(s) and some helper functions. All you have to do is use the 'mapReady' output on your 'mangol' component. With that you can extend your app quite easily:

import { Component } from '@angular/core';
import { MangolReady } from 'mangol/src/lib/interfaces/mangol-ready.interface';

@Component({
  selector: 'app-root',
  template: `<mangol (mapReady)="onMapReady($event)"></mangol>`
})
export class AppComponent {
  title = 'app works!';

  onMapReady($event: MangolReady) {
    console.log($event);
  }
}

This project is still under heavy development. In the near future I intend to add/extend other widgets. More examples will arrive as soon as the project becomes smarter. Any notice, remarks or pull requests are appreciated.

Mangol was created by Gergely Padányi-Gulyás

Any donations are highly appreciated.