feat(MySQL): spatial fields support (#165)

* feat: POINT field support

* feat(MySQL): support to LINESTRING, POLYGON and GEOMETRY fields

* refactor: removed links from map attribution

* feat(MySQL): support to MULTIPOINT, MULTILINESTRING, MULTIPOLYGON and GEOMCOLLECTION fields

* test: temporary fix on Windows tests

src/renderer/components/BaseMap.vue

@@ -0,0 +1,108 @@
+<template>
+   <div id="map" class="map" />
+</template>
+<script>
+import L from 'leaflet';
+import {
+   point,
+   lineString,
+   polygon
+} from '@turf/helpers';
+import { getArrayDepth } from 'common/libs/getArrayDepth';
+
+export default {
+   name: 'BaseMap',
+   props: {
+      points: [Object, Array],
+      isMultiSpatial: Boolean
+   },
+   data () {
+      return {
+         map: null,
+         markers: [],
+         center: null
+      };
+   },
+   mounted () {
+      if (this.isMultiSpatial) {
+         for (const element of this.points)
+            this.markers.push(this.getMarkers(element));
+      }
+      else {
+         this.markers = this.getMarkers(this.points);
+
+         if (!Array.isArray(this.points))
+            this.center = [this.points.y, this.points.x];
+      }
+
+      this.map = L.map('map', {
+         center: this.center || [0, 0],
+         zoom: 15,
+         minZoom: 1,
+         attributionControl: false
+      });
+
+      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
+
+      const geoJsonObj = L.geoJSON(this.markers, {
+         style: function () {
+            return {
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            };
+         },
+         pointToLayer: function (feature, latlng) {
+            return L.circleMarker(latlng, {
+               radius: 7,
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            });
+         }
+      }).addTo(this.map);
+
+      const southWest = L.latLng(-90, -180);
+      const northEast = L.latLng(90, 180);
+      const bounds = L.latLngBounds(southWest, northEast);
+      this.map.setMaxBounds(bounds);
+
+      if (!this.center) this.map.fitBounds(geoJsonObj.getBounds());
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+         attribution: '&copy; <b>OpenStreetMap</b>'
+      }).addTo(this.map);
+   },
+   methods: {
+      getMarkers (points) {
+         if (Array.isArray(points)) {
+            if (getArrayDepth(points) === 1)
+               return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+            else
+               return polygon(points.map(arr => arr.reduce((acc, curr) => [...acc, [curr.x, curr.y]], [])));
+         }
+         else
+            return point([points.x, points.y]);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+.map{
+   height: 400px;
+}
+
+.marker-icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $primary-color;
+    border-radius: 50%;
+    box-shadow: 0 0 5px 1px darken($body-font-color-dark, 40%);
+}
+</style>