Comments (5)
I agree that this would be a great improvement.
I will give a try later this week. I keep you updated.
Thanks again.
from ngx-openlayers.
I just had an idea, which could solve this as a temporary workaround. It should be possible to just copy the ol css file to a folder in src (by a node script as part of the prepublish command) and include it into the map component by using styleUrls
insted of styles
. You would also have to put your custom css into its own file and also import it.
The only thing I don't know is if child component can then access the css of the map component. If not the script for copying of the ol css would have to be extended to not just copy, but to also split it into single files for each component.
Just let me know what you think and I can help with the scripts if you want!
from ngx-openlayers.
I've looked into this and couldn't come up with a satisfactory solution yet.
Basically, the issue comes down to CSS encapsulation in angular2. There are 3 ways to feed (leak?) CSS to child components:
- piercing CSS combinators
>>>
or/deep/
which, I believe, requires a rewrite of the CSS provided by OpenLayers. - using the
none
encapsulation in all our components, i.e.
encapsulation: ViewEncapsulation.None
in the@Compoment
decorator, and provide a styleUrl pointing the/node_modules/openlayers/dist/ol.css
. I couldn't make this one work. - declaring the css in
index.html
header which prevents angular2 from rewriting (renaming) css selectors. This last option, albeit impractical is the only one that I could manage...
A few sources if that's something you'd like to dig:
- http://stackoverflow.com/questions/34542143/load-external-css-style-into-angular-2-component
- http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Any ideas ?
PS: @FallenRiteMonk , I tried to feed the css using styleUrls to no avail. As you've guessed, making the CSS rules available to child components is the problem here.
from ngx-openlayers.
According to what what I read in the links you mentioned I would say:
- using CSS combinators is for sure not the right solution, because as you mentioned it requires a rewrite of the css and that then would have to be done manually or by some kind of build script, which would be extra work on every ol update and one could then also put the corresponding styles into the components directly without having to bleed them trough.
- encapsulation none seems to be the most suitable for the moment I think and as far as I understood it, only the main map-component would have to have it set, but I'll give it a try. Further more though I think its still not the best solution because then styles could also be easily overwritten by a different library one uses together with this one in a project.
- That is what I'm doing at the moment in my test project where I use this library, but that is still something the user of the library would have to do. I think this could be a solution, but then the ol-css should at least be exported with this library so that one doesn't have to add the ol dependency only for the styling, or the ol dependency should not be exported with this library at all so that one has to implement also the js past of ol.
To your PS statement: how much of overweight would it be to this project if every component would be feed with the ol styling by styleUrls, meaning not only the map which would then have to bleed it to all the child components, but really every child by it self? This should be inspected because I saw that the ol.css file is only 4.2k of size.
As temporary solution we copy paste the styles manually to all the components which are implemented as I mentioned in the first point, but those would then have to be maintained manually on every ol update.
from ngx-openlayers.
I believe the easiest solution here is to simply add a line to the installation instructions to add "node_modules/openlayers/css/ol.css"
to styles: []
in angular.json
. It works flawlessly for me anyway.
from ngx-openlayers.
Related Issues (20)
- ⚠️ Migration OL5 and next release steps ⚠️ HOT 2
- Warnings in console about OL objects
- next version with OL5 and definitely typed has compile errors
- Ngx-openlayers is extremely slow HOT 1
- Point with altitude with ol-cesium
- cluster preformance HOT 1
- How to show current geolocation HOT 1
- Vulnerabilities reported by npm audit HOT 1
- Angular 9 >> ERROR in Symbol MapComponent declared in...is not exported from..../ngx-openlayers/dist/index.js HOT 8
- Mouse issue on next build HOT 6
- How to access the OpenLayers API? HOT 3
- Custom openlayers loader function HOT 2
- not work in Angular 9 HOT 2
- feat: Angular 10 Support HOT 4
- How to capture a mouse over event on a <aol-feature> with OpenLayer HOT 3
- <aol-overlay> can't getPosition HOT 3
- Why did you stop supporting? HOT 2
- The map is not showing inside a modal HOT 1
- Update HOT 1
- Update to Angular 16 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-openlayers.