OpenLayers map in Angular

[spice stump]

Hello there,im was wondering if i could change the way my map looks. What im trying to achieve is a map similar to Airbnb

Below i will attach a picture of Airbnb and what I've achieve so far.

Im facing the current issues:
1-The pointers which contains the price are blurry and dont look as clean as the Airbnb ones
2-I would like that the map view is similar to the Google one.So far i have an API key for the google map but dont know how to make it work
3-The popover which contains the details of the pointer is not scaled as the Airbnb one and when i zoom to a certain position it appears on top. I want it to be at the bottom all the time and scaled correctly

Any idea, suggestions, articles are welcomed.If anyone interested i will provide the code snippet tomorrow, cause i dont have a laptop on me right now.

[fringe haven]

Hi,

1. OpenLayers provides rich styling for labels, including a font property. The default is 10px san-serif, which is probably too small for your purposes and making the labels look a bit blurry. Check out the OL label examples: https://openlayers.org/en/latest/examples/?q=label
2. Unfortunately, it's against Google's terms of service to use Google maps with OpenLayers (or any other mapping library other than Google). However, you can used Bing maps with a free api key. The RoadOnDemand layer is quite similar. Select Road in this example: https://openlayers.org/en/latest/examples/bing-maps.html
3. Instead of using a popover, consider using an angular component that you can position yourself. When a user selects a feature, call a service method from your map code that will notify the component to display that feature's attributes in a nicely formatted way.

[spice stump]

Alright, I'll check the links out and try my best. Do you happen to have any links that simplify the OpenLayers map? Since it has a lot of volume and complex terms(at least for me) and im tasked to finish it for a week.

And thank you so much for taking your time and replying to me

[fringe haven]

It's difficult to advise without seeing the code you have. But you should see use of a Style object for the labels, there you can add/edit the Text and font Property. It will look like this:
myStyle = new Style({ .... text: new Text({ font: ...
Bing is very easy to use (see example above). Looks like you are using OpenStreetMap right now?
The popup is probably an OpenLayers Overlay and might be triggered by map.on('click' ....) but there is also a Select interaction that is more sophisticated. If you are using Angular, presumably you have a map component with the OpenLayers code in it? If so, you could inject a service into that that takes the attributes of a clicked feature and your info component could subscribe to that and display the feature info.
Sorry to be a bit vague!

[spice stump]

Ill pass the code as soon as im back on my desk but so far you are correct

[spice stump]

This is the code so far

TS

HTML

<div id="map" class="map" #mapElement></div>
<div id="popup" class="popup" #popupElement></div>
<div id="info" #infoElement></div>

I gotta agree that its a mess. I just gave up at the time and gave chatgpt a try...

[fringe haven]

Hi. I've had a look at your code. It is a bit messy but I'm sure you will refactor it when you have it working the way you want.

1. The reason why your createRoundedRectangle function is rendering a small font is because when you change the canvas size, the font is reset. First, you need to set the font to get the right width using measureText (which you do) but then you need to set it again after adjusting canvas width and height.
2. To use Bing Maps replace the layers property of your new OlMap with:

layers: [
        new TileLayer({
          source: new BingMaps({
            key: 'Your api key here',
            imagerySet: 'RoadOnDemand',
            placeholderTiles: false
          })
        }),

You can get a free api key from: https://www.bingmapsportal.com/
3. If you are sure you don't want to use a popover but have the feature info in a fixed position, then I would extract all that markup into a component with an input to render the details of the feature.
Something like this:

<div class="map-container">
    <div class="map" id="map"></div>
    <app-info *ngIf="mapInfo" [mapInfo]="mapInfo"></app-info>
</div>

and then your map click would be like this:

  private setupInfoClick() {
    this.map!.on('click', (event) => {
      const feature = this.map!.forEachFeatureAtPixel(event.pixel, function (feature) {
        return feature;
      });
      if (feature) {
        const mapInfo: MapInfo = {
          name: feature.get('name')
        };
        this.mapInfo = mapInfo;
      } else {
        this.mapInfo = null;
      }
    });
  }

Here we have a mapInfo property on the map component (of type MapInfo - a model you create) and you populate it with the attributes of the features you want to show. Or null it out if there are no features.

You can use absolute positioning on your mapinfo component so that it renders in a fixed postion over the map.
Something like this in your css:

:host {
    display: block;
    position: absolute;
    bottom: 2rem;
    width: 20rem;
    height: 5rem;
    left: 0;
    right: 0;
    background-color: white;
    margin-inline: auto;
}

Here's an idea of what you can do:

As you refactor. Try to replace all the anys with types where you can and remove redundant viewchilds etc.

Hope that helps a little bit.

[spice stump]

im not understanding how you managed to get the points(which contains numbers like 3000,56,200) so perfectly

[fringe haven]

There is a bit of a bug in createRoundedRectangle concerning the font. I've updated it and set font weight, size and face as separate parameters and called it accordingly.
Also, markers, like buttons, look better with more horizontal padding than vertical padding so I've tweaked that a bit too.
Unfortuntely, I can't paste the code here (discord telling me I have to upgrade to Nitro).
So here's a stackblitz
https://stackblitz.com/edit/stackblitz-starters-jkou4w?file=src%2Fmap%2Fmap.component.ts
It will take a while to run because it has to import the openlayers dependencies.

[spice stump]

I made it work so far,the only thing i havent added yet is the app-info component

[fringe haven]

Good. It's up to you whether you do that or just stick with your popup. There are lots of options with info clicks. Post a screen shot when you have finished and made it beautiful!

[spice stump]

Thank you so much bro. I owe you one