PolymerVis / mapbox-gl

Polymer 2.0 custom element for mapbox-gl-js. Uses WebGL to render interactive maps from vector tiles and Mapbox styles - compatible with deck-gl.
https://www.webcomponents.org/element/PolymerVis/mapbox-gl
26 stars 8 forks source link

Mapbox control styles not applying #13

Closed loppear closed 6 years ago

loppear commented 6 years ago

I'm sure this is something simple on my part, but attempting to use the demo as a start I'm stumped by some interaction with the shadowdom that's not applying the mapbox css appropriately (obviously, mapbox-control-container / mapbox-ctrl*, but presumably all from mapbox-gl.css):

mapbox-styles
    <link rel="import" href="bower_components/shadycss/apply-shim.html">
    <link rel="import" href="bower_components/mapbox-gl/mapbox-gl.html">
    <custom-style>
        <style is="custom-style">
         mapbox-gl {
             height: 500px;
             width: 100%;
         }
        </style>
    </custom-style>
    <dom-bind>
            <div class="container">
                <div class="row">
                    <mapbox-gl
                        interactive
                        map="{{map}}"
                        access-token="[[my-access-token]]"
                        map-style-url="mapbox://styles/mapbox/streets-v10"
                    ></mapbox-gl>
                </div>
            </div>
    </dom-bind>

I've tried explicitly setting css-src and directly linking the mapbox css - in either case, the css file is loading from api.mapbox.com and the rendered elements for the map and controls appear fine, but styles are not applied within the shadow root. (Tested on FF and Chrome)

Mapbox-gl installed from bower, v2.0.6 Polymer installed as dep via bower, v2.2.0

eterna2 commented 6 years ago

Hi I just pushed a new update.

Instead of importing the CSS, I create the style element dynamically inside the shadow-dom. It works now.

Just update to v2.0.7

eterna2 commented 6 years ago

You can see an example of this at https://www.webcomponents.org/element/PolymerVis/mapbox-gl/demo/demo/centered.html