In this particular component, I am capturing user input and storing it in variables. I would like this value to be automatically updated in another component when the submit button is clicked.
<script>
import { onMount } from "svelte";
let url=[];
onMount(() => {
onClickGetNotes()
});
async function onClickGetNotes() {
console.log(url.url)
}
</script>
<form on:submit|preventDefault={onClickGetNotes}>
<input label="url" bind:value={url.url} placeholder="enter id here"/>
<button>Submit</button>
</form>
This second component is where I need the entered URL to be dynamically updated for an image overlay using Leaflet.
<script>
import { onMount } from "svelte";
import L from "leaflet";
var url
var map
var layerGroup
// code for map
onMount(() => {
map = L.map('issmap', {
.....
crs: L.CRS.Simple
});
var w = 500,
h = 500,
url = 'https://pp.vk.me/c837734/v837734326/d436/zlt_Wifq2NU.jpg';
......
layerGroup = L.layerGroup().addTo(map);
});
</script>
.....
The main goal is to retrieve the user's URL input and reflect it accurately on the Leaflet map.
Any suggestions on how to achieve this?