I am not 100% sure about this, but, as I am using your examples in this repo (a LOT actually, thanks!), I came across this line of code inside control.component.ts:

const map: OlMap = this.mapService.getMap(this.mapidService || this.mapId);

Shouldn't it be:

const map: OlMap = this.mapService.getMap(this.mapidService.getId() || this.mapId);

?

Anyway, big thanks for sharing this repo!!!

Sorry to bother again...
hope you can help, otherwise, please feel free to ignore this message.

I am interested in adding a custom control outside my maps as you did with app-mouse-position.
My goal is to have a single control that can be used with multiple maps to (e.g.) list the number of layers wthin the clicked map somewhere. This control will be placed in a target outside the maps.

However, am I supposed to add it to use setMap() upon creation, or shall I simply define it and use it when I need it?

I see from your app-component.html that you define your app-mouse-postion twice, once with a mapId attribute and once without. May I ask you why? I would be interested in how the one without mapId could be used for my case.

<!-- Define control outside the map -->
<app-mouse-position></app-mouse-position>
<app-mouse-position mapId="map1"></app-mouse-position>

I think my main problem is that I will have to switch map in my control with setMap() every time I click on a different map, while in your example I guess the mouse coordinates can be taken from either of the two maps as they are in sync, am I correct?

Hi, I tried to add some marker points using this example but after generating a vector layer with a feature layer map doesn't display any marker or text at all maybe I missed something very crucial while doing this code.

where I am moderating the following code

in app-layer-component added
these two code in ngoninit hook
case 'marker': { layer = new l.Vector({ source: this.markerVSource }); break; }

if (this.layer == 'marker') { const features = this.mapService.olPtsLayer() const mStyle = this.mapService.markerStyle(); this.markerVSource.addFeatures(features) layer.setStyle(mStyle) layer.setVisible(this.visibility); layer.setOpacity(this.opacity); console.log(this.markerVSource.getFeatures()) }

this declaration as a property
markerVSource = new s.Vector({ features: [], attributions: 'National UFO Reporting Center', });
and the rest code is exactly the same.
also, I tried to console log the feature layer after adding it to the map which shows the layer has been added but non of the markers appears. Tried testing its icon styles is at a valid path!
can you guide me on how can I add a marker using the app-layer-component

Congratulations for this great contribution. Do you have an example storymap with angular?

Thank you.

Hi,
I have built on top of this example to add an Editbar to draw shapes into a vector layer. This has been done by adding to the control component example.

I have also added a MapdataService to handle the updating of these geographical features with an aim of sending the updated data as a GeoJSON to another part of the application for storing and later reloading. I think this is nearly there but it is unclear to me how to detect the updated shape can be signaled to the service in order to add to the observable subject which the service handles.

Basically my strategy is to call updateData() in the MapdataService with the appropriate data sending the entire vector layer each time a shape completion or deletion has taken place. What I am unclear upon is how to detect that the vector has been updated and then access its geography.

There is a stackblitz here with my code example:

https://stackblitz.com/edit/ol-ext-angular-extend?file=src%2Fapp%2Fmap%2Fmapdata.service.ts

Thanks,

Paul

Need to update example with latest angular.

Hello, and again thanks for this repo.

I would appreciate your help if you can answer.

I am having serious troubles in understanding how should I style a custom control.

I have defined my custom control like this:

sync-control.ts

import Control from 'ol/control/Control';

export class SyncControl extends Control {
    constructor() {
        const button = document.createElement('button');

        const element = document.createElement('div');
        element.className = 'sync-control';
        element.appendChild(button);

        super( { element } );
    }
}

sync-control.component.ts

import { Component, OnInit, Host } from '@angular/core';

import { MapService } from '../../map.service';
import { MapidService } from '../../mapid.service';
import { Map } from 'ol';
import { SyncControl } from './sync-control';

@Component({
  selector: 'app-sync-control',
  templateUrl: './sync-control.component.html',
  styleUrls: ['./sync-control.component.css']
})
export class SyncControlComponent implements OnInit {

  constructor(
    private mapService: MapService,
    @Host()
    private mapidService: MapidService) { }

  ngOnInit(): void {
    // Get the current map
    const map: Map = this.mapService.getMap(this.mapidService.getId());
    const control = new SyncControl();
    map.addControl(control);
  }

}

sync-control.component.css

.sync-button {
    background-color: blue;
}

app.component.html

<div class="map-wrapper">
    <div class="map-item">
        <h4>Origin</h4>
        <app-map id="origin" class="map">
            <app-sync-control></app-sync-control>
            <app-layer name="overlay"></app-layer>
        </app-map>
    </div>
</div>

I can see the control in the map, however, I cannot style it.

I also tried with inline style (i.e. <app-sync-control style="background-color: blue;">), but neither that worked.

I am trying to follow the mechanisms to use openlayer in angular, and I want to display an image in the map using imageLayer, but the layer will be set as dispaly:none unless I set the app-map to position: fixed in css. Is there any way to not use position:fixed for the map?