eox-a / eoxelements Goto Github PK

also at initial load with comparison, layers from the same source don't need to load the capabilities twice

example: https://eox.at/software-products/

When e.g. the current selected date is changed in the app somewhere, the chart should be able to react and also show the current selected date as highlighted

We need some way to dynamically update the vector layer features if a property in the app changes - right now the styling gets only applied on map mounted. One option would be to destroy the layer and recreate the layer, but there might be better options - not sure if the functionality from here is already available in the vuelayers version we're using...

add to plotConfig:

• dynamic parsed fields (e.g. mean, max, min, stDev, median) --> currently hardcoded
• for each field make configurable: color, fill, etc. --> currently hardcoded
• basicStats is also hardcoded

Use the EOX Vue ESLint config for all packages, and consider moving the eslint config to a central location instead of inside each package.

There are some examples on how to add a custom projection using proj4, but it looks like the projection needs to be added before the Vue app is created in order for it to work.

E.g.: https://jsfiddle.net/ghettovoice/6rqm02zx/

Not sure how to implement this...

Probably it is enough to make the xAxes configurable the same way as the yAxes are (via prop object).
Then, in th xAxes config, one could use e.g.

time = {
            min: "2020-02-01",
            max: "2020-08-01",
          }

Add a feature to compare maps. To sync two or OL maps it is enough to share their views.

Maybe it could be handled with slots, e.g. slot name="compare-a-b" or slot name=compare-side-by-side. As soon as a map is detected in these slots, it shares the view from the main map.

Another option could be to provide an attribute to link a map with another one, e.g. sync="eox-map#left". This would work for maps that are side by side, but would be harder for A/B compare, as the user would have to provide his/her own A/B slider tool.

Possible comparison modes:

• A/B(/C) compare with slider(s)
• left/right(+) compare maps next to each other (share hover position?)
• overlap compare with opacity?

When the DOM updates, the map sometimes moves back to the original center position - this can be experienced when changing or updating vector layers - see e.g. https://eox-a.github.io/elements/examples/map-source-select.html#source-select-with-vector-layer (move the map, change layer -> map re-centers)

When currently hovering over a vector feature and leaving the map (with the mouse), the tooltip stays in place.

Would probably be better if it hides on leaving the map.

Thought it would be useful to use these two for our versioning since this library is used by multiple other projects of ours and we would not want to accidentally break anything by incorrectly bumping the version.

https://semver.org/

https://www.conventionalcommits.org/en/v1.0.0/

