summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html40
1 files changed, 40 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..329faf1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />
+ </head>
+ <body>
+ <div id="app">
+ <l-map :zoom="zoom" :center="center">
+ <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
+ <l-marker :lat-lng="center"></l-marker>
+ </l-map>
+ </div>
+
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+ <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+ <script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.min.js"></script>
+ <script>
+ const vm = new Vue({
+ el: '#app',
+ components: {
+ 'l-map': window.Vue2Leaflet.LMap,
+ 'l-tile-layer': window.Vue2Leaflet.LTileLayer,
+ 'l-marker': window.Vue2Leaflet.LMarker,
+ },
+ data: {
+ center: [50.3342, 10.2114],
+ zoom: 14,
+ },
+
+ mounted () {
+ if ('geolocation' in window.navigator) {
+ navigator.geolocation.getCurrentPosition((pos) => {
+ this.center = [pos.coords.latitude, pos.coords.longitude];
+ });
+ }
+ },
+ });
+ </script>
+ </body>
+</html>
+