Moved MapLibre to use the Astro directive is:inline

[roblabs]

For the MapLibre Astro Component, we had a pattern like below, but it was causing problems when importing into an Astro Project. The work around is to pull using the Astro directive is:inline.

{/* Astro specific way to pull in MapLibre:  https://docs.astro.build/en/reference/directives-reference/#isinline */}
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>

---

This was the previous way, but caused issue with named export or other node importing issues.

  import * as maplibregl from 'maplibre-gl'

  var map = new maplibregl.Map({
        container: this.dataset.container,
        interactive: JSON.parse(this.dataset.interactive),
        center: [this.dataset.longitude, this.dataset.latitude],
        zoom: this.dataset.zoom,
        style: this.dataset.mapstyle
  })

---

In our research, we reviewed or had similar issues as the following MapLibre GL JS issues:

• Uncaught ReferenceError: m is not defined - Create React App - browserslist - Internet Explorer IE maplibre/maplibre-gl-js#1011
• import as node module fails maplibre/maplibre-gl-js#1668
• [typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser maplibre/maplibre-gl-js#3855