Skip to content

Commit c66fb01

Browse files
dannyleechdannyleech
authored
Feature/dataset style rules (#189)
* Dataset style rules added * Feature style rules plus panel styling * Demo updated * Style inheritence fix * Dataset methods added * Dataset docs added * Maplibre bump
1 parent 75fe722 commit c66fb01

47 files changed

Lines changed: 1930 additions & 463 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vscode/settings.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,13 @@
22
"sonarlint.connectedMode.project": {
33
"connectionId": "defra",
44
"projectKey": "DEFRA_interactive-map"
5+
},
6+
"sonarlint.rules": {
7+
"javascript:S6774": {
8+
"level": "off"
9+
},
10+
"javascript:S100": {
11+
"level": "off"
12+
}
513
}
614
}

‎demo/js/draw.js‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,19 +72,15 @@ const datasetsPlugin = createDatasetsPlugin({
7272
// showInKey: true,
7373
// toggleVisibility: true,
7474
// visibility: 'hidden',
75-
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
76-
strokeWidth: 2,
77-
// symbol: '',
78-
// symbolSvgContent: '',
79-
// symbolForegroundColor: '',
80-
// symbolBackgroundColor: '',
81-
// symbolDescription: { outdoor: 'blue outline' },
82-
// symbolOffset: [],
83-
// fill: 'rgba(0,0,255,0.1)',
84-
fillPattern: 'diagonal-cross-hatch',
85-
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
86-
fillPatternBackgroundColor: 'transparent',
87-
opacity: 0.5
75+
style: {
76+
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
77+
strokeWidth: 2,
78+
// fill: 'rgba(0,0,255,0.1)',
79+
fillPattern: 'diagonal-cross-hatch',
80+
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
81+
fillPatternBackgroundColor: 'transparent',
82+
// opacity: 0.2
83+
}
8884
}]
8985
})
9086

@@ -214,8 +210,8 @@ interactiveMap.on('map:ready', function (e) {
214210
})
215211

216212
interactiveMap.on('datasets:ready', function () {
217-
// setTimeout(() => datasetsPlugin.hideDataset('field-parcels'), 2000)
218-
// setTimeout(() => datasetsPlugin.showDataset('field-parcels'), 4000)
213+
// setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'field-parcels' }), 2000)
214+
// setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'field-parcels' }), 4000)
219215
})
220216

221217
// Ref to the selected features

