Control and StandardControl

[Niamh1]

Hey! I when I add buttons on the map and run npm run preview they are all changing size or position.

If add the StandardControl to my map, and run npm run dev, I have the expected controls:

If I then run npm run build, npm run preview (and when I deploy on firebase), the preview has the buttons the width of the map:

I have also tried to create my own button, which appears in the top-right of the screen. Again it looks correct when running npm run dev, but moves to the left on npm run preview

<Control position="top-right"> <FilterButton/> </Control>

Have you seen this behaviour before?

[dimfeld]

Someone else mentioned this before too, but I’m not sure how to reproduce it. Happy to take a look in a day or two if you can point me to a repository that has the problem.

[joruxs]

I too have this problem. I have added these in package.json:

    "maplibre-gl"     : "^4.5.2",
    "svelte-maplibre" : "^0.9.12",

This is the full code of the svelte page/component:

<script lang="ts">
  import {MapLibre} from "svelte-maplibre";
</script>

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="w-full h-full"
  standardControls />

When running with npm run dev it works fine but when compiled with npm run build and then executed on node.js it looks like the broken picture in post above.

[joruxs]

I noticed I could workaround the problem by adding bundling the maplibre-gl.css file in the static folder of my web and then loading it in app.html. Not a beautiful solution but it works:

    <!-- Workaround to get svelte-maplibre's controls appear correctly -->
    <link href='/maplibre-gl/4.5.2/dist/maplibre-gl.css' rel='stylesheet' />

Still looking for a more modular/encapsulated solution that doesn't pollute the global css scope.