lomer-ui

Wrapper

Mapbox

Interactive and customizable map visualization.

Installation

Add Mapbox access token

Insert access token in your .env file.

.env

1 
PUBLIC_MAPBOX_TOKEN=[your_api_key_here]

Usage

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Map from '$lib/components/base/map.mapbox-gl.svelte';
3
4 
  let map: mapboxgl.Map;
5 
</script>
6
7 
<Map bind:map />
8

Options

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Map from '$lib/components/base/map.mapbox-gl.svelte';
3
4 
  let map: mapboxgl.Map;
5 
</script>
6
7 
<Map
8 
  bind:map
9 
  options={{
10 
    style: 'mapbox://styles/mapbox/satellite-streets-v12',
11 
    zoom: 12
12 
  }}
13 
/>
14

Controls

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Map from '$lib/components/base/map.mapbox-gl.svelte';
3 
  import mapboxgl from 'mapbox-gl';
4 
  import { onMount } from 'svelte';
5
6 
  let map: mapboxgl.Map;
7
8 
  onMount(() => {
9 
    const fullscreen = new mapboxgl.FullscreenControl();
10 
    map.addControl(fullscreen);
11
12 
    const navigation = new mapboxgl.NavigationControl();
13 
    map.addControl(navigation);
14
15 
    const geolocate = new mapboxgl.GeolocateControl();
16 
    map.addControl(geolocate, 'top-left');
17 
  });
18 
</script>
19
20 
<Map bind:map />
21

Events

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Map from '$lib/components/base/map.mapbox-gl.svelte';
3 
  import { onMount } from 'svelte';
4
5 
  let map: mapboxgl.Map;
6
7 
  onMount(() => {
8 
    map.on('load', () => {
9 
      console.log('A load event occurred.');
10 
    });
11
12 
    map.on('resize', () => {
13 
      console.log('A resize event occurred.');
14 
    });
15
16 
    map.on('click', (e) => {
17 
      console.log(`A click event has occurred at ${e.lngLat}`);
18 
    });
19 
  });
20 
</script>
21
22 
<Map bind:map />
23

Marker

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Map from '$lib/components/base/map.mapbox-gl.svelte';
3 
  import mapboxgl from 'mapbox-gl';
4 
  import { onMount } from 'svelte';
5
6 
  let map: mapboxgl.Map;
7
8 
  onMount(() => {
9 
    new mapboxgl.Marker().setLngLat([-74.5, 40]).addTo(map);
10 
  });
11 
</script>
12
13 
<Map bind:map />
14