Search code examples
openlayersopenlayers-3openlayers-6angular-openlayers

Change Text of Individual labels on map ( OpenLayers )

I want to change the text of a place on OpenLayers map, it needs to be changed from Persian Gulf to Arabian Gulf

I tried to see if there is any way I can make this change using the OpenLayers API documentation and found no luck.

https://openlayers.org/en/latest/apidoc/

Following is the map location

enter image description here

Following is code :

import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';

....


vectorSource = new VectorSource({
    // url: '/assets/data/countries.geojson',
    url: '/assets/data/countries.json',
    format: new GeoJSON()
  });
  

  mapLayer = new VectorLayer({
    source: this.vectorSource,
    declutter: true
  });

 
  markerLayer = new VectorLayer({
    source: new VectorSource({}),
    style: this.mapStyle
  });

  linesLayer = new VectorLayer({
    source: new VectorSource({}),
    style: this.lineStyle
  });
....

Is there any way to change this? I am still going through the OpenLayers API to find if there is anyway.

Solution

  • You cannot change labels on a TileLayer with the OpenLayers API, because the map image is provided as png images that OpenLayers renders as it receives them.

    If your layer were a VectorTileLayer, you'd have access to the feature attributes, and could modify their values.

    If you continue using a TileLayer with data from Mapbox, as you currently do, you could create a custom style using Mapbox Studio, where you could change labels as part of the style.