diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx index dc29e3f1a..12c531da1 100644 --- a/src/components/inputs/FontInput.jsx +++ b/src/components/inputs/FontInput.jsx @@ -32,7 +32,7 @@ class FontInput extends React.Component { /> }) - return
+ return
{inputs}
} diff --git a/src/config/tilesets.json b/src/config/tilesets.json index 49beffaf8..1096f7507 100644 --- a/src/config/tilesets.json +++ b/src/config/tilesets.json @@ -18,9 +18,9 @@ "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD", "title": "OpenMapTiles CDN" }, - "swissnames-landscape": { + "naturalearth-airports": { "type": "geojson", - "data": "http://swissnames.lukasmartinelli.ch/data/landscape.geojson", - "title": "Landscape Names GeoJSON" + "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson", + "title": "NaturalEarth Airports GeoJSON" } } diff --git a/src/libs/layerwatcher.js b/src/libs/layerwatcher.js index 0db31ec7c..1c12520b9 100644 --- a/src/libs/layerwatcher.js +++ b/src/libs/layerwatcher.js @@ -37,7 +37,7 @@ export default class LayerWatcher { const previousVectorLayers = { ...this._vectorLayers } Object.keys(this._sources).forEach(sourceId => { - this._sources[sourceId].forEach(vectorLayerId => { + (this._sources[sourceId] || []).forEach(vectorLayerId => { const knownProperties = this._vectorLayers[vectorLayerId] || {} const params = { sourceLayer: vectorLayerId } map.querySourceFeatures(sourceId, params).forEach(feature => { diff --git a/src/libs/stylegen.js b/src/libs/stylegen.js index 20c208082..f4decc535 100644 --- a/src/libs/stylegen.js +++ b/src/libs/stylegen.js @@ -27,10 +27,9 @@ function assignVectorLayerColor(layerId) { } function circleLayer(source, vectorLayer, color) { - return { + const layer = { id: `${source}_${vectorLayer}_circle`, source: source, - 'source-layer': vectorLayer, type: 'circle', paint: { 'circle-color': color, @@ -38,13 +37,16 @@ function circleLayer(source, vectorLayer, color) { }, filter: ["==", "$type", "Point"] } + if(vectorLayer) { + layer['source-layer'] = vectorLayer + } + return layer } function polygonLayer(source, vectorLayer, color, fillColor) { - return { + const layer = { id: `${source}_${vectorLayer}_polygon`, source: source, - 'source-layer': vectorLayer, type: 'fill', paint: { 'fill-color': fillColor, @@ -53,13 +55,16 @@ function polygonLayer(source, vectorLayer, color, fillColor) { }, filter: ["==", "$type", "Polygon"] } + if(vectorLayer) { + layer['source-layer'] = vectorLayer + } + return layer } function lineLayer(source, vectorLayer, color) { - return { + const layer = { id: `${source}_${vectorLayer}_line`, source: source, - 'source-layer': vectorLayer, layout: { 'line-join': 'round', 'line-cap': 'round' @@ -70,6 +75,10 @@ function lineLayer(source, vectorLayer, color) { }, filter: ["==", "$type", "LineString"] } + if(vectorLayer) { + layer['source-layer'] = vectorLayer + } + return layer } export function colorHighlightedLayer(layer) { @@ -110,6 +119,16 @@ export function generateColoredLayers(sources) { Object.keys(sources).forEach(sourceId => { const layers = sources[sourceId] + + // Deal with GeoJSON sources that do not have any source layers + if(!layers) { + const color = Color(assignVectorLayerColor(sourceId)) + circleLayers.push(circleLayer(sourceId, null, color.alpha(0.3).string())) + lineLayers.push(lineLayer(sourceId, null, color.alpha(0.3).string())) + polyLayers.push(polygonLayer(sourceId, null, color.alpha(0.2).string(), color.alpha(0.05).string())) + return + } + layers.forEach(layerId => { const color = Color(assignVectorLayerColor(layerId)) circleLayers.push(circleLayer(sourceId, layerId, color.alpha(0.3).string()))