‎demo/js/farming.js‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ var feature = { id: 'test1234', type: 'Feature', geometry: { coordinates: [[[-2.
2121
var interactPlugin = createInteractPlugin({
2222
dataLayers: [{
2323
layerId: 'field-parcels',
24-
idProperty: 'gid'
24+
// idProperty: 'gid'
2525
},{
2626
layerId: 'linked-parcels',
27-
idProperty: 'gid'
27+
// idProperty: 'gid'
2828
}],
2929
interactionMode: 'select', // 'auto', 'select', 'marker' // defaults to 'marker'
3030
multiSelect: true,
@@ -52,20 +52,15 @@ var datasetsPlugin = createDatasetsPlugin({
5252
maxZoom: 24,
5353
showInKey: true,
5454
toggleVisibility: true,
55-
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
56-
strokeWidth: 2,
57-
// strokeDashArray: [1, 2],
58-
// symbol: '',
59-
// symbolSvgContent: '',
60-
// symbolForegroundColor: '',
61-
// symbolBackgroundColor: '',
62-
// symbolDescription: { outdoor: 'blue outline' },
63-
// symbolOffset: [],
64-
fill: 'rgba(0,0,255,0.1)',
65-
fillPattern: 'diagonal-cross-hatch',
66-
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
67-
fillPatternBackgroundColor: 'transparent',
68-
opacity: 0.5
55+
style: {
56+
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
57+
strokeWidth: 2,
58+
fill: 'rgba(0,0,255,0.1)',
59+
fillPattern: 'diagonal-cross-hatch',
60+
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
61+
fillPatternBackgroundColor: 'transparent',
62+
opacity: 0.5
63+
}
6964
},
7065
// {
7166
// id: 'linked-parcels',

‎demo/js/index.js‎

Lines changed: 86 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,13 @@ const pointData = {type: 'FeatureCollection','features': [{'type': 'Feature','pr
3030

3131
const interactPlugin = createInteractPlugin({
3232
dataLayers: [{
33-
layerId: 'field-parcels',
33+
layerId: 'field-parcels-130',
3434
// idProperty: 'gid'
3535
},{
36-
layerId: 'linked-parcels',
36+
layerId: 'field-parcels-332',
37+
// idProperty: 'gid'
38+
},{
39+
layerId: 'field-parcels-other',
3740
// idProperty: 'gid'
3841
},{
3942
layerId: 'OS/TopographicArea_1/Agricultural Land',
@@ -98,8 +101,7 @@ const datasetsPlugin = createDatasetsPlugin({
98101
// ],
99102
// tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
100103
// sourceLayer: 'field_parcels_filtered',
101-
featureLayer: '',
102-
vectorTileLayer: '',
104+
// featureLayer: '',
103105
// idProperty: 'id', // Enables dynamic fetching + deduplication
104106
// filter: ['get', ['propertyName', 'warning']],
105107
query: {},
@@ -110,39 +112,90 @@ const datasetsPlugin = createDatasetsPlugin({
110112
showInKey: true,
111113
toggleVisibility: true,
112114
// visibility: 'hidden',
113-
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
114-
strokeWidth: 2,
115-
// symbol: '',
116-
// symbolSvgContent: '',
117-
// symbolForegroundColor: '',
118-
// symbolBackgroundColor: '',
119-
// symbolDescription: { outdoor: 'blue outline' },
120-
// symbolOffset: [],
121-
// fill: 'rgba(0,0,255,0.1)',
122-
fillPattern: 'diagonal-cross-hatch',
123-
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
124-
fillPatternBackgroundColor: 'transparent',
125-
featureStyleRules: [{
115+
// style: {
116+
// stroke: { outdoor: '#0000ff', dark: '#ffffff' },
117+
// strokeWidth: 2,
118+
// symbol: '',
119+
// symbolSvgContent: '',
120+
// symbolForegroundColor: '',
121+
// symbolBackgroundColor: '',
122+
// symbolDescription: { outdoor: 'blue outline' },
123+
// symbolOffset: [],
124+
// fill: 'rgba(0,0,255,0.1)',
125+
// fillPattern: 'diagonal-cross-hatch',
126+
// fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
127+
// fillPatternBackgroundColor: 'transparent'
128+
// },
129+
sublayers: [{
130+
id: '130',
131+
label: 'Permanent grassland',
132+
filter: ['==', ['get', 'dominant_land_cover'], '130'], // 'dominant_land_cover = "130"'
133+
toggleVisibility: true,
134+
style: {
135+
stroke: { outdoor: '#82F584', dark: '#ffffff' },
136+
fillPattern: 'diagonal-cross-hatch',
137+
fillPatternForegroundColor: { outdoor: '#82F584', dark: '#ffffff' },
138+
fillPatternBackgroundColor: 'transparent'
139+
}
140+
},{
126141
id: '332',
127142
label: 'Woodland',
128143
filter: ['==', ['get', 'dominant_land_cover'], '332'],
129-
stroke: { outdoor: '#00ff00', dark: '#ffffff' },
130-
fillPattern: 'cross-hatch',
131-
fillPatternForegroundColor: { outdoor: '#00ff00', dark: '#ffffff' },
132-
fillPatternBackgroundColor: 'transparent',
133-
toggleVisibility: true
144+
toggleVisibility: true,
145+
style: {
146+
stroke: { outdoor: '#66CA7A', dark: '#ffffff' },
147+
fillPattern: 'dot',
148+
fillPatternForegroundColor: { outdoor: '#66CA7A', dark: '#ffffff' },
149+
fillPatternBackgroundColor: 'transparent'
150+
}
134151
},{
135152
id: 'other',
136153
label: 'Others',
137-
filter: ['!=', ['get', 'dominant_land_cover'], '332'],
138-
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
154+
filter: ['!', ['in', ['get', 'dominant_land_cover'], ['literal', ['130', '332']]]],
155+
toggleVisibility: true,
156+
style: {
157+
stroke: { outdoor: ' #1d70b8', dark: '#ffffff' },
158+
fill: 'rgba(0,0,255,0.1)',
159+
fillPattern: 'vertical-hatch',
160+
fillPatternForegroundColor: { outdoor: '#1d70b8', dark: '#ffffff' },
161+
// fillPatternBackgroundColor: 'transparent'
162+
}
163+
}]
164+
},{
165+
id: 'hedge-control',
166+
label: 'Hedge control',
167+
// groupLabel: 'Test group',
168+
tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
169+
sourceLayer: 'hedge_control',
170+
minZoom: 10,
171+
maxZoom: 24,
172+
showInKey: true,
173+
toggleVisibility: true,
174+
visibility: 'hidden',
175+
keySymbolShape: 'line',
176+
style: {
177+
stroke: '#b58840',
178+
fill: 'transparent',
179+
strokeWidth: 4,
180+
symbolDescription: { outdoor: 'blue outline' }
181+
}
182+
},{
183+
id: 'linked-parcels',
184+
label: 'Existing fields',
185+
// groupLabel: 'Test group',
186+
filter: ['all',['==', ['get', 'sbi'], '106223377'],['==', ['get', 'is_dominant_land_cover'], true]],
187+
tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
188+
sourceLayer: 'field_parcels_filtered',
189+
minZoom: 10,
190+
maxZoom: 24,
191+
showInKey: true,
192+
toggleVisibility: true,
193+
style: {
194+
stroke: '#0000ff',
195+
strokeWidth: 2,
139196
fill: 'rgba(0,0,255,0.1)',
140-
// fillPattern: 'cross-hatch',
141-
// fillPatternForegroundColor: { outdoor: '#00ff00', dark: '#ffffff' },
142-
// fillPatternBackgroundColor: 'transparent',
143-
toggleVisibility: true
144-
}],
145-
opacity: 0.5
197+
symbolDescription: { outdoor: 'blue outline' }
198+
}
146199
}]
147200
})
148201

@@ -217,8 +270,9 @@ interactiveMap.on('map:ready', function (e) {
217270
})
218271

219272
interactiveMap.on('datasets:ready', function () {
220-
// setTimeout(() => datasetsPlugin.hideDataset('field-parcels'), 2000)
221-
// setTimeout(() => datasetsPlugin.showDataset('field-parcels'), 4000)
273+
// setTimeout(() => datasetsPlugin.setFeatureVisibility(false, [55], { datasetId: 'field-parcels', idProperty: null }), 2000)
274+
// setTimeout(() => datasetsPlugin.setFeatureVisibility(true, [55], { datasetId: 'field-parcels', idProperty: null }), 4000)
275+
// setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#ff0000', dark: '#ffffff' }, fillPattern: 'horizontal-hatch', fillPatternForegroundColor: { outdoor: '#ff0000', dark: '#ffffff' } }, { datasetId: 'field-parcels', sublayerId: '130' }), 2000)
222276
})
223277

224278
// Ref to the selected features

‎docs/plugins.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Location search plugin with autocomplete functionality. Include custom datasets
2828

2929
The following plugins are in early development. APIs and features may change.
3030

31-
### Datasets
31+
### [Datasets](./plugins/datasets.md)
3232

3333
Add datasets to your map, configure the display, layer toggling and render a key of symbology.
3434

0 commit comments

Comments
 (0)