Agricultural land field map mask

package.json

@@ -23,6 +23,7 @@
 		"vuex": "^4.0.0-0"
 	},
 	"devDependencies": {
+		"@types/leaflet": "^1.7.9",
 		"@vue/cli-plugin-babel": "~4.5.0",
 		"@vue/cli-plugin-eslint": "~4.5.0",
 		"@vue/cli-plugin-router": "~4.5.0",

src/components/GameContent.vue

@@ -4,13 +4,15 @@
     <div class="content" v-if="whichQuestion === item">
       <GameTaskA
         v-if="!isTaskACompleted"
+        :shouldShowNewFilter="shouldShowNewFilter"
         :which-question="whichQuestion"
         :identify-land-usage="identifyLandUsage"
         :params-of-maps="paramsOfMaps"
         :factory-coord="currentQuestionData.factoryCoord"
       />
       <GameTaskB
         v-else
+        :shouldShowNewFilter="shouldShowNewFilter"
         :which-question="whichQuestion"
         :params-of-maps="paramsOfMaps"
         :land-usage="landUsage"
@@ -23,13 +25,59 @@
 </template>
 
 <script>
+
 import axios from 'axios';
 import haversineOffset from 'haversine-offset';
 import { mapActions, mapState } from 'vuex';
 import GameTaskA from './GameTaskA.vue';
 import GameTaskB from './GameTaskB.vue';
 import LoadingPage from './LoadingPage.vue';
 
+const DATA_FOR_AB_TESTING = [
+
+  {
+    latitude: '23.99810304',
+    longitude: '120.6448603',
+    location_id: 0,
+    address: '南投縣草屯鎮石川里新光段1556地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.45363464',
+    longitude: '120.7812774',
+    location_id: 1,
+    address: '苗栗縣銅鑼鄉樟樹村雙峰山段49地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.05429213',
+    longitude: '120.4788423',
+    location_id: 2,
+    address: '彰化縣鹿港鎮東崎里東昇段101地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.04974618',
+    longitude: '120.4635',
+    location_id: 3,
+    address: '彰化縣福興鄉新生段2400地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.25721607',
+    longitude: '120.6481218',
+    location_id: 4,
+    address: '臺中市神岡區光復段854地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+
+];
+
 export default {
   name: 'TutorialContent',
   components: {
@@ -39,6 +87,8 @@ export default {
   },
   data() {
     return {
+      dataForABTesting: [...DATA_FOR_AB_TESTING],
+      shouldShowNewFilter: false,
       isLoading: false,
       allFactoriesData: [],
       currentQuestionData: {
@@ -78,32 +128,75 @@ export default {
       localStorage.setItem('SpotDiffData', JSON.stringify(allFactoriesData));
     },
     getFactoryCoord() {
-      const data = JSON.parse(localStorage.getItem('SpotDiffData'));
+      // for a/b testing, we use data which is selected,
+      // so we don't fetch request to get factory data from database.
+      // code for a/b testing:
+
       this.currentQuestionData.factoryCoord = {
-        latitude: data[this.whichQuestion - 1].latitude,
-        longitude: data[this.whichQuestion - 1].longitude,
-        address: data[this.whichQuestion - 1].address,
+        latitude: this.dataForABTesting[this.whichQuestion - 1].latitude,
+        longitude: this.dataForABTesting[this.whichQuestion - 1].longitude,
+        address: this.dataForABTesting[this.whichQuestion - 1].address,
       };
+
+      // original code:
+
+      // const data = JSON.parse(localStorage.getItem('SpotDiffData'));
+
+      // this.currentQuestionData.factoryCoord = {
+      //   latitude: data[this.whichQuestion - 1].latitude,
+      //   longitude: data[this.whichQuestion - 1].longitude,
+      //   address: data[this.whichQuestion - 1].address,
+      // };
     },
     scrollToTop() {
       if (this.$refs.start.scrollIntoView) {
         this.$refs.start.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
       }
     },
     identifyLandUsage(landUsage) {
+      // for a/b testing, we use data which is selected,
+      // so we don't have to identify data from database.
+      // code for a/b testing:
+
+      this.dataForABTesting[this.whichQuestion - 1].landUsage = landUsage;
       this.currentQuestionData.userAnswer.landUsage = landUsage;
       // if (landUsage === 'unknown') {
       //   this.identifyHasIllegalFactory('unknown');
       // } else {
       //   this.isTaskACompleted = true;
       // }
       this.isTaskACompleted = true;
+
+      // original code:
+
+      // this.dataForABTesting[this.whichQuestion - 1].landUsage = landUsage;
+      // this.currentQuestionData.userAnswer.landUsage = landUsage;
+      // // if (landUsage === 'unknown') {
+      // //   this.identifyHasIllegalFactory('unknown');
+      // // } else {
+      // //   this.isTaskACompleted = true;
+      // // }
+      // this.isTaskACompleted = true;
     },
     identifyHasIllegalFactory(hasIllegalFactory) {
+      // for a/b testing, we use data which is selected,
+      // so we don't have to identify data from database.
+      // code for a/b testing:
+
+      this.dataForABTesting[this.whichQuestion - 1].hasIllegalFactory = hasIllegalFactory;
+
       this.currentQuestionData.userAnswer.hasIllegalFactory = hasIllegalFactory;
-      this.computeBoundingBoxLatLng();
-      this.storeQuestionData();
+      // this.computeBoundingBoxLatLng();
+      // this.storeQuestionData();
+      this.getTestingResult(this.shouldShowNewFilter, this.dataForABTesting);
       this.goToNextStage();
+
+      // original code:
+
+      // this.currentQuestionData.userAnswer.hasIllegalFactory = hasIllegalFactory;
+      // this.computeBoundingBoxLatLng();
+      // this.storeQuestionData();
+      // this.goToNextStage();
     },
     computeBoundingBoxLatLng() {
       // height and width of innerBoundingBox
@@ -187,16 +280,22 @@ export default {
   props: {
     whichQuestion: Number,
     goToNextStage: Function,
+    getTestingResult: Function,
   },
   emits: ['taskAisCompleted'],
 
   async created() {
+    const randomNumber = Math.floor(Math.random() * 2);
+    if (randomNumber === 1) {
+      this.shouldShowNewFilter = true;
+    }
+
     try {
       this.isLoading = true;
       await this.createClientId();
       await this.getUserToken();
       if (!this.hasSpotDiffDataInLocal) {
-        await this.getFactoriesData();
+        // await this.getFactoriesData();
         this.getFactoryCoord();
       }
       this.isLoading = false;

src/components/GameTaskA.vue

@@ -7,7 +7,7 @@
     </p>
   </div>
   <div class="identify-box border-color-blue">
-    <InnerBoundingBox class="inner-bounding-box" />
+    <InnerBoundingBox  v-if="!shouldShowNewFilter" class="inner-bounding-box" />
     <div class="address">
       {{formattedAddress}}
     </div>
@@ -25,12 +25,13 @@
 </template>
 
 <script>
+import L from 'leaflet';
 import ButtonLand from '../assets/svg-icon/button-land.svg';
 import ButtonFactory from '../assets/svg-icon/button-factory.svg';
 import ButtonUnknown from '../assets/svg-icon/button-unknown.svg';
 import PhotoYearBefore from '../assets/svg-icon/before.svg';
 import InnerBoundingBox from '../assets/svg-icon/inner-bounding-box.svg';
-import L from '../../node_modules/leaflet/dist/leaflet';
+import { addFarmlandLayer } from '../lib/FarmlandLayer';
 
 export default {
   name: 'TaskA',
@@ -72,6 +73,7 @@ export default {
     whichQuestion: Number,
     paramsOfMaps: Object,
     factoryCoord: [Object, String],
+    shouldShowNewFilter: Boolean,
   },
   methods: {
     setMap() {
@@ -94,6 +96,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.oldMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.oldMap);
+      }
     },
   },
   watch: {

src/components/GameTaskB.vue

@@ -7,7 +7,7 @@
   </div>
 
   <div class="identify-box border-color-blue">
-    <InnerBoundingBox class="inner-bounding-box" />
+    <InnerBoundingBox  v-if="!shouldShowNewFilter" class="inner-bounding-box" />
     <div class="address">
       {{ formattedAddress }}
     </div>
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import L from 'leaflet';
 import PhotoYearAfter from '../assets/svg-icon/after.svg';
 import PhotoYearBefore from '../assets/svg-icon/before.svg';
 import InnerBoundingBox from '../assets/svg-icon/inner-bounding-box.svg';
@@ -50,7 +51,7 @@ import DividerIcon from '../assets/svg-icon/divider-icon.svg';
 import HasExpansion from '../assets/svg-icon/has-expansion.svg';
 import NoExpansion from '../assets/svg-icon/no-expansion.svg';
 import ToggleSwitcher from './ToggleSwitcher.vue';
-import L from '../../node_modules/leaflet/dist/leaflet';
+import { addFarmlandLayer } from '../lib/FarmlandLayer';
 
 export default {
   name: 'TaskB',
@@ -112,6 +113,8 @@ export default {
     paramsOfMaps: Object,
     factoryCoord: [Object, String],
     landUsage: String,
+    shouldShowNewFilter: Boolean,
+
   },
   methods: {
     changePhoto() {
@@ -139,6 +142,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.newMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.newMap);
+      }
       this.oldMap = L.map('oldMap', {
         zoomControl: false,
         attributionControl: false,
@@ -158,6 +164,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.oldMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.oldMap);
+      }
     },
   },
   mounted() {

src/lib/FarmlandLayer.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-underscore-dangle */
+import L from 'leaflet';
+import { flipAgriculturalLand } from './image';
+
+const { DomEvent, Util } = L;
+
+export const FarmlandLayer = L.TileLayer.extend({
+  // Patch the Leaflet TileLayer createTile function to return a custom tile url
+  // https://github.com/Leaflet/Leaflet/blob/990d49773a129619f2eed09712867627c8e3cf60/src/layer/tile/TileLayer.js#L147
+  createTile(coords, done) {
+    const tile = document.createElement('img');
+
+    DomEvent.on(tile, 'load', Util.bind(this._tileOnLoad, this, done, tile));
+    DomEvent.on(tile, 'error', Util.bind(this._tileOnError, this, done, tile));
+
+    if (this.options.crossOrigin || this.options.crossOrigin === '') {
+      tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
+    }
+
+    // for this new option we follow the documented behavior
+    // more closely by only setting the property when string
+    if (typeof this.options.referrerPolicy === 'string') {
+      tile.referrerPolicy = this.options.referrerPolicy;
+    }
+
+    // The alt attribute is set to the empty string,
+    // allowing screen readers to ignore the decorative image tiles.
+    // https://www.w3.org/WAI/tutorials/images/decorative/
+    // https://www.w3.org/TR/html-aria/#el-img-empty-alt
+    tile.alt = '';
+
+    const originalSrc = this.getTileUrl(coords);
+
+    flipAgriculturalLand(originalSrc).then((flippedSrc) => {
+      tile.src = flippedSrc;
+    });
+
+    return tile;
+  },
+});
+
+export default FarmlandLayer;
+
+export function addFarmlandLayer(map) {
+  new FarmlandLayer(
+    'https://map.coa.gov.tw/server/rest/services/FarmlandSurvey/L13_109/MapServer/tile/{z}/{y}/{x}',
+    {
+      opacity: 0.5,
+    },
+  ).addTo(map);
+}