We have different tile urls (the cached https://s2maps-tiles.eu and the one with more levels https://tiles.maps.eox.at), maybe we should provide a way to choose which one should be used.

Also, is there a way to automatically get the config from http://tiles.maps.eox.at/wmts/1.0.0/WMTSCapabilities.xml?

Right now, default map height is 400px which makes not much sense. Consider using 100% to fill parent.

We should not allow the user to zoom in or out past a certain point.

Especially for the xAxis showing times, there should be an option to pass a language or a way to replace strings.

Outcome should be that the times in the xAxis should be displayable in english, german, etc.

https://eox-a.github.io/elements/examples/map-basic.html#map-created-from-mapbox-style-document

https://eox-a.github.io/style_declarations.json [HTTP/2 404 Not Found 53ms]

Currently, the abstract is taken as attribution for WMTS from capabilities: https://github.com/EOX-A/elements/blob/main/packages/map-basic/src/WMTSCapabilitesProvider.vue#L60

Either provide a way to customize this, or take an other field completely.

• "hard" code a POI option and pass a png via prop?
• provide a slot on map-basic to pass a POI element somehow?
• implement a whole custom layer with the POI as a point?

We are setting the tile URL function with setTileUrlFunction, but this somehow is stacked up and when logging inside the function the first time it is called 2 times, then 4 times, then 6 times, etc.

It still works, but will probably cause some memory problems if not handled.

right now, only the width adapts to the parent container, would be nice if the height does the same.

maybe set some aspect ratio limits if the ratio gets too extreme (optional)

• make the pdb endpoint static, instead of referencing a tileserv instance
• current endpoints change too often
• save a few pbfs for a certain zooms [11-15] somewhere

WMTSCapabilitesProvider currently defines a specific set of properties.

Consider passing all standard source properties e.g. attributions (make sure it is compatible with attributionProperty).

With migration to Openlayers 6 + Vuelayers 0.12.x allowing non-integer zoom levels, our zooming stopped working properly (zooming happens in very low increments). I have so far been able to investigate following: Concerned component is https://openlayers.org/en/latest/apidoc/module-ol_interaction_MouseWheelZoom-MouseWheelZoom.html

When passing non-default useAnchor parameter as false and constraining zoom levels via constrainResolution - either on view or on MouseWheelZoom control (which yield nicer looking and crisp vector tiles anyway), it works fine and is merged now to main. The problem is that anchor of zooming is set to center of page, which is a relict of past and does not bring a nice user experience.

The improvement would be to investigate and solve why the zooming does not work properly without useAnchor=false

Currently, an array of layers is passed to the map-basic component. This requires some settings, like "type", styling for vector layers etc.
Maybe there is a better way to define the layers, especially layer groups.

• did the projection for the map config moved?
• in the lower version it was at: https://github.com/EOX-A/elements/blob/%40eox/map-source-select%400.0.6/packages/map-basic/src/MapBasic.vue#L107
• would be nice to have it, assuming that we would like to use smoothing else than mercator

Currently there are default values for each dataset label (e.g. https://github.com/EOX-A/elements/blob/main/packages/charts/src/Charts.vue#L148), but this should only be a fallback, and the user should be able to pass a different string instead.

• XYZ TileSource could be handy for custom tilesets https://openlayers.org/en/latest/examples/xyz.html
• LayerSwitcher

Please add more in comments if needed

Extend the current visualization capabilities.
One of the next goals is to display something like this:

(NDVI/backscatter/coherence)

With the new openlayers version (see also #32), the tooltip behaviour has changed: the hover is somehow now firing mulltiple times, also inside of the same vector feature. Each time the tooltip is rendered and destroyed again, resulting in an unpleasant re-opening when moving the mouse.

Since it looks for a div with a class/id, if multiple maps are rendered, all mouse positions are displayed within the first map.

So it would be great to be able to let a mapbox style document render vector layers initially, but still with the option to override single vector features (highlight/hide certain features or change color).

Since the OL update, there are multiple console warnings and errors referencing "overlays":

[Vue warn]: Error in getter for watcher "overlays": "Error: Illegal overlay argument"

Maybe something has changed here: https://github.com/ghettovoice/vuelayers/blob/master/src/components/map/map.vue#L342

Currently, the map-basic EOxElement (and the other map-related elements) are relying on VueLayers. Since we often use new OpenLayers features that are not yet implemented in VueLayers, and we also need to access directly the OpenLayers API, it might be better to directly use OpenLayers with a thin layer on top.
This layer should:

• parse a JSON and configure the map automatically
• automatically register missing projections
• automatically fetch WMTS capabilities

List to be continued.

Right now, each prop has to be implemented separatly (see e.g. wrapX prop), it would be nice to allow all vuelayers props by default.
There has to be some distinction between the map and the view though.

The zoom sensitivity is too high

Right now, if creating a vector layer in an OverviewMap, no style is passed.

Ideally, it should reuse the VectorStyle logic.

Inside of charts, the tooltip now stays inside of boundaries and switches side when going too far right (thanks to #31). A similiar behaviour should be implemented when used on the map aswell.

It would make syncing attributes and slot handling easier.

Generating the docs currently takes a lot of manual work.
Especially setting up the example *.vue files and copying their code to the markdown file.

Investigate ways to maybe automatically show the example code in the page, without having to manually copy the example!

Also, structuring of doc folders might become more necessary to keep a better overview over the components - maybe a grouping by element would be best.

When hovering over the points of a line chart, the tooltip is sometimes at the center line, sometimes somewhere else - would probably be best to always keep it at mouse position?