<MapLibre> pre-baked styles not applying correctly, on npm run preview

[cntrvsy]

Hey, Im a young developer so forgive me if this may sound dumb, so for my static site i wanted to add a simple location marker and came across this svelte library which is great, however I have been struggling to understand why in the dev environment the Map with the standard example provided in the READ.ME appear correctly but on build it seems that maybe my styles might be overriding something. my project is using Sveltekit 2 with skeleton UI. Any guidance in the right direction will be appreciated as after debugging and trying to change things around i still cannot get rid of the issue. below i have attached images showing what i mean one of the map component, in dev mode and the other in prod.

if its relevant here is my script tag and how i have used the component.

<script lang="ts">
import hero_branches from '$lib/assets/hero_branches.svg'
import { MapLibre, Marker, Popup } from 'svelte-maplibre'

type LngLatLike = [number, number];

 // marker data to use LngLatLike
 let markers: { lngLat: LngLatLike, label: string, name: string }[] = [
    { lngLat: [36.74144131349433, -1.2849738170363865], label: 'HQ', name: 'Abiria Driving school' },
  ];

  let clickedName = '';

</script>

and here is how im using it

<!-- Map Section  -->
	<section class="border-4 border-primary-600">
		<MapLibre
			style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
			class= "map"
			standardControls
			zoom={2}
			center={[-20, 0]}
			>
			{#each markers as { lngLat, label, name } (label)}
				<Marker
				{lngLat}
				on:click={() => (clickedName = name)}
				class="border-gray-200 border shadow-2xl focus:outline-2 focus:outline-black w-8 h-8 bg-red-300 text-black rounded-full grid place-items-center"
				>
				<span>
					{label}
				</span>

				<Popup openOn="hover" offset={[0, -10]}>
					<div class="text-base font-bold text-zinc-950">{name}</div>
				</Popup>
				</Marker>
			{/each}
		</MapLibre>
	</section>
<style>
	:global(.map) {
	  height: 500px;
	}
</style>

any help will be appreciated.

[dimfeld]

Can you please provide a link to a project that has this issue? It’s difficult to guess from looking at images alone.

…

On Tue Dec 19, 2023, 11:29 AM GMT, cntrvsy ***@***.***> wrote: Hey, Im a young developer so forgive me if this may sound dumb, so for my static site i wanted to add a simple location marker and came across this svelte library which is great, however I have been struggling to understand why in the dev environment the Map with the standard example provided in the READ.ME appear correctly but on build it seems that maybe my styles might be overriding something. my project is using Sveltekit 2 with skeleton UI. Any guidance in the right direction will be appreciated as after debugging and trying to change things around i still cannot get rid of the issue. below i have attached images showing what i mean one of the map component, in dev mode and the other in prod. Screenshot.2023-12-19.140748.png (view on web) <https://github.com/dimfeld/svelte-maplibre/assets/118628316/3b96cd3e-5978-40fb-8420-2d950d6eb572> Screenshot.2023-12-19.141332.png (view on web) <https://github.com/dimfeld/svelte-maplibre/assets/118628316/8ec2af99-8441-478c-86ec-33fb5a055b71> if its relevant here is my script tag and how i have used the component. <script lang="ts"> import hero_branches from '$lib/assets/hero_branches.svg' import { MapLibre, Marker, Popup } from 'svelte-maplibre' type LngLatLike = [number, number]; // marker data to use LngLatLike let markers: { lngLat: LngLatLike, label: string, name: string }[] = [ { lngLat: [36.74144131349433, -1.2849738170363865], label: 'HQ', name: 'Abiria Driving school' }, ]; let clickedName = ''; </script> and here is how im using it <!-- Map Section --> <section class="border-4 border-primary-600"> <MapLibre style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" class= "map" standardControls zoom={2} center={[-20, 0]} > {#each markers as { lngLat, label, name } (label)} <Marker {lngLat} on:click={() => (clickedName = name)} class="border-gray-200 border shadow-2xl focus:outline-2 focus:outline-black w-8 h-8 bg-red-300 text-black rounded-full grid place-items-center" > <span> {label} </span> <Popup openOn="hover" offset={[0, -10]}> <div class="text-base font-bold text-zinc-950">{name}</div> </Popup> </Marker> {/each} </MapLibre> </section> <style> :global(.map) { height: 500px; } </style> any help will be appreciated. — Reply to this email directly, view it on GitHub <#114>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOLVTSYXMOTYYQONELSITYKF3CJAVCNFSM6AAAAABA3AR4Z2VHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE3TQNBXGI>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[cntrvsy]

No worries, apology for the late response but here is the link to the repository, none of the information on the site is confidential currently and I mainly use it as a practice dummy. thanks again for the reply. link
the map component is in the - src/routes/Branches/+page.svelte - and I have commented it out.