plugin.html

<plugin>
	<div class="plugin-content">

		<b>Flight plans</b>

		<ul>
			<li class="clickable-size" data-ref="fpl1">LKPR - LSZR</li>
			<li class="clickable-size" data-ref="fpl2">EGLL - LKPR</li>
			<li class="clickable-size" data-ref="fpl3">LKPR - EDDB</li>
		</ul>

		<small>Use right side window for apps that that are fine with
		narrow window.
    <br/><br/>
    This plugin also demonstrates using
		GeoJSON on a map.</small>

	</div>
	<script>

	import map from '@windy/map'

	let geoJSON = null

	//	Whenever your plugin is mounted, all elements with 'data-ref'
	//	attributes are exposed in this.refs object
	this.refs.fpl1.onclick = () => loadFpl('fpl1')
	this.refs.fpl2.onclick = () => loadFpl('fpl2')
	this.refs.fpl3.onclick = () => loadFpl('fpl3')

	this.onclose = () => removeFpl()

	const loadFpl = file => {

		removeFpl()

		fetch(`https://www.windy.com/img/windy-plugins/${ file }.json`)
			.then(response => response.json())
	        .then( result => {

				geoJSON = L.geoJson( result ).addTo(map)

				const bounds = geoJSON.getBounds()

				map.fitBounds( bounds )

	        })
	}

	const removeFpl = () => {
		if(geoJSON) {
			map.removeLayer(geoJSON)
			geoJSON = null
		}
	}

	</script>
</plugin>