eox-a / eoxelements Goto Github PK
View Code? Open in Web Editor NEWA Web Component collection of geospatial UI elements, crafted by EOX.
Home Page: https://eox-a.github.io/EOxElements/
License: MIT License
A Web Component collection of geospatial UI elements, crafted by EOX.
Home Page: https://eox-a.github.io/EOxElements/
License: MIT License
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...
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:
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.
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]
WARNING Compiled with 1 warning 8:01:13 AM
warning in ./node_modules/@eox/chart/dist/interface.mjs
Critical dependency: Accessing import.meta directly is unsupported (only property access is supported)
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.
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)
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.
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.
Please add more in comments if needed
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:
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?
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.