Skip to content

Commit

Permalink
refactor: CustomControl
Browse files Browse the repository at this point in the history
  • Loading branch information
ciscorn committed Nov 21, 2024
1 parent 9d05840 commit e245f2b
Show file tree
Hide file tree
Showing 10 changed files with 95 additions and 119 deletions.
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ Everyone is welcomed to contribute to this project! There are many ways to suppo
- TODO: Add core contributors
- And [all contributors](https://github.com/MIERUNE/svelte-maplibre-gl/graphs/contributors)

Supported by [MIERUNE Inc.](https://www.mierune.co.jp/)

## Acknowledgements

This project `svelte-maplibre-gl` is inspired by the efforts and innovations of the following libraries:
Expand Down
67 changes: 40 additions & 27 deletions src/content/examples/custom-control/CustomControl.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<script lang="ts">
import { HillshadeLayer, MapLibre, RasterDEMTileSource, Terrain, CustomControl } from 'svelte-maplibre-gl';
import maplibregl from 'maplibre-gl';
import Sun from 'lucide-svelte/icons/sun';
import Moon from 'lucide-svelte/icons/moon';
import ArrowUpLeft from 'lucide-svelte/icons/arrow-up-left';
import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
import ArrowDownLeft from 'lucide-svelte/icons/arrow-down-left';
import ArrowDownRight from 'lucide-svelte/icons/arrow-down-right';
import { MyControl } from './MyControl.js';
let isHillshadeVisible = $state(true);
Expand All @@ -12,6 +17,8 @@
? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'
);
let center = $state({ lng: 11.09085, lat: 47.3 });
let controlPosition: maplibregl.ControlPosition = $state('top-left');
const myControl = new MyControl({
toggleHillshade: () => {
Expand All @@ -25,38 +32,44 @@
});
</script>

<MapLibre
class="h-[60vh] min-h-[300px]"
style={mapStyle}
zoom={12}
pitch={40}
maxPitch={85}
center={{ lng: 11.09085, lat: 47.3 }}
>
<MapLibre class="h-[50vh] min-h-[200px]" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
<!-- inject IControl (useful for plugin) -->
<CustomControl.Control position="top-left" control={myControl} />
<CustomControl position="top-left" control={myControl} />

<!-- Control / Group / Icon -->
<CustomControl.Control position="bottom-left">
<CustomControl.Group>
<CustomControl.Icon onclick={() => (isDarkMode = !isDarkMode)} class="text-gray-900">
{#if isDarkMode}
<Moon />
{:else}
<Sun />
{/if}
</CustomControl.Icon>
</CustomControl.Group>
</CustomControl.Control>
<CustomControl position="bottom-left">
<button onclick={() => (isDarkMode = !isDarkMode)} class="grid place-items-center text-gray-900">
{#if isDarkMode}
<Moon class="w-5" />
{:else}
<Sun class="w-5" />
{/if}
</button>
</CustomControl>

<!-- Group -->
<CustomControl position={controlPosition} class="text-gray-900">
<button class="place-items-center" onclick={() => (controlPosition = 'top-left')}
><ArrowUpLeft class="w-5" /></button
>
<button class="place-items-center" onclick={() => (controlPosition = 'top-right')}
><ArrowUpRight class="w-5" /></button
>
<button class="place-items-center" onclick={() => (controlPosition = 'bottom-right')}
><ArrowDownRight class="w-5" /></button
>
<button class="place-items-center" onclick={() => (controlPosition = 'bottom-left')}
><ArrowDownLeft class="w-5" /></button
>
</CustomControl>

<!-- Control / Group / any svelte elements -->
<CustomControl.Control position="top-right">
<CustomControl.Group>
<div class="p-2 text-yellow-600">
<div>define your own custom control</div>
</div>
</CustomControl.Group>
</CustomControl.Control>
<CustomControl position="top-right">
<div class="p-2 text-yellow-700">Arbitrary HTML</div>
<div class="border-t border-t-[#ddd] p-2 text-center text-yellow-700">
({center.lat.toFixed(4)}, {center.lat.toFixed(4)})
</div>
</CustomControl>

<RasterDEMTileSource
id="terrain"
Expand Down
2 changes: 2 additions & 0 deletions src/content/examples/custom-control/MyControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ class MyControl implements maplibregl.IControl {
toggleTerrain.textContent = 'Disable Terrain';
toggleTerrain.type = 'button';
toggleTerrain.style.backgroundColor = 'red';
toggleTerrain.style.color = 'white';
toggleTerrain.style.width = '50%';
toggleTerrain.style.height = '100%';
toggleTerrain.style.borderRadius = '0.25rem';
Expand All @@ -33,6 +34,7 @@ class MyControl implements maplibregl.IControl {
toggleHillshade.textContent = 'Disable Hillshade';
toggleHillshade.type = 'button';
toggleHillshade.style.backgroundColor = 'blue';
toggleHillshade.style.color = 'white';
toggleHillshade.style.height = '100%';
toggleHillshade.style.width = '50%';
toggleHillshade.style.borderRadius = '0.25rem';
Expand Down
2 changes: 0 additions & 2 deletions src/content/examples/custom-control/content.svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,4 @@ description: Custom Control allows to easily create user defined controls.

<CustomControl />

## Code

<CodeBlock content={demoRaw} />
52 changes: 52 additions & 0 deletions src/lib/maplibre/controls/CustomControl.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script lang="ts">
// https://maplibre.org/maplibre-gl-js/docs/API/interfaces/IControl/
import type { Snippet } from 'svelte';
import maplibregl from 'maplibre-gl';
import { getMapContext } from '../contexts.svelte.js';
interface Props {
position?: maplibregl.ControlPosition;
control?: maplibregl.IControl;
group?: boolean;
class?: string;
children?: Snippet;
}
let { position, control: givenControl, class: className, group = true, children }: Props = $props();
if (!givenControl && !children) throw new Error('You must provide either control or children.');
const mapCtx = getMapContext();
if (!mapCtx.map) throw new Error('Map instance is not initialized.');
let el: HTMLDivElement | undefined = $state();
let control = $derived.by(() => {
if (givenControl) {
return givenControl;
}
return {
onAdd: () => {
return el!;
},
onRemove: () => {
el?.parentNode?.removeChild(el);
}
};
});
$effect(() => {
if (control) {
mapCtx.map?.addControl(control, position);
}
return () => {
control && mapCtx.map?.removeControl(control);
};
});
</script>

{#if !givenControl}
<div bind:this={el} class={`maplibregl-ctrl ${className}`} class:maplibregl-ctrl-group={group}>
{@render children?.()}
</div>
{/if}
47 changes: 0 additions & 47 deletions src/lib/maplibre/controls/CustomControl/Control.svelte

This file was deleted.

8 changes: 0 additions & 8 deletions src/lib/maplibre/controls/CustomControl/Group.svelte

This file was deleted.

26 changes: 0 additions & 26 deletions src/lib/maplibre/controls/CustomControl/Icon.svelte

This file was deleted.

6 changes: 0 additions & 6 deletions src/lib/maplibre/controls/CustomControl/index.ts

This file was deleted.

2 changes: 1 addition & 1 deletion src/lib/maplibre/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,5 @@ export { default as FullScreenControl } from './controls/FullScreenControl.svelt
export { default as TerrainControl } from './controls/TerrainControl.svelte';
export { default as ScaleControl } from './controls/ScaleControl.svelte';
export { default as LogoControl } from './controls/LogoControl.svelte';
export { default as CustomControl } from './controls/CustomControl/index.js';
export { default as CustomControl } from './controls/CustomControl.svelte';
export { default as Hash } from './controls/Hash.svelte';

0 comments on commit e245f2b

Please sign in to comment.