{"id":13497467,"url":"https://github.com/fegyi001/mangol","last_synced_at":"2026-01-14T16:45:15.848Z","repository":{"id":48199969,"uuid":"75379444","full_name":"fegyi001/mangol","owner":"fegyi001","description":"Maps created with Angular \u0026 OpenLayers using Material design","archived":true,"fork":false,"pushed_at":"2022-01-10T15:20:04.000Z","size":27300,"stargazers_count":97,"open_issues_count":4,"forks_count":47,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-10-23T13:35:06.219Z","etag":null,"topics":["angular","material","openlayers","typescript"],"latest_commit_sha":null,"homepage":"http://188.166.116.137/mangol/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fegyi001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-02T09:06:58.000Z","updated_at":"2025-10-23T08:27:32.000Z","dependencies_parsed_at":"2022-08-24T14:38:23.534Z","dependency_job_id":null,"html_url":"https://github.com/fegyi001/mangol","commit_stats":null,"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"purl":"pkg:github/fegyi001/mangol","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fegyi001%2Fmangol","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fegyi001%2Fmangol/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fegyi001%2Fmangol/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fegyi001%2Fmangol/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fegyi001","download_url":"https://codeload.github.com/fegyi001/mangol/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fegyi001%2Fmangol/sbom","scorecard":{"id":395757,"data":{"date":"2025-08-11","repo":{"name":"github.com/fegyi001/mangol","commit":"82bbf3d0353a97e2cec1295eb7e3ff0d266c648b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/17 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T18:57:43.003Z","repository_id":48199969,"created_at":"2025-08-18T18:57:43.003Z","updated_at":"2025-08-18T18:57:43.003Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28426336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T16:38:47.836Z","status":"ssl_error","status_checked_at":"2026-01-14T16:34:59.695Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","material","openlayers","typescript"],"created_at":"2024-07-31T20:00:31.346Z","updated_at":"2026-01-14T16:45:15.819Z","avatar_url":"https://github.com/fegyi001.png","language":"TypeScript","readme":"# Mangol\n\n\u003e Maps created with Angular \u0026 OpenLayers using Material design\n\n\u003cimg src=\"./src/assets/img/logo/mangol_logo.png\" width=\"200\"\u003e\n\n[![Join the chat at https://gitter.im/mangol_official/Lobby](https://badges.gitter.im/mangol_official/Lobby.svg)](https://gitter.im/mangol_official/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## About Mangol\n\nMangol is an open source web mapping library for combining [Angular](https://angular.io/), [Angular Material](https://material.angular.io/) and [OpenLayers](https://openlayers.org/) to create a modern, responsive interactive GUI for web maps (_M_ stands for _Material_, _ang_ for _Angular_ and _ol_ for _OpenLayers_). The project is written in TypeScript and uses SCSS for styling. Mangol uses [@ngrx/store](https://github.com/ngrx/platform) under the hood for state management.\n\n## Live example\n\nAn online example can be opened [here](http://188.166.116.137/mangol).\n\n## Run demo \u0026 edit source files\n\nIf you wish to see the built-in demos or modify the source files, simply run `ng serve` or `npm run start` to load the demo page on `localhost:4200`. With this command you can also watch file changes until you shut it down.\n\n## Use as npm dependency\n\nYou most likely want to use Mangol as an npm library in your Angular (TypeScript \u0026 SCSS) project. You can also do that since [Mangol is on npm](https://www.npmjs.com/package/mangol) as well.\n\nFirst, add Mangol as a dependency to your project:\n\n```batch\nnpm install --save mangol\n```\n\nor\n\n```batch\nyarn add mangol\n```\n\nYou have to add to your `app.module.ts` (or whatever you call it in your project, the one that gets bootstrapped in main.ts)\n\n```typescript\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MangolModule } from 'mangol';\n```\n\nAnd in @NgModule add MangolModule and BrowserAnimationsModule to the imports:\n\n```typescript\nimports: [\n    ...,\n    BrowserAnimationsModule,\n    MangolModule,\n    ...\n]\n```\n\nAlso add some vendor js files. If you use Webpack and created your project with @angular/cli, add the following libraries to your `angular.json`:\n\n```json\n\"scripts\": [\n    \"node_modules/proj4/dist/proj4.js\",\n    \"node_modules/jspdf/dist/jspdf.min.js\"\n]\n```\n\nAt the beginning of your main SCSS file, you should import mangol.scss like this:\n\n```scss\n@import '~mangol/scss/mangol';\n```\n\nAfter that, you can use Mangol html tags in your templates such as\n\n```html\n\u003cmangol\u003e\u003c/mangol\u003e\n```\n\n## Run on localhost\n\nAt the moment when you run `ng serve` there will be the well-known error in the browser console: `ExpressionChangedAfterItHasBeenCheckedError`. Until this is fixed in Mangol please enable production mode in `main.ts` like this:\n\n```typescript\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\n\nenableProdMode();\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .catch(err =\u003e console.log(err));\n```\n\n## Production build\n\nUnfortunately there is a known issue with OL when build using Ahead-of-time (aot). To make aot possible, you should modify `node_modules/ol/package.json` file, and set `\"sideEffects\": true`. Another option is to disable optimization in your project config (in `angular.json` and set `optimization: false`, but I don't recommend it since the bundle size will be much bigger). After either of the above solutions, `ng build --prod --aot` should work fine.\n\n## Basic example\n\nThis is the simplest implementation of Mangol in a component (this will create a default map with one OpenStreetMap layer) :\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cmangol\u003e\u003c/mangol\u003e\n  `\n})\nexport class AppComponent {}\n```\n\n## Configuring the component\n\nYou can further configure your Mangol component by creating a variable of type \u003cb\u003eMangolConfig\u003c/b\u003e and add this property as an input for yor mangol component like this:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport View from 'ol/View';\nimport { fromLonLat } from 'ol/proj.js';\nimport TileLayer from 'ol/layer/Tile';\nimport OSM from 'ol/source/OSM';\nimport { MangolConfig, MangolLayer } from 'mangol';\n\n@Component({\n  selector: 'app',\n  template: `\n     \u003cmangol [config]=\"mangolConfig\"\u003e\u003c/mangol\u003e\n  `\n})\nexport class AppComponent implements OnInit {\n  // Notice the MangolConfig type, this  is a helper interface to easily fill out the required and optional parameters for your Mangol configuration.\n  mangolConfig = {} as MangolConfig;\n\n  public ngOnInit() {\n    this.mangolConfig = {\n      map: {\n        target: 'mangol-demo',\n        view: new View({\n          projection: 'EPSG:900913',\n          center: fromLonLat(\n            [19.3956393810065, 47.168464955013],\n            'EPSG:900913'\n          ),\n          zoom: 4\n        }),\n        layers: [\n          new MangolLayer({\n            name: 'OpenStreetMap Layer',\n            details: 'Here are the OSM layer details',\n            layer: new TileLayer({\n              source: new OSM(),\n              visible: true\n            })\n          })\n        ]\n      },\n      sidebar: {\n        opened: true,\n        toolbar: {\n          layertree: {},\n          measure: {}\n        }\n      }\n    };\n  }\n}\n```\n\nMangol is highly configurable through MangolConfig. Just check the API doc for further options (currently under heavy development).\n\n## Access and modify the internal State\n\nAfter initialization you can also modify almost everything in your running Mangol app with a helper service called **MangolService**. Mangol is written in a reactive way which means almost every property is an RxJS Observable. Mangol itself uses @ngrx/store under the hood, and with the injectable MangolService you can access and modify the store state easily.\n\nFor example, if you wish to open the sidebar and change its title in runtime all you have to do is call the appropriate public functions form MangolService:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { MangolService, MangolConfig } from 'mangol';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cmangol [config]=\"mangolConfig\"\u003e\u003c/mangol\u003e\n  `\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n  config: MangolConfig;\n\n  constructor(private mangolService: MangolService) {}\n\n  ngOnInit() {\n    // Initialize the MangolConfig with an empty and closed sidebar\n    this.config = {\n      sidebar: { title: 'Mangol Sidebar', collapsible: true, opened: true }\n    };\n    // After 1.5 seconds rename the sidebar title\n    setTimeout(() =\u003e {\n      this.mangolService.setSidebarTitle('My title modified after 1.5 sec');\n    }, 1500);\n    // After 3 seconds toggle the sidebar\n    setTimeout(() =\u003e {\n      this.mangolService.toggleSidebar();\n      console.log('I just toggled the sidebar.');\n    }, 3000);\n  }\n}\n```\n\n## Styling\n\nMangol 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 \u003cb\u003ebefore\u003c/b\u003e importing mangol.scss. Do it like this:\n\n```scss\n@import '~@angular/material/theming';\n@include mat-core();\n$mangol-primary: mat-palette($mat-teal);\n$mangol-accent: mat-palette($mat-lime);\n$mangol-warn: mat-palette($mat-deep-orange);\n$mangol-theme: mat-light-theme($mangol-primary, $mangol-accent, $mangol-warn);\n\n@import '~mangol/scss/mangol';\n```\n\nIf you wish to set the component height, sidebar width or the quicksearch panel width, also do it before importing mangol.scss:\n\n```scss\n$mangol-height: 400px;\n$mangol-sidebar-width: 450px;\n$mangol-quicksearch-width: 250px;\n\n@import '~mangol/scss/mangol';\n```\n\n## Author\n\n`Mangol` was created by [Gergely Padányi-Gulyás](mailto:fegyi001@gmail.com)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffegyi001%2Fmangol","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffegyi001%2Fmangol","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffegyi001%2Fmangol/lists"}