JSFiddle - React, Tailwind, and code Playground

by Michael Underwood

HTML

<link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />

<script src="https://leafletjs.com/examples/choropleth/us-states.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="//unpkg.com/vue2-leaflet"></script>

<div id="app">
</div>

CSS

#testMap {
  height: 550px;
  width: 750px;
}

JavaScript

var app = new Vue({
  el: '#app',

  components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-tile-layer': window.Vue2Leaflet.LTileLayer,
    'l-geo-json': window.Vue2Leaflet.LGeoJson,
    'l-control-layers': window.Vue2Leaflet.LControlLayers,
  },
  
  template: `
  <l-map v-if="shouldRender" :zoom="4" :center="[38.2, -96]" ref="testMap" id="testMap">
      <l-tile-layer :url="url"/>
      <l-geo-json :geojson="geojson"/>
      <l-control-layers/>
    </l-map>
  `,

  data() {
    return {
      geojson: statesData,
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      shouldRender: false,
    }
  },
  
  mounted() {
    window.setTimeout(this.showMap, 1000);
  },
  
  methods: {
    showMap () {
      this.shouldRender = true;
    }
  }
})