openlayers css

[FallenRiteMonk]

Would it be possible to somehow import the css file of openlayers into the map component, because at the moment when using this library I have to:

• install the library (contains ol3 as dependency)
• install openlayers (to optain css)
• globally import ol css so that controls have the right style by this manner I have openlayers as duplicated dependency, plus the globally import of the css which might be confusing for somebody using this library.

Now my idea would be to somehow import the ol css file in the map component, so that its also shared with all its children, so that importing this library in a project and using it will result in the right styling of all the components without any extra imports. My problem now is that I couldn't find a way to do this until now, so I don't even know if it's even possible, but maybe you know a solution. If so, please implement or let me know how and I'll be happy to help with the implementation

[quentin-ol]

I agree that this would be a great improvement. I will give a try later this week. I keep you updated. Thanks again.

[FallenRiteMonk]

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!

[quentin-ol]

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.

[FallenRiteMonk]

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.

[medley56]

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.