{"id":17269932,"url":"https://github.com/viglino/ol-ext-angular","last_synced_at":"2025-10-09T09:32:42.886Z","repository":{"id":82890875,"uuid":"166527841","full_name":"Viglino/ol-ext-angular","owner":"Viglino","description":"Using Openlayers (ol) and ol-ext with Angular 7","archived":false,"fork":false,"pushed_at":"2019-01-26T14:04:49.000Z","size":141,"stargazers_count":44,"open_issues_count":2,"forks_count":14,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-14T08:45:02.113Z","etag":null,"topics":["angular","ol-ext","openlayers"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Viglino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-19T09:09:11.000Z","updated_at":"2024-09-04T12:57:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"f3397296-e48f-4f38-a127-93cde664ad17","html_url":"https://github.com/Viglino/ol-ext-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Viglino/ol-ext-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Fol-ext-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Fol-ext-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Fol-ext-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Fol-ext-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Viglino","download_url":"https://codeload.github.com/Viglino/ol-ext-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Fol-ext-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001117,"owners_count":26083022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","ol-ext","openlayers"],"created_at":"2024-10-15T08:18:02.784Z","updated_at":"2025-10-09T09:32:42.879Z","avatar_url":"https://github.com/Viglino.png","language":"TypeScript","readme":"# \u0026nbsp;![](src/favicon.ico) ol-ext + Angular\n \nThis project is an example to use [Openlayers](https://github.com/openlayers/openlayers) and [ol-ext](https://github.com/Viglino/ol-ext) with [Angular 7](https://angular.io/).\n\n\u003e It is by no means a complete app but you should find mecanisms to handle an Openlayers map using Angular, with interactions and controls to customize for your own.\n\n## Goal\n\nThe goal of this example is to create a map as simple as that:\n````html\n\u003capp-map id=\"map\"\u003e\n  \u003c!-- Add a layers --\u003e\n  \u003capp-layer layer=\"OSM\" opacity=.5 visibility=true\u003e\u003c/app-layer\u003e\n  \u003capp-layer layer=\"watermark\" visibility=false\u003e\u003c/app-layer\u003e\n  \u003c!-- Add interactions --\u003e\n  \u003capp-interaction1\u003e\u003c/app-interaction1\u003e\n  \u003capp-interaction2\u003e\u003c/app-interaction2\u003e\n  \u003c!-- Add a controls inside the map --\u003e\n  \u003capp-control1\u003e\u003c/app-control1\u003e\n  \u003capp-control2\u003e\u003c/app-control2\u003e\n\u003c/app-map\u003e\n````\n\nAs controls can be set outside the map (using the target option) we also want to have this option too.\n````html\n\u003capp-map id=\"map\"\u003e\n  \u003c!-- Add a layers --\u003e\n  \u003capp-layer layer=\"OSM\" opacity=.5 visibility=true\u003e\u003c/app-layer\u003e\n  \u003c!-- Add a controls inside the map --\u003e\n  \u003capp-control1\u003e\u003c/app-control1\u003e\n\u003c/app-map\u003e\n\n\u003c!-- Add control outside --\u003e\n\u003capp-control2 mapId=\"map\"\u003e\u003c/app-control2\u003e\n````\n\nWe also want to create more than one map:\n````html\n\u003capp-map id=\"map\"\u003e\n  \u003c!-- Add a layers --\u003e\n  \u003capp-layer layer=\"OSM\" opacity=.5 visibility=true\u003e\u003c/app-layer\u003e\n\u003c/app-map\u003e\n\n\u003capp-map id=\"map2\"\u003e\n  \u003c!-- Add a layers --\u003e\n  \u003capp-layer layer=\"watermark\"\u003e\u003c/app-layer\u003e\n\u003c/app-map\u003e\n````\n\n## Mecanisms\n\n### MapService and MapidService\n\nThe map is implemented as a service to let you access it in other components.    \n\n#### Getting a map\nYou just have to declare the service in your constructor to access the map:\n````javascript\nconstructor(private mapService: MapService) { }\n````\nThen to retrieve the map you want, use the `getMap` method:\n````javascript\n// Default map (id=map)\nconst map = mapService.getMap();\n// another map (id=map1)\nconst map1 = mapService.getMap('map1');\n````\nThe parameter is the id of the map you want to get. If you just have one map you can use the default value (`map`).\n\n#### Getting the current map\n\nThe `MapidService` let you handle the current map's id. \nIt is used by the map component to register a new map id (`mapServe.setId()`).\nIt's not a root service and each map has its own one, thus each component defined inside a map component can access the current map id using the `getId()` method of the service.\n\nThis id is registered by the root `MapComponent` (using the `setId()`method).\n\n\n#### Customizing the map\n\nFeel free to modify the `createMap()` method of the `MapService` to handle the default map.    \nThe `MapComponent` let you define the map itself. Use the `ngOnInit()` method to customize the map (set zoom, etc.).\n\n### Creating new map components (controls, layers, interactions...)\n\nThis example comes with a set of components for each Openlayers map features: controls, interactions, layer...    \nJust copy the `.ts` file to create a new one to use in your app.\n\nYou first have to declare the services in your constructor:\n````javascript\n  constructor(\n    private mapService: MapService,\n    @Host()\n    private mapidService: MapidService\n  ) { }\n````\nThen in ngOnInit, get the current map like this:\n````javascript\n  ngOnInit() {\n    // Get the current map\n    const map: OlMap = this.mapService.getMap(this.mapidService);\n    // Add component to the map\n  }\n````\n\nTo let the control be set inside or outside the map you also need to get the target ElementRef. In this case the MapidService is optional (as it comes inside a MapComponent it is not defined when set outside a map).\nLook at the [ControlComponent](src/app/map/control/control.component.ts) for more informations.\n\n#### Example\n\nThe example defines:\n* 2 maps \n* a set of layers define using a component propertie\n* an interaction to synchonize the maps together\n* a control inside the map (Bookmark contol)\n* a control outside the map (MousePosition).\n\n\n## Build\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.\n\n### Install\n\nRun `npm install` to install node modules and start developping.\n\n### Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n### Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviglino%2Fol-ext-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviglino%2Fol-ext-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviglino%2Fol-ext-angular/lists"}