Skip to content

Feature/dataset style rules #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dannyleech merged 14 commits into from
Mar 30, 2026
Merged

Feature/dataset style rules #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
19d5275
Dataset style rules basics added
dannyleech Mar 25, 2026
efdaf3b
Sonar rule fix
dannyleech Mar 25, 2026
6c87082
Feature style rules plus panel styling
dannyleech Mar 26, 2026
4d0b6e1
Demo updated
dannyleech Mar 26, 2026
c72f720
Style inheritence fix
dannyleech Mar 26, 2026
2e48fcf
setStyle methods added
dannyleech Mar 26, 2026
9cebf0d
Lint fixes
dannyleech Mar 26, 2026
a2de966
Demo opacity amend
dannyleech Mar 26, 2026
fc3bc47
styleRules renamed to sublayers
dannyleech Mar 26, 2026
67aba35
getStyle api methods added
dannyleech Mar 26, 2026
56d92ea
Dataset docs added
dannyleech Mar 26, 2026
1b8d2dc
setOpacity and docs updated
dannyleech Mar 27, 2026
4ae4155
Datasets method signatures amend
dannyleech Mar 30, 2026
d91ca4e
Maplibre bump
dannyleech Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,13 @@
"sonarlint.connectedMode.project": {
"connectionId": "defra",
"projectKey": "DEFRA_interactive-map"
},
"sonarlint.rules": {
"javascript:S6774": {
"level": "off"
},
"javascript:S100": {
"level": "off"
}
}
}
26 changes: 11 additions & 15 deletions demo/js/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,15 @@ const datasetsPlugin = createDatasetsPlugin({
// showInKey: true,
// toggleVisibility: true,
// visibility: 'hidden',
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
strokeWidth: 2,
// symbol: '',
// symbolSvgContent: '',
// symbolForegroundColor: '',
// symbolBackgroundColor: '',
// symbolDescription: { outdoor: 'blue outline' },
// symbolOffset: [],
// fill: 'rgba(0,0,255,0.1)',
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
opacity: 0.5
style: {
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
strokeWidth: 2,
// fill: 'rgba(0,0,255,0.1)',
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
// opacity: 0.2
}
}]
})

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

interactiveMap.on('datasets:ready', function () {
// setTimeout(() => datasetsPlugin.hideDataset('field-parcels'), 2000)
// setTimeout(() => datasetsPlugin.showDataset('field-parcels'), 4000)
// setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'field-parcels' }), 2000)
// setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'field-parcels' }), 4000)
})

// Ref to the selected features
Expand Down
27 changes: 11 additions & 16 deletions demo/js/farming.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ var feature = { id: 'test1234', type: 'Feature', geometry: { coordinates: [[[-2.
var interactPlugin = createInteractPlugin({
dataLayers: [{
layerId: 'field-parcels',
idProperty: 'gid'
// idProperty: 'gid'
},{
layerId: 'linked-parcels',
idProperty: 'gid'
// idProperty: 'gid'
}],
interactionMode: 'select', // 'auto', 'select', 'marker' // defaults to 'marker'
multiSelect: true,
Expand Down Expand Up @@ -52,20 +52,15 @@ var datasetsPlugin = createDatasetsPlugin({
maxZoom: 24,
showInKey: true,
toggleVisibility: true,
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
strokeWidth: 2,
// strokeDashArray: [1, 2],
// symbol: '',
// symbolSvgContent: '',
// symbolForegroundColor: '',
// symbolBackgroundColor: '',
// symbolDescription: { outdoor: 'blue outline' },
// symbolOffset: [],
fill: 'rgba(0,0,255,0.1)',
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
opacity: 0.5
style: {
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
strokeWidth: 2,
fill: 'rgba(0,0,255,0.1)',
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
opacity: 0.5
}
},
// {
// id: 'linked-parcels',
Expand Down
118 changes: 86 additions & 32 deletions demo/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,13 @@ const pointData = {type: 'FeatureCollection','features': [{'type': 'Feature','pr

const interactPlugin = createInteractPlugin({
dataLayers: [{
layerId: 'field-parcels',
layerId: 'field-parcels-130',
// idProperty: 'gid'
},{
layerId: 'linked-parcels',
layerId: 'field-parcels-332',
// idProperty: 'gid'
},{
layerId: 'field-parcels-other',
// idProperty: 'gid'
},{
layerId: 'OS/TopographicArea_1/Agricultural Land',
Expand Down Expand Up @@ -98,8 +101,7 @@ const datasetsPlugin = createDatasetsPlugin({
// ],
// tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
// sourceLayer: 'field_parcels_filtered',
featureLayer: '',
vectorTileLayer: '',
// featureLayer: '',
// idProperty: 'id', // Enables dynamic fetching + deduplication
// filter: ['get', ['propertyName', 'warning']],
query: {},
Expand All @@ -110,39 +112,90 @@ const datasetsPlugin = createDatasetsPlugin({
showInKey: true,
toggleVisibility: true,
// visibility: 'hidden',
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
strokeWidth: 2,
// symbol: '',
// symbolSvgContent: '',
// symbolForegroundColor: '',
// symbolBackgroundColor: '',
// symbolDescription: { outdoor: 'blue outline' },
// symbolOffset: [],
// fill: 'rgba(0,0,255,0.1)',
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
featureStyleRules: [{
// style: {
// stroke: { outdoor: '#0000ff', dark: '#ffffff' },
// strokeWidth: 2,
// symbol: '',
// symbolSvgContent: '',
// symbolForegroundColor: '',
// symbolBackgroundColor: '',
// symbolDescription: { outdoor: 'blue outline' },
// symbolOffset: [],
// fill: 'rgba(0,0,255,0.1)',
// fillPattern: 'diagonal-cross-hatch',
// fillPatternForegroundColor: { outdoor: '#0000ff', dark: '#ffffff' },
// fillPatternBackgroundColor: 'transparent'
// },
sublayers: [{
id: '130',
label: 'Permanent grassland',
filter: ['==', ['get', 'dominant_land_cover'], '130'], // 'dominant_land_cover = "130"'
toggleVisibility: true,
style: {
stroke: { outdoor: '#82F584', dark: '#ffffff' },
fillPattern: 'diagonal-cross-hatch',
fillPatternForegroundColor: { outdoor: '#82F584', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent'
}
},{
id: '332',
label: 'Woodland',
filter: ['==', ['get', 'dominant_land_cover'], '332'],
stroke: { outdoor: '#00ff00', dark: '#ffffff' },
fillPattern: 'cross-hatch',
fillPatternForegroundColor: { outdoor: '#00ff00', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent',
toggleVisibility: true
toggleVisibility: true,
style: {
stroke: { outdoor: '#66CA7A', dark: '#ffffff' },
fillPattern: 'dot',
fillPatternForegroundColor: { outdoor: '#66CA7A', dark: '#ffffff' },
fillPatternBackgroundColor: 'transparent'
}
},{
id: 'other',
label: 'Others',
filter: ['!=', ['get', 'dominant_land_cover'], '332'],
stroke: { outdoor: '#0000ff', dark: '#ffffff' },
filter: ['!', ['in', ['get', 'dominant_land_cover'], ['literal', ['130', '332']]]],
toggleVisibility: true,
style: {
stroke: { outdoor: ' #1d70b8', dark: '#ffffff' },
fill: 'rgba(0,0,255,0.1)',
fillPattern: 'vertical-hatch',
fillPatternForegroundColor: { outdoor: '#1d70b8', dark: '#ffffff' },
// fillPatternBackgroundColor: 'transparent'
}
}]
},{
id: 'hedge-control',
label: 'Hedge control',
// groupLabel: 'Test group',
tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
sourceLayer: 'hedge_control',
minZoom: 10,
maxZoom: 24,
showInKey: true,
toggleVisibility: true,
visibility: 'hidden',
keySymbolShape: 'line',
style: {
stroke: '#b58840',
fill: 'transparent',
strokeWidth: 4,
symbolDescription: { outdoor: 'blue outline' }
}
},{
id: 'linked-parcels',
label: 'Existing fields',
// groupLabel: 'Test group',
filter: ['all',['==', ['get', 'sbi'], '106223377'],['==', ['get', 'is_dominant_land_cover'], true]],
tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
sourceLayer: 'field_parcels_filtered',
minZoom: 10,
maxZoom: 24,
showInKey: true,
toggleVisibility: true,
style: {
stroke: '#0000ff',
strokeWidth: 2,
fill: 'rgba(0,0,255,0.1)',
// fillPattern: 'cross-hatch',
// fillPatternForegroundColor: { outdoor: '#00ff00', dark: '#ffffff' },
// fillPatternBackgroundColor: 'transparent',
toggleVisibility: true
}],
opacity: 0.5
symbolDescription: { outdoor: 'blue outline' }
}
}]
})

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

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

// Ref to the selected features
Expand Down
2 changes: 1 addition & 1 deletion docs/plugins.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Location search plugin with autocomplete functionality. Include custom datasets

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

### Datasets
### [Datasets](./plugins/datasets.md)

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

Expand Down
Loading
Loading