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">
<script src="https://cdn.jsdelivr.net/gh/Viglino/ol-ext@master/dist/ol-ext.min.js"></script>
<div id="app">
   <vl-map id="mapSystemComponents">
    <vl-view ref="view" :zoom.sync="zoom" :center.sync="center" />

    <!-- open street maps -->
    <vl-layer-tile :z-index="0">
      <vl-source-osm
        url="https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
      ></vl-source-osm>
    </vl-layer-tile>
    
    <!-- features source -->
    <vl-layer-vector :z-index="1">
      <vl-source-vector ident="all-features" :features="[]" />
    </vl-layer-vector>
    
    <!-- highlighted features -->
    <vl-interaction-select
      source="all-features"
      :features.sync="highlightedFeatures"
      :z-index="2"
    >
      <vl-style-func :factory="highlightedStyleFuncFactory" />
    </vl-interaction-select>



    <!-- draw source -->
    <vl-layer-vector :z-index="3">
      <vl-source-vector ident="draw-target" :features.sync="addedFeatures" />
    </vl-layer-vector>

    <!-- handles adding a featue -->
    <vl-interaction-draw
      type="LineString"
      source="draw-target"
      :z-index="4"
      :stop-click="true"
    >
      <vl-style-box>
        <vl-style-stroke color="black" :width="2" />
        <vl-style-fill color="rgba(255,255,255,0.5)" />
      </vl-style-box>
    </vl-interaction-draw>
  </vl-map>
</div>

CSS

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

JavaScript

new Vue({
	el: '#app',
  data () {
  	return {
    	highlightedFeatures: [],
      addedFeatures: [],
			zoom: 3,
      center: [0, 0],
    }
  },
  watch: {
  	highlightedFeatures(val) {
      console.log("highlighted features", val)
    },
  },
  methods: {
    highlightedStyleFuncFactory() {
    	 return function __styleFuncFactory() {
       	 return [
        	  VueLayers.olExt.createStyle({
        	    imageRadius: 7,
        	    strokeWidth: 5.5,
        	    strokeColor:  "green",
        	    fillColor: [255, 255, 255, 1],
        	  }),
      	 ];
    	 };
    },
  }
})