add stops with names

app/pages/map.vue

@@ -2,6 +2,18 @@
     <ClientOnly>
         <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
             <MglNavigationControl />
+            <mgl-geo-json-source source-id="geojson" :data="geojsonSource.data">
+                <mgl-circle-layer
+                    layer-id="bigCircle"
+                    :layout="layout"
+                    :paint="paint"
+                />
+                <MglSymbolLayer layer-id="text" :layout="symbolLayout" />
+                <MglImage
+                    id="image_test"
+                    url="https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png"
+                />
+            </mgl-geo-json-source>
         </MglMap>
     </ClientOnly>
 </template>
@@ -10,4 +22,40 @@
 const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
 const center = [5.735, 45.185];
 const zoom = 12;
+
+const geojsonSource = ref({
+    data: "https://data.mobilites-m.fr/api/points/json?types=stops",
+});
+
+// const geojsonSource = ref({
+//     data: {
+//         type: "FeatureCollection",
+//         features: [
+//             {
+//                 type: "Feature",
+//                 geometry: {
+//                     type: "Point",
+//                     coordinates: [5.735, 45.185],
+//                 },
+//                 properties: { year: "2004" },
+//             },
+//         ],
+//     },
+// });
+const layout = {
+    // "icon-image": "image_test",
+    // "line-join": "round",
+    // "line-cap": "round",
+};
+
+const paint = {
+    "circle-radius": 5,
+    "circle-color": "#FF0000",
+    // "line-color": "#FF0000",
+    // "line-width": 8,
+};
+
+const symbolLayout = {
+    "text-field": ["get", "name"],
+};
 </script>