0
289
ViewsMapa Mapbox de pantalla completa simple con esbelto
Quiero mostrar un mapa muy básico con mapbox usando svelte. Ya estoy fallando cuando solo quiero hacer el mapa a pantalla completa. Sé que existe el complemento svelte-mapbox . Pero realmente no quiero hacer cosas extravagantes. Solo un mapa de pantalla completa por ahora;)
Entonces mi main.js se ve predeterminado así:
import App from "./App.svelte"; const app = new App({ target: document.body, }); export default app; La App.svelte así:
<script> import mapboxgl from "mapbox-gl"; mapboxgl.accessToken = 'token' const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/light-v10", center: [16.37, 48.2], zoom: 12, }); </script> <svelte:head> <link href="https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css" rel="stylesheet" /> <script src="https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js"></script> </svelte:head> <div id="map" /> <style> div { width: 100%; height: 100%; } </style>Y eso es. No aparece nada. Si agrego:
... <body> <div id="map"></div> </body> ...Esto al `index.html, luego veo esto:
Tan lejos de pantalla completa. ¿Qué me estoy perdiendo? 
1 answers
Answer question0
El problema es que cuando se ejecuta el Javascript de su componente, el <DIV id="map"/> aún no se crea. Entonces, la llamada de Mapbox no encontrará un contenedor para colocar el mapa y simplemente se cierra.
Cuando coloca el <DIV id="map"/> en su index.html , entonces el DIV estaba allí, pero debido al alcance de CSS de Svelte, el CSS no se aplicó (porque está fuera de su componente) (consulte: https://svelte.dev/docs#style ) Puede usar el modificador :global en la declaración CSS para "arreglar" eso y debería funcionar.
Pero la mejor solución es hacer que el código de creación del mapa se ejecute en la parte correcta del ciclo de vida del componente: después de que el HTML esté montado en el DOM.
Para hacer eso, necesitaría usar la función onMount de la biblioteca Svelte : (ver: https://svelte.dev/docs#onMount )
import { onMount } from 'svelte' import mapboxgl from "mapbox-gl"; mapboxgl.accessToken = 'token' onMount(() => { const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/light-v10", center: [16.37, 48.2], zoom: 12, }); })