This package extends openlayers map objects to allow for a configuration driven addition of layers as well as some layer management.
This currently only supports ol 6.3. This package adds support to configure map layers into "themes" via json.
https://codesandbox.io/s/ol-themes-ext-v003-example-gvgr2
import Map from 'ol/Map'
import Themes from 'ol-themes-ext'
let map = new Map({
target: 'mapRoot',
layers: [
// adding a background tiled layer
new TileLayer({
source: new TileArcGISRest({ url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer' })
// source: new OSM(), // tiles are served by OpenStreetMap
}),
],
view: new View({
center: fromLonLat([Number(-98.585522), 39.8333333]),
zoom: 2,
constrainResolution: true,
}),
});
let config = {
"layers": [
{
"key": "lyr_esri_light_gray",
"xyz": {
"maxZoom": 19,
"minZoom": 3,
"endpoints": [
{
"url": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
"bbox": null,
"zIndex": 10,
"tokenKey": null,
"layerDefs": null,
"layersToShow": null
}
]
},
"name": "Light Gray",
"legend": null,
"opacity": 1,
"identify": null
},
{
"key": "lyr_esri_streets",
"xyz": {
"maxZoom": 19,
"minZoom": 3,
"endpoints": [
{
"url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
"bbox": null,
"zIndex": 10,
"tokenKey": null,
"layerDefs": null,
"layersToShow": null
}
]
},
"name": "Streets",
"legend": null,
"opacity": 1,
"identify": null
},
{
"key": "lyr_esri_topo",
"xyz": {
"maxZoom": 19,
"minZoom": 3,
"endpoints": [
{
"url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
"bbox": null,
"zIndex": 10,
"tokenKey": null,
"layerDefs": null,
"layersToShow": null
}
]
},
"name": "Topo",
"legend": null,
"opacity": null,
"identify": null
},
{
"key": "lyr_esri_world_image",
"xyz": {
"maxZoom": 19,
"minZoom": 3,
"endpoints": [
{
"url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
"bbox": null,
"zIndex": 10,
"tokenKey": null,
"layerDefs": null,
"layersToShow": null
}
]
},
"name": "Aerial",
"legend": null,
"opacity": 1,
"identify": null
}
],
"layerGroups": [
{
"key": "grp_basemaps",
"name": null,
"layers": [
"lyr_esri_streets",
"lyr_esri_world_image",
"lyr_esri_topo",
"lyr_esri_light_gray"
],
"openness": "closed"
},
{
"key": "grp_reference",
"name": null,
"layers": [
],
"openness": "open"
}
],
"layerCategories": [
{
"key": "cat_basemaps",
"name": "Basemaps",
"hidden": false,
"infoIcon": {
"iconClass": "fa fa-info-circle fa-lg"
},
"openness": "open",
"activeIcon": {
"iconClass": "fa fa-circle"
},
"layerGroups": [
"grp_basemaps"
],
"multiphasic": false,
"transparency": 1,
"selectiveness": "monoselective",
"defaultSelection": [
"lyr_esri_world_image"
],
"usesRasterLegend": false,
"mustHaveSelection": false
}
]
}
//Extend the open layers map with the themes extension
map = new Themes(map);
//Pass in the config and get an array of categories back
let categories = map.themes.initCategories(config);
let basemaps = map.getCategoryByKey("cat_basemaps");
//Map will add the 4 above layers in a layer group, the returned value is an array of the categories from the config
//Additionally at this point the map should be displaying the esri world image layer
//Select the light grey layer
basemaps.selectLayer("lyr_esri_light_gray");
//For a MVT layer you can run this to get all the features currently rendered
let featuresInView = my_mvt_layer.getFeaturesInView();
//For a MVT layer you can tie to a click event to get the features clicked on
map.on('click', async function (evt) {
let featuresClickedOn = await my_mvt_layer.getFeaturesUnderPixel(evt.pixel);
});
//Filtering
// Suppose you have a category with a key of cat_test
// In that category you have a layer with a key of lyr_test
// The layer's features have a property named "County"
// The property contains a string representation of the county in which the feature lies
// One could filter the displayed features to a county named or containing "Iron" by doing the following
window.map.themes.getCategoryByKey("cat_test").getLayerByKey("lyr_test").filter.when("County").contains("Iron");
// If you wanted only "Iron" exactly
window.map.themes.getCategoryByKey("cat_test").getLayerByKey("lyr_test").filter.when("County").exactly("Iron");
// If you want to display any feature that was in Iron or Cache or any combination of the two
window.map.themes.getCategoryByKey("cat_test").getLayerByKey("lyr_test").filter.when("County").containsAny([ "Iron", "Cache" ]);
// If you later decide to remove the filter on the county field you can call clear on when
window.map.themes.getCategoryByKey("cat_test").getLayerByKey("lyr_test").filter.when("County").clear();
// Or If you want to remove all filters
window.map.themes.getCategoryByKey("cat_test").getLayerByKey("lyr_test").filter.clear();- 0.0.31
- (+) Added support for configurable highlight styles on vector layers
- (*) Revamped the vector styles to solve an issue related to global pollution a rewrite is close
- 0.0.30
- (*) Fixed a bug with wms and wmts when there are no token services
- 0.0.29
- (+) rewrote a portion of the library so that the returned categories have their metadata and groups and each of the groups have their metadata and layers and each of the layers have their metadata
- (*) fixed a bug where getFeaturesInView would return before all tiles were loaded
- 0.0.26
- (*) General bugfixes
- 0.0.25
- (+) Added cross fade
- (*) Fixed an issue with highlighting on statically styled vector layers
- 0.0.24
- (+) Added text options for adding labels to vector layers
- (*) Improved static styling performance a little
- 0.0.23
- (*) Changed how filters are applied so it also can be used on layers with a static styling
- (+) Added a check to the getFeaturesUnderPixel call to ensure you pass in the proper data type
- 0.0.22
- (*) Fixed an issue where if an empty set is provided to the filters it still failed to filter
- 0.0.21
- (+) Added a null check for category opacity
- (*) Inverted logic on filtering so that contains all ([]) returns true
- (*) Removed features with no property matching filter
- 0.0.20
- (*) Fixed a couple typos in the filter engine
- (+) Added a clear on the when clause of the filter engine so you can clear a single filtered field
- 0.0.19
- (*) Fixed a bug where Esri Feature Services wouldn't take the configured opacity
- 0.0.17
- Changed optional chaining property accessors to regular accessors for the time being as webpack was throwing a fit
- 0.0.16
- (+) Added initial support for filtering esri map service (export) layers
- 0.0.15
- (+) Added initial support for filtering on MVT layers
- 0.0.14
- (*) Fixed an issue with monoselection keys
- 0.0.13
- (+) Added some support for the esri feature service renderers via 0l-esri-style
- 0.0.12 (And 11 lol)
- Fixed an issue with clicking on multiple features from a MVT layer. The default ol function only returned the topmost feature.
- 0.0.10
- (+) Added support for static vector layers so you can use the same styling function for dynamic data
- Removed some logs
- 0.0.9
- (+) Added support for a pattern fill
- 0.0.8
- Bugfix for tile loading functions
- 0.0.7
- (+) Added getCategoryByKey and getCategories to the map object
- (+) Added getLayerByKey to the category object
- (+) Added metadata to the layer object
- Modified getFeaturesInView and getFeaturesUnderPixel to await the tiles to be loaded
- 0.0.6
- (+) Added getFeaturesInView to mvt layers
- (+) Added async getFeaturesUnderPixel to mvt layers
- 0.0.5
- Cleaned up code a bit
- Removed excessive logging
- Fixed a bug in the selection code