JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.js"></script>
<body>
  <div id="app">
    <v-map :zoom="zoom" :center="center">
      <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
      <v-marker :lat-lng="center" :draggable="true">
        <v-popup :content="greeting"></v-popup>
        <v-tooltip :content="greeting"></v-tooltip>
      </v-marker>
    </v-map>
  </div>
</body>

CSS

*{
  padding: 0;
  margin: 0
}
#app {
  height: 100vh;
}

JavaScript

Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('v-tooltip', Vue2Leaflet.Tooltip);
Vue.component('v-popup', Vue2Leaflet.Popup);

new Vue({
  el: '#app',
  data() {
    return {
    	greeting: 'hello!',
      zoom: 13,
      center: [47.413220, -1.219482],
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  }
});