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,
  },
  
  template: `
  <l-map :zoom="4" :center="[38.2, -96]" ref="testMap" id="testMap">
    <l-tile-layer :url="url" />
    <l-geo-json :geojson="geojson" />
  </l-map>
  `,

  data() {
    return {
      geojson: statesData,
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    }
  },
})