fix: add default map style

Author: Gugustinette

docs/getting-started/usage.md

@@ -27,7 +27,7 @@ This is only possible in a client-side environment. You should either :
 </template>
 
 <script setup>
-const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://demotiles.maplibre.org/style.json';
 const center = [-1.559482, 47.21322];
 const zoom = 8;
 </script>
@@ -45,7 +45,7 @@ const MglNavigationControl = defineClientComponent(() => {
   return import('@indoorequal/vue-maplibre-gl').then(m => m.MglNavigationControl)
 })
 
-const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://demotiles.maplibre.org/style.json';
 const center = [-1.559482, 47.21322];
 const zoom = 8;
 </script>

package-lock.json

@@ -37,8 +37,8 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@indoorequal/vue-maplibre-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "@indoorequal/vue-maplibre-gl": "^8.3.0",
+    "maplibre-gl": "^5.2.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

package.json

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://demotiles.maplibre.org/style.json';
 const center = [-1.559482, 47.21322];
 const zoom = 8;
 

playground/pages/map/map-basic.client.vue

@@ -1,5 +1,6 @@
 <template>
   <MglMap
+    map-style="https://demotiles.maplibre.org/style.json"
     :center="center"
     :zoom="zoom"
   >