diff options
| -rw-r--r-- | index.html | 40 |
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> + |