0

I am trying to replicate https://openlayers.org/en/latest/examples/street-labels.html?q=label plotting highways over California, both from GeoJSON. The Vienna labels show, but my CA highway labels don't.

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import BingMaps from 'ol/source/BingMaps.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Style, Text, Stroke} from 'ol/style.js';
import {fromLonLat, toLonLat} from 'ol/proj.js';

  var style = new Style({
    text: new Text({
      font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
      placement: 'line',
      fill: new Fill({
        color: 'white'
      })
    })
  });

  var map = new Map({
    layers: [           
       new VectorLayer({
            source: new VectorSource({
                format: new GeoJSON(),
                url: '/vienna-streets.geojson'
            }),
            style: new Style({
                stroke: new Stroke({
                    color: "#CC0000",
                    width: 2
                })
            })
        }),
        new VectorLayer({
          declutter: true,
          source: new VectorSource({
            format: new GeoJSON(),
            url: '/vienna-streets.geojson'
          }),
          style: function(feature) {
            style.getText().setText(feature.get('name'));
            return style;
          }
        }),
        new VectorLayer({
            source: new VectorSource({
                format: new GeoJSON(),
                url: '/hwy.geojson'
            }),
            style: new Style({
                stroke: new Stroke({
                    color: "#CC0000",
                    width: 2
                })
            })
        }),
        new VectorLayer({
          declutter: true,
          source: new VectorSource({
            format: new GeoJSON(),
            url: '/hwy.geojson'
          }),
          style: function(feature) {
            style.getText().setText(feature.get('ROUTE'));
            return style;
          }
        })
     ],
     target: 'map',
      view: new View({
      zoom: 17,
    })
  });

  function CenterMap(long, lat) {
    var view = map.getView();
    var center = fromLonLat([long, lat]);
    view.setCenter(center);
    view.setZoom(9);
  }

  CenterMap(-122.27,37.75);

Both Vienna and Highway line features plot as symbols, and the two .geojson files look very similar to me: here's a sample feature from vienna-streets.geojson:

{
  "type": "Feature",
  "id": "5022444",
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [
        16.4101713,
        48.2228049
      ],
      [
        16.4103365,
        48.2226838
      ],
      [
        16.410552,
        48.2225259
      ],
      [
        16.4107283,
        48.2224079
      ],
      [
        16.4110769,
        48.2221802
      ],
      [
        16.4115313,
        48.2218545
      ],
      [
        16.4118242,
        48.2216454
      ],
      [
        16.4121066,
        48.2214454
      ],
      [
        16.4128993,
        48.2208393
      ],
      [
        16.413,
        48.2208463
      ],
      [
        16.4131035,
        48.2208236
      ],
      [
        16.4143181,
        48.2199157
      ],
      [
        16.4143435,
        48.2198564
      ],
      [
        16.4143063,
        48.2197964
      ]
    ]
  },
  "properties": {
    "foot": "yes",
    "highway": "cycleway",
    "name": "Praterl\u00e4nde",
    "segregated": "no",
    "surface": "paved"
  }
}

And here's one from hwy.geojson:

{
  "type": "Feature",
  "properties": {
    "ID": 322,
    "DISTRICT": 3,
    "COUNTY": "YOL",
    "ROUTE": 113,
    "ROUTE_SUFF": null,
    "RTE_GEOMID": "113_20150512_R",
    "BEGPM_PREF": "R",
    "BEGPM": 0,
    "BEG_ALIGN": null,
    "ENDPM_PREF": null,
    "ENDPM": 11.646,
    "END_ALIGN": null,
    "BEG_ODO": 22.26,
    "END_ODO": 33.752,
    "FROM_": "SOL CO LN",
    "TO": ".04M N\/CHURCHILL DOWNS AVE",
    "TYPE": "MAP 21 PRINCIPAL ARTERIAL",
    "NOTE": null
  },
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [
        -121.765123584,
        38.694502981
      ],
      [
        -121.76512738339,
        38.694996918146
      ],
      [
        -121.76512753567,
        38.694998151658
      ],
      [
        -121.76519958233,
        38.695119493342
      ],
      [
        -121.76519974943,
        38.69512242402
      ],
      [
        -121.76521091857,
        38.69646055998
      ],
      [
        -121.76521094059,
        38.696463500298
      ],
      [
        -121.76521073741,
        38.696589642702
      ],
      [
        -121.76521073301,
        38.69659238132
      ],
      [
        -121.76520874399,
        38.69783007068
      ],
      [
        -121.76520873684,
        38.69783452274
      ],
      [
        -121.76520716216,
        38.69881395926
      ],
      [
        -121.76520715868,
        38.698816124148
      ],
      [
        -121.76520700032,
        38.698914801852
      ],
      [
        -121.76520703242,
        38.698916181099
      ],
      [
        -121.76522321172,
        38.699505549463
      ]
    ]
  }
}

Why does one datasource yield labels but the other does not?

0

The difference between the two datasets is that the "name" attribute in the Vienna data is a string, whereas the "ROUTE" values are numbers.

Change

style.getText().setText(feature.get('ROUTE'));

to

style.getText().setText(feature.get('ROUTE').toString());

to convert the route numbers to strings before labeling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.