dlr-eoc / ukis-frontend-libraries Goto Github PK
View Code? Open in Web Editor NEWA collection of angular ui-components, services, interfaces... to help you create geospatial mapping applications for the web.
License: Apache License 2.0
A collection of angular ui-components, services, interfaces... to help you create geospatial mapping applications for the web.
License: Apache License 2.0
Main Release was not triggered after pull request.
If a pull request is closed it should normally trigger the the workflow 'Main Release'. When a Tag was pushed before the close, like described in "publish a new version" the workflow should succeed and create packages on github and npm. If the Tag was not pushed the workflow should fail, like in this example repo.
relates to #65
Allow to merge some layers in LayerGroup
so the are displayed in the UI as one.
E.g. for Baselayers which should be created of multiple layers together or a group which should display a map and text overlays as one layer.
This feature request is for
// @dlr-eoc/services-layers
new LayerGroup({
id: ...,
name: ...,
layers: [ layer1, layer2, layer3, layer4, layer5, layer6]
mergedLayers?: [ [layer1.id, layer2.id], [layer5.id, layer6.id] ]
filtertype: ...
})
// @dlr-eoc/map-ol
const layer1and2 = new olLayerGroup({
layers: [
new olTileLayer({
source: new olTileWMS({
url: 'https://geoservice.dlr.de/eoc/basemap/wms',
params: { LAYERS: 'litemap', TILED: true },
serverType: 'geoserver',
transition: 0,
}),
}),
new olTileLayer({
source: new olTileWMS({
url: 'https://geoservice.dlr.de/eoc/basemap/wms',
params: { LAYERS: 'liteoverlay', TILED: true },
serverType: 'geoserver',
transition: 0,
}),
})
]
})
CustomLayer({
...
custom_layer: layer1and2
})
...
// recreate layers
LayerGroup.layers
The Attribution Control is displayed twice if one layer forces non collapsible Attributions.
package: @dlr-eoc/map-ol
There should only be one Attribution Control.
App
Device:
The getting started section of our documentation describes how to set up a ukis project. Unfortunately, the current version of angular (13) and the current version of @clr/angular (12) are not compatible with each other
ng new proj
cd proj
ng add @clr/angular
Yields error message:
‼ Unable to find compatible package. Using 'latest' tag.
‼ Package has unmet peer dependencies. Adding the package may not succeed.
The package @clr/[email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.0" from @clr/[email protected]
npm ERR! node_modules/@clr/angular
npm ERR! @clr/angular@"12.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\lang_m13\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lang_m13\AppData\Local\npm-cache\_logs\2021-11-15T10_49_26_348Z-debug.log
× Package install failed, see above.
We should either document that we currently require angular 12, or update ukis to use the latest version of clarity (probably with webcomponents only).
App
Add any other context about the problem here.
With the current master branch, executing
npx ng generate library <library-name>
fails with the error-message:
Cannot find base TypeScript configuration file 'tsconfig.base.json'.
A little research brought up evidence that others, too, have experienced a similar issue, and - with a little luck - a way to resolve it. In short, it seems that angular's update did not separate our tsconfig.json
into a tsconfig.base.json
(which all projects inherit from) and a stub tsconfig.json
(which seems to only remain there for the sake of IDE's like VSCode).
I'll attempt to properly split our config in those two files.
From the root-directory, run
npx ng generate library <library-name> (--dry-run)
Putting it a little matter-of-fact-ly: generating libraries should work.
App
Device:
As a side note, this issue only occurs when generating libraries. I didn't encounter any errors in e.g. generating components - which makes sense, since new components don't need a new tsconfig-file.
VectorLayer
s have the property attribution
, but it is not displayed on the map.
This feature request is for @dlr-eoc/map-ol
Or if it is not fitting anywhere then a new @dlr-eoc/
In route-example-layers/route-map.component.ts
add an attribution to the layer GeoJSON Vector Layer
. It's not shown on the map.
We can add an attribution to the actions
, but that would not be visible on the map.
Allow to pass a Angular Component in the layer popup so a user can create custom content in popups.
This feature request is for @dlr-eoc/....
Allow layer.legendImg to be a Angular Component so legends can be created dynamically.
This feature request is for @dlr-eoc/....
If a CustomLayer
is used with a olLayerGroup an error is generated when addUpdateLayers is called because olLayerGroup
don't have a get source function.
package: @dlr-eoc/map-ol
In e.g. demo-maps custom-layers:
CustomLayer
with a olLayerGroup
...
new CustomLayer({
id: 'customLayerOlGroup',
name: 'cluster Layer OlGroup',
visible: false,
popup: true,
custom_layer: new olLayerGroup({
layers: [
new olTileLayer({
...
}),
new olTileLayer({
...
})
]
})
});
...
It should be possible to use a olLayerGroup
in the CustomLayer
without getting errors.
It looks like Clarity is not bringing any new Features into Clarity Angular and Only provides bug fixes for currently implemented stuff.
Our strategy with Clarity Angular is to support by addressing bugs and focus on stability...
So maybe we should also try to avoid the angular specific components end try to use Clarity Core when possible https://clarity.design/get-started/developing.
Have you considered any alternative solutions or workarounds?
So far none.
Layer Popup only working on Custom Layers where the OpenLayers Layer in not instance of
ol/layer/Vector or ol/layer/VectorTile.
see:
When you create an instance of InterpolationLayer, just like in the example shown in route-map4.component.ts
in the current master branch olMap complains that there is no renderDeclutter defined:
ERROR TypeError: this.getRenderer().renderDeclutter is not a function
renderDeclutter BaseVector.js:226
renderFrame Composite.js:135
renderFrame_ PluggableMap.js:1402
animationDelay_ PluggableMap.js:186
...
Steps to reproduce the behavior:
run mentioned above example
no error and working interpolation renderer
App
Device:
as a temporal workaround I use following after constructing the layer:
InterpolationLayer.custom_layer.renderDeclutter = () => {};
To easily see what version of ukis was used on a deployed running app we could set it like angular or clarity on the HTML at runtime.
This feature request is for @dlr-eoc/....
Or if it is not fitting anywhere then a new @dlr-eoc/
When using the new array interface popup[]
...
popup: [{
event: 'move',
options: { autoPan: false }
}]
the options object of popup
is not merged with overlayoptions
The options object of popup
should be merged with overlayoptions
.
App
We're close to issuing a ukis-version 8.0. To this occasion, maybe cleaning up some places in the code could be useful.
Last time we did that, there were just too many changes coming together at once, so here I'll try to handle things on a small-issue basis, so that things don't go out of hand.
Concretely, here is a potential chance for some cleaning up: in the method LayersService.addLayer
, to we still need the toGroup
parameter?
I don't really understand toGroup
anyway. I don't think that this method does anything when toGroup
is given!
/**
* Adds a ukis Layer to the Layerservice Store
* filtertype: TFiltertypes
* if filtertype is not provided the filtertype of the Layer is used!
*
* if toGroup is true the layer is not added to the list of Layers and storeItems. Only used internally.
*/
public addLayer(layer: Layer, filtertype?: TFiltertypes, toGroup?: boolean) {
if (!this.isInLayergroups(layer)) {
if (!filtertype) {
filtertype = layer.filtertype;
} else {
// set filtertype of Layer!!
layer.filtertype = filtertype;
}
const storeItems = this.store.getValue();
if (toGroup) {
this.filterFiltertype(filtertype); // <-- updates baselayers, layers and overlays with store's current contents.
} else {
storeItems.push(layer);
this.store.next(storeItems);
this.filterFiltertype(filtertype); // <-- updates baselayers, layers and overlays with store's current contents.
}
} else {
console.error(`layer or Group with id: ${layer.id} already exists!`);
}
}
toGroups
in the libraries and couldn't find any. Neither was it used in any ukis-project that I've ever worked on. I'm almost positive that this option is no longer used.This feature request is for @dlr-eoc/services-layers
If a custom olControl is added with the MapOlService
on ngOnInit
it gets removed by 'MapOlService' because of this.map.getControls().clear
which was added to prevent duplicates in the Controls array.
This should be done later in the MapOlComponent
so Controls added before AfterViewInit
can be saved and restored.
package: @dlr-eoc/map-ol
In e.g. demo-maps custom-layers:
ngOnInit
ngOnInit(): void {
...
this.mapSvc.map.addControl(new CustomOlControl());
}
It should add the Control on ngOnInit
and not only on AfterViewInit
.
To better handle dependencies management try to use NPM 7 workspaces with the monorepo.
// package.json
workspaces": [
"projects/*",
"scripts/*"
],
...
peerDependencies
to angular and overall used dependenciesdependencies
of the project and also other @dlr-eoc/projects
are listed here as dependenciesOnly use npm workspaces is not enough to build all the projects. Projects can also depend on other projects.
angular.json
package.json
(by using project.root
from angular.json
)ng build <project> --prod=true --watch=false
When a CustomLayer
is used, it is possible to listen on "OpenLayers" events for the layer
or the source
e.g. source.on('tileloadend', () =>)
Such an interface should also be available for UkisLayers
(RasterLayer
| VectorLayer
)
Popups are also sometimes needed for several events e.g. show something on click and something different on move.
I would propose to use one Interface for all this Events because the are all bound to the layer and then remove the Layer.popup
.
This would be a breaking change, but then there is only one interface for events which looks nearly the same for all.
export interface ILayerMapEvent {
event: 'click' | 'dblclick' | 'pointermove';
popup?: Layer['popup'];
listener?: (args?: any) => void;
}
export interface ILayerBaseEvent {
event: 'postrender' | 'prerender' | string;
listener: (args?: any) => void;
}
export interface ILayerSourceEvent {
event: '<source>loadend' | '<source>loadstart' | '<source>loaderror' | string;
listener: (args?: any) => void;
}
export interface ILayerOptions {
...
events?: {
map?: ILayerMapEvent[];
layer?: ILayerBaseEvent[];
source?: ILayerSourceEvent[];
};
...
This feature request is for @dlr-eoc/....
const eventLayer= new RasterLayer({
...
events: {
map: [
{ event: 'click',
popup: {
dynamicPopup: {
component: TablePopupComponent,
getAttributes: (args: IDynamicPopupArgs) => {
return { data: args.properties };
}
}
}
},
{ event: 'pointermove', popup: true },
// the dblclick is currently used to remove all open popups so we have to check how this is working together!
{ event: 'dblclick',
popup: {
pupupFunktion: (obj) => { ... }
}
}],
source: [{
event: 'tileloadstart', listener: (arg) => {
...
}
},
{
event: 'tileloadend', listener: (arg) => {
...
}
}]
}
...
});
// Popup only example
const vectorLayer = new VectorLayer({
...
// old implementation
popup: true,
// new implementation
events: {
map: [{ event: 'click' popup: true }]
}
...
});
Allow to pass a Angular Component in the layer settings div so a user can trigger functions and UI elements which are only for that layer.
This feature request is for @dlr-eoc/....
The LayerGroup and Layer should have an attribute to expand there 'settings' in an UI component - e.g. set propperty 'expanded' in LayerentryComponent and 'openProperties' in LayerentryGroupComponent.
This feature request is for @dlr-eoc/....
The project dlr-eoc/owc-control
does not add much useful anymore.
As discussed here, it used to be useful because it added a download-functionality in combination with saving current state as OWC-Json, but that download functionality is now also available in @dlr-eoc/utils-browser
.
As such, this project can be removed.
This feature request is for @dlr-eoc/owc-control
Right now there is no possibility to translate some of the used strings for titles and default values in our components e.g.:
in @dlr-eoc/layer-control - 'Opacity', 'Layer Setting', 'Layer Legend', 'Layer Info'...
We need a general way how to translate the components we provide in your library so it is possible to create applications with multiple languages.
Clarity Design uses something like a 'CommonStringsService' (so bindings to all labels and text)
Clarity Design Core
vmware-archive/clarity#4502 -> https://clarity.design/storybook/core/?path=/story/foundation-internationalization--page
Angular Material uses something like a 'class instance' extension
ng-bootstrap uses angular i18n
ag-grid
...object of key/value pairs via the localeText property...
Angular Ant Design
Carbon Components Angular
...internal singleton service...
Angular DevExtreme
Angular Fancy grid
init config object
Ignite UI for Angular
Angular Kendo
Angular Nebular
ng-lightning
Angular PrimeNG
Angular TrulyUI
Angular vaadin
Angular wijmo
I just red the discussion here regarding memory leaks in openlayers due to raster-sources: openlayers/openlayers#10856
The gist of it seems to be that we, the user, need to make sure that a raster-source-worker is disposed of when we no longer need a source.
Citing:
If your application is creating many new sources over time (case 1), then it is the responsibility of your application to call source.dispose() when you no longer need an old source.
I don’t think that we already do this in ukis.
Steps to reproduce the behavior:
I haven't created a reproduction yet, but wanted to document this potential problem in the form of an issue before it gets forgotten.
Theoretically, to reproduce the problem:
threads: >0
Openlayers does not seem to want to take responsibility for the webworker memory-management... so the expected behavior is for us, the application developers, to discard of webworkers when no longer required.
Popups don't appear on transparent features - not even if they have non-transparent outlines.
This feature request is for @dlr-eoc/map-ol
Steps to reproduce the behavior:
route-map4.component.ts
, edit GeoJson - VectorImageLayer ocean
by set alpha to 0 for the olFill
. Leave olStroke
untouched.Just using a very low alpha is possible, but not quite intuitive.
The property CustomLayer.custom_layer
is of type any
so it is hard to get code completion for this object.
It would be helpful if a user could set a optional type via. Generics
https://learntypescript.dev/06/l6-generic-parameter-defaults
This feature request is for @dlr-eoc/....
export interface ICustomLayerOptions<T = any> extends Omit<ILayerOptions, 'type'> {
type?: TLayertype;
custom_layer: T;
}
export class CustomLayer<T = any> extends Layer implements ICustomLayerOptions<T> {
type = CustomLayertype;
custom_layer: T = {} as T;
constructor(options: ICustomLayerOptions<T>) {
super(options as ILayerOptions);
Object.assign(this, options);
}
}
so it could be used like below
const customHeatmapLayer = new CustomLayer<olHeatmapLayer>({
id: 'heatmap_layer',
name: 'Heatmap Layer',
custom_layer: new olHeatmapLayer({
...
})
});
Min and max Resolution is only set for CustomLayer but it should be set for all other ukis-layers which create a type olBaseLayer.
Furthermore it would also be helpful if the user can set min/max Zoom for the layer as well.
package: @dlr-eoc/map-ol and @dlr-eoc/services-layers
WmtsLayer
WmtsLayer({
...
maxZoom: 8
...
});
The layer should not be displayed on zoom higher 8.
TypeError: args.dynamicPopup.getAttributes is not a function
occurs when adding a dynamic popup to a ukis-WmsLayer
layer.popup = {
dynamicPopup: {
component: WindparkPopupComponent,
// getAttributes:
}
};
ERROR TypeError: args.dynamicPopup.getAttributes is not a function
at MapOlService.createDynamicPopupComponent (dlr-eoc-map-ol.js:1443)
Should work without getAttributes
- or, less optimal, make getAttributes
required.
App
If the Popup for the Layer is configured with a object and event is set to move, sometimes the popup is not removed when the user leaves the feature/layer.
new Layer({
...
popup: {
event: 'move',
}
}
Check the VectorTileLayer
in demo-maps .
The Popup should be removed for a move event when the user leaves the feature/layer.
App
Create a documentation with css classes are useful (e.g. <clr-vertical-nav class="right">
) and how the structure of the layout is created by the core-ui schematics.
This feature request is for @dlr-eoc/....
Running the demo-maps project in ukis-frontend-libraries fails with the error-message:
error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add `node` to the types field in your tsconfig.
190 data.content.map(c => Buffer.from(c, 'base64').toString('ascii'));
Steps to reproduce the behavior:
App
Device:
The error is quickly fixed by adding "types": ["node"]
to demo-map
's tsconfig.app.json. But: we cannot expect every user of our libraries to alter their tsconfig for us. Instead it would likely make sense to use a browser- and node-compatible version of Buffer, like this one, as suggested here
There appears to be an error in our current popup-typing.
The current master throws errors when building:
ERROR in projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:95:7 - error TS2322: Type '{ asyncPupup: (obj: any, cb: (html: any) => void) => void; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ asyncPupup: (obj: any, cb: (html: any) => void) => void; }' is not assignable to type 'false'.
95 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'IRasterLayerOptions'
projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:272:7 - error TS2322: Type '{ properties: { title: string; type: string; }; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ properties: { title: string; type: string; }; }' is not assignable to type 'false'.
272 popup: { properties: { title: 'Title', type: 'Type' } }
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'IVectorLayerOptions'
projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts:359:7 - error TS2322: Type '{ pupupFunktion: (obj: IAnyObject) => string; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ pupupFunktion: (obj: IAnyObject) => string; }' is not assignable to type 'false'.
359 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'IoptionalIWmtsOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:101:7 - error TS2322: Type '{ single: true; }' is not assignable to type 'boolean
| string[] | popup'.
Type '{ single: true; }' is not assignable to type 'false'.
101 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'IVectorLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:126:7 - error TS2322: Type '{ event: "move"; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ event: "move"; }' is not assignable to type 'false'.
126 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:172:7 - error TS2322: Type '{ event: "move"; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ event: "move"; }' is not assignable to type 'false'.
172 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3m
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:201:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ filterkeys: string[]; }' is not assignable to type 'false'.
201 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:218:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ filterkeys: string[]; }' is not assignable to type 'false'.
218 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:281:7 - error TS2322: Type '{ event: "move"; filterkeys: string[]; properties: { name: string; }; options: { autoPan: false; }; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ event: "move"; filterkeys: string[]; properties: { name: string; }; options: {
autoPan: false; }; }' is not assignable to type 'false'.
281 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
projects/demo-maps/src/app/route-components/route-example-custom-layers/route-map4.component.ts:337:7 - error TS2322: Type '{ filterkeys: string[]; }' is not assignable to type 'boolean | string[] | popup'.
Type '{ filterkeys: string[]; }' is not assignable to type 'false'.
337 popup: {
~~~~~
projects/services-layers/src/lib/types/Layers.ts:120:3
120 popup?: boolean | Array<string> | popup;
~~~~~
The expected type comes from property 'popup' which is declared here on type 'ICustomLayerOptions'
Steps to reproduce the behavior:
Git pull
the latest masternpm install
and npm run start
If possible provide a link to a reproduction scenario.
The compiler should not complain.
App
Device:
A clear and concise description of the problem or missing capability...
This feature request is for @dlr-eoc/....
Or if it is not fitting anywhere then a new @dlr-eoc/
Are there any examples in other projects that demonstrate this feature or enhancement?
Have you considered any alternative solutions or workarounds?
The Package ukis-libraries-scripts
uses depcheck, to check for missing dependencies before building libraries.
The options parsers
are not correct, as noticed in this Issue depcheck/depcheck#319 (comment)
It should be
...
parsers: { // the target parsers
'**/*.ts': depcheck.parser.typescript
},
...
We have the owc-json.service.ts to parse ows context json files and create layers from them.
In the beginning we created a typings file by hand using the following resources
The we created some extensions for our need. About a month ago we got a more complete json schema from Open Geospatial Consortium. Now we should try to use existing properties in the standard and only extend the schema if there is nothing which fits our needs.
This feature request is for @dlr-eoc/....
In our current workflow, it can take quite a long time until a new version is published.
Sometimes people need Stuff which is already in the master but we don't have created a new version for it.
Our current workflow to create a new version is described in DEVELOPMENT.md
In short:
release-<version>
branch including
Node.js Package
This feature request is for @dlr-eoc/....
Semver uses something like
alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1
We could try to allow pushing tags without the pull request procedure which are in a form like vX.X.X-<identifier>
Angular e.g. uses something like
11.1.0-next.0 < 11.1.0-next.3 < 11.1.0-rc.0 < 11.1.0
Furthermore we could tag all this prereleases versions with npm --tag next
.
Maybe we can accomplish this all with
Right now all packages are only published on GitHub.
In some cases it would be good to have them on Npm as well e.g. Stackblitz Templates also Npm don't needs authentication for downloading packages.
The dynamic component provided from core-ui
is not synchronising the changes of their inputs.
So if we pass some objects as input, work with this objects in the component, then the parent is not getting notified.
Or when the component is created with initial inputs and updated later this inputs are not set.
This feature request is for @dlr-eoc/....
As a workaround it would be possible to use the Angular Dependency injection e.g. a ValueProvider to bind an object between the parent component and the dynamic component.
Calling layersSvc.updateLayer(someVectorLayer)
has no effect. The reason is that MapOlComponent.updateLayerParamsWith
has no case for VectorLayers.
A testcase has been set up in Route 3 (Events) of the demo-maps in the new branch feature-update
(https://github.com/dlr-eoc/ukis-frontend-libraries/tree/feature-update)
Upon calling updateLayer
, the given layer should be updated.
It initially seemed simple to just add another case to the method updateLayerParamsWith
, which I have done in this branch.
But remarkably, now the updated layer disappears from the map altogether. I could so far not figure out what is going wrong there. Note that calling layer.setSource
works perfectly fine in a simple ol-only-application.
App
Device:
The LayerGroup and Layer should have an optional attribute 'css-class' which can be used for custom styling in the layer-control
.
This feature request is for @dlr-eoc/....
The services-ogc implements a lot of functionality https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v7.2.0/projects/services-ogc/src/lib.
Currently only owc
, wps
and wmts
are exported.
At least the wms
service should also be exported. Otherwise the not available in the npm package!
@dlr-eoc/services-ogc
The LayerentryComponent
showsa misleading title on hover state when radio button is used with the BaseLayerControlComponent
.
Steps to reproduce the behavior:
Something like choose another layer would be better and also use other icons e.g. circle
and dot-circle
which look more like normal radio buttons.
App
This feature request is for @dlr-eoc/....
@dlr-eoc/layer-control
When using a dynamic component on the layer-control
, the Input for layer
lost its type/Instance.
Steps to reproduce the behavior:
new VectorLayer({
...
action: {
component: LayerTimeSliderComponent
}
...
});
...
...
// or other layer types e.g. CustomLayer, Layer...
if (this.layer instanceof VectorLayer) {
}
...
The layer in the component should have its original instance/type.
App
Looks like the problem was introduced due to 5fdf8f8#diff-2423eff9797ad539c788180b6491bc59b135313011967ce6b2bce186538e5063 so the instance is only a object.
...
const layerClone = Object.assign({}, layer);
...
The LayerentryGroup Component only triggers LayersService.updateLayer()
if the Layerentry Component emits a change.
package: @dlr-eoc/layer-control
In e.g. demo-maps custom-layers:
LayersService.getLayerGroups()
A visibility change of a Layer in the LayerGroup also should trigger a change for the LayerGroup if the visibility of the group changes.
App
Device:
Update the licenses for the current dependencies used in demo maps and check how to do this automatically (e.g. on a new build of all libraries).
This feature request is for @dlr-eoc/....
@dlr-eoc/layer-control
without removing them from the LayersService
.Set the Layer/Group cssClass property and then hide the item with style
::ng-deep ukis-layerentry-group.hide {
height: 0;
margin: 0;
padding: 0;
border: none;
visibility: hidden;
z-index: -1;
}
If there are too many navigation- or action-elements in the HeaderComponent or they too long then the header has a overflow.
See Clarity Issue Put overflow items in a dropdown and Clarity Top Level Navigation max items
packages:
Serve *demo-maps and set the Screen width between 768px and width of the header e.g. 1170px.
The elements should be placed in the burger menu if they are taking too much width or there should be some kind of expand possibility so the header does not overflow.
App
Device:
A temporary workaround can be to use a scrollbar witch works but dont looks nice.
$max-header-width: ...px;
@media screen and (min-width: 768px + 1) and (max-width: $max-header-width) {
.header-1 {
overflow-x: auto;
overflow-y: hidden;
height: 3.7rem;
}
}
Currently, OlLayers are created from UkisLayers in map-ol.service.ts
via the create_*_layer
methods.
At the same time, updates to OlLayers from UkisLayers happen in map-ol.component.ts
via the update*LayerParamsWith
methods.
update*LayerParamsWith
would, strictly speaking, be an API change, I couldn't find any call to those methods from outside of map-ol.component at any point. In other words: this would, in my eyes, not constitute a significant change in API.This feature request is for @dlr-eoc/map-ol
Get the native layer (e.g. ol/layer/...) from the ukis-layer in the LayersService
, so there is the possibility to work with the object reference of this layer later, so for some use cases (like to trigger a change in the layer) all functionality of the native layer can be used and has not to be integrated in the generic 'ukis-layer'.
As a workaround now we have to use a CustomLayer so we can get the custom_layer
property back to use it.
This feature request is for @dlr-eoc/....
While there is a LayerType 'wfs' in services-layers
, currently when adding a new VectorLayer
of type 'wfs', nothing is being displayed in a ol-map. The reason is that map-ol
does not currently support the conversion of UkisLayers of type 'wfs' to OlLayers.
We're currently in the process of adding support, but there are a few design decisions that I'd like to discuss.
Occasionally, we want a user to be able to specify filters with their request. The question is, then, where we should specify those filters?
Naively, one option would be to add a new field to services-layers/IVectorLayerOptions
like so:
export interface IVectorLayerOptions extends ILayerOptions {
/** data: geojson data */
data?: any;
url?: string;
subdomains?: Array<string>;
/** vector options like style, pointToLayer... depends on the map-library */
options?: {
/** ol/style/Style */
style: any;
[k: string]: any;
};
/** Only if type is 'wfs'. Allows user to only select certain properties of a WFS-feature */
cqlFilter?: string;
/** if true clusters points | or set a Object with cluster options e.g. distance ... depends on the map-library */
cluster?: boolean | IAnyObject;
type: TVectorLayertype;
}
But there may be a better place for this - I'm very happy for all feedback on this!
services-layers/ILayerOptions
already has a field dimensions
.
In our timeslider this field is used for WMS-Layers to create dots where time-values are.
The WFS protocol, contrary to WMS, does not have a TIME
parameter. Yet the case can come up where a WFS-feature has different properties that are associated with different timesteps.
Maybe we should reflect this case in the dimensions
property. For example, the interface ILayerTimeDimension
might contain a field mapping feature-properties to timestamps.
Again, I'm not biased here - this idea has pro's and con's.
CqlFilter
property discussed above.map-ol
functionality to WFS'es, not impact any existing features.This feature request is for @dlr-eoc/map-ol
Are there any examples in other projects that demonstrate this feature or enhancement?
This issue arose from the currently ongoing work in WUEKIS, but also on CoastalX, both of which use a timeslider.
Have you considered any alternative solutions or workarounds?
Yes, the obvious alternative to adding WFS support to map-ol is using CustomLayer
s.
Before, when using WFS'es in openlayers maps, we have created instances of CustomLayer
. However, CustomLayer
is designed to allow the programmer to manually create a ol-layer. That is quite specific.
In many of our projects, we read layers, including WFS'es, from configuration files (like OWC-json). We might want to use those UkisLayers in cesium or threejs-maps as well, so creating a CustomLayer here is not really a sustainable solution.
In other words, this works easily:
owc-json -> UkisVectorLayer -> any mapping library
Whereas this requires custom work for each mapping library:
owc-json -> CustomLayer<ol> -> map-ol
owc-json -> CustomLayer<three> -> map-three
owc-json -> CustomLayer<cesium> -> map-cesium
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.