Add states, plus who's visited where
This commit is contained in:
parent
0b88a77b15
commit
3e3eae869c
4 changed files with 223 additions and 0 deletions
90
layers/states/index.js
Normal file
90
layers/states/index.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import GeoJSON from 'ol/format/GeoJSON.js';
|
||||
import VectorLayer from 'ol/layer/Vector.js';
|
||||
import VectorSource from 'ol/source/Vector.js';
|
||||
|
||||
import highResStates from './us-states-500k.geojson?url';
|
||||
import medResStates from './us-states-5m.geojson?url';
|
||||
import lowResStates from './us-states-20m.geojson?url';
|
||||
|
||||
import { Fill, Stroke, Style, Text } from 'ol/style.js';
|
||||
|
||||
function style(feature){
|
||||
return new Style({
|
||||
text: new Text({
|
||||
text: feature.get('NAME'),
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(255,255,255,0.4)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#3399CC',
|
||||
width: 1.25,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
const layers = {
|
||||
name: "US States",
|
||||
layers: [
|
||||
{
|
||||
name: "All (high-res)",
|
||||
layer: new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: highResStates,
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: style,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "All (medium-res)",
|
||||
layer: new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: medResStates,
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: style,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "All (low-res)",
|
||||
layer: new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: lowResStates,
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: style,
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
import visitedStatesLists from './visited.js';
|
||||
|
||||
for (let [visitor, visitedStates] of Object.entries(visitedStatesLists)) {
|
||||
layers.layers.push({
|
||||
name: "Visited by " + visitor,
|
||||
layer: new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: lowResStates,
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: function(feature){
|
||||
return new Style({
|
||||
text: new Text({
|
||||
text: feature.get('NAME'),
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: visitedStates.includes(feature.get('STUSPS')) ? 'rgba(128,255,128,0.4)' : 'rgba(255,127,127,0.4)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#3399CC',
|
||||
width: 1.25,
|
||||
}),
|
||||
});
|
||||
}
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export default layers;
|
||||
Loading…
Add table
Add a link
Reference in a new issue