Loading src/playground/App.vue +1 −0 Original line number Diff line number Diff line Loading @@ -5,6 +5,7 @@ <router-link to="/marker">Marker</router-link> <router-link to="/circle">Circle</router-link> <router-link to="/icon">Icon</router-link> <router-link to="/control-custom-message">Custom Message</router-link> </div> <div class="map-wrapper"> <router-view /> Loading src/playground/index.js +4 −0 Original line number Diff line number Diff line Loading @@ -9,6 +9,10 @@ const routes = [ { path: "/marker", component: () => import("./views/Marker.vue") }, { path: "/circle", component: () => import("./views/Circle.vue") }, { path: "/icon", component: () => import("./views/Icon.vue") }, { path: "/control-custom-message", component: () => import("./views/ControlCustomMessage.vue"), }, ]; const router = createRouter({ Loading src/playground/views/ControlCustomMessage.vue 0 → 100644 +32 −0 Original line number Diff line number Diff line <template> <l-map ref="map" :zoom="2" :center="[47.41322, -1.219482]"> <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" ></l-tile-layer> <l-control class="leaflet-control leaflet-demo-control" >Hello, Map!</l-control > </l-map> </template> <script> import { LMap, LTileLayer, LControl } from "./../../components"; export default { components: { LMap, LTileLayer, LControl, }, }; </script> <style> .leaflet-demo-control { background: white; border: 1px solid steelblue; border-radius: 0.6em; padding: 0.5em; } </style> Loading
src/playground/App.vue +1 −0 Original line number Diff line number Diff line Loading @@ -5,6 +5,7 @@ <router-link to="/marker">Marker</router-link> <router-link to="/circle">Circle</router-link> <router-link to="/icon">Icon</router-link> <router-link to="/control-custom-message">Custom Message</router-link> </div> <div class="map-wrapper"> <router-view /> Loading
src/playground/index.js +4 −0 Original line number Diff line number Diff line Loading @@ -9,6 +9,10 @@ const routes = [ { path: "/marker", component: () => import("./views/Marker.vue") }, { path: "/circle", component: () => import("./views/Circle.vue") }, { path: "/icon", component: () => import("./views/Icon.vue") }, { path: "/control-custom-message", component: () => import("./views/ControlCustomMessage.vue"), }, ]; const router = createRouter({ Loading
src/playground/views/ControlCustomMessage.vue 0 → 100644 +32 −0 Original line number Diff line number Diff line <template> <l-map ref="map" :zoom="2" :center="[47.41322, -1.219482]"> <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" ></l-tile-layer> <l-control class="leaflet-control leaflet-demo-control" >Hello, Map!</l-control > </l-map> </template> <script> import { LMap, LTileLayer, LControl } from "./../../components"; export default { components: { LMap, LTileLayer, LControl, }, }; </script> <style> .leaflet-demo-control { background: white; border: 1px solid steelblue; border-radius: 0.6em; padding: 0.5em; } </style>