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. The project is written in TypeScript and uses SCSS for styling. 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 (globally) the compatible version 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.
example_project folder there is a fully working implementation example. Copy it anywhere on your machine, run
npm install (or
yarn install) and
ng serve from that directory to see a full page Mangol app.
If you would like to use Mangol as an npm library in your Angular (TypeScript) project, you can also do that since Mangol is on npm as well.
First, add Mangol and Angular material as dependencies to your project:
npm install --save mangol @angular/material @angular/cdk @angular/animations
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)
And in @NgModule add MangolModule and BrowserAnimationsModule to the imports:
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
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:
After that, you can use Mangol html tags in your templates such as
This is the simplest implementation of Mangol in a component (this will create a default map with zoom buttons and with one OpenStreetMap layer) :
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):
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:
If you wish to set the component height, sidebar width or the quicksearch panel width, also do it before importing mangol.scss:
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:
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.