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?
