JSFiddle - React, Tailwind, and code Playground

by Vladimir Vershinin

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<div id="app">
  <vl-map data-projection="EPSG:4326">
    <vl-view ref="view" :zoom.sync="zoom" :center.sync="center" />

    <vl-layer-tile>
      <vl-source-osm
        url="https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
      ></vl-source-osm>
    </vl-layer-tile>

    <vl-layer-vector>
      <vl-source-vector ref="vectorSource" :features="features" />
    </vl-layer-vector>
  </vl-map>
</div>

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

new Vue({
	el: '#app',
  data () {
  	return {
    	features: [],
			zoom: 5,
      center: [0, 0],
      coordinates: [
        [
          [-2.8125000000000004, 5.11282977849946],
          [-3.317871093750001, 6.795535025719516],
          [1.1645507812499996, 6.009459238059563],
          [-2.263183593750001, 4.674979814820247],
          [-2.8125000000000004, 5.11282977849946],
        ],
      ],
      id: "D1E2CE406F3411ECBA294201C0BE0104",
    }
  },
  mounted() {
    const feature = {
    	type: 'Feature',
      id: this.id,
			geometry: {
      	type: 'Polygon',
        coordinates: this.coordinates,
      },
    }
    this.features.push(feature)
  },
})