| @ -1,94 +1,110 @@ | |||||
| import * as $ from 'jquery'; | import * as $ from 'jquery'; | ||||
| import 'jvectormap'; | import 'jvectormap'; | ||||
| import mapboxgl from "mapbox-gl"; | |||||
| import 'jvectormap/jquery-jvectormap.css'; | import 'jvectormap/jquery-jvectormap.css'; | ||||
| import './jquery-jvectormap-world-mill.js'; | import './jquery-jvectormap-world-mill.js'; | ||||
| import { debounce } from 'lodash'; | import { debounce } from 'lodash'; | ||||
| export default (function () { | |||||
| const vectorMapInit = () => { | |||||
| if ($('#world-map-marker').length > 0) { | |||||
| // This is a hack, as the .empty() did not do the work | |||||
| $('#vmap').remove(); | |||||
| // export default (function () { | |||||
| // const vectorMapInit = () => { | |||||
| // if ($('#world-map-marker').length > 0) { | |||||
| // // This is a hack, as the .empty() did not do the work | |||||
| // $('#vmap').remove(); | |||||
| // we recreate (after removing it) the container div, to reset all the data of the map | |||||
| $('#world-map-marker').append(` | |||||
| <div | |||||
| id="vmap" | |||||
| style=" | |||||
| height: 490px; | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| background-color: transparent; | |||||
| " | |||||
| > | |||||
| </div> | |||||
| `); | |||||
| // // we recreate (after removing it) the container div, to reset all the data of the map | |||||
| // $('#world-map-marker').append(` | |||||
| // <div | |||||
| // id="vmap" | |||||
| // style=" | |||||
| // height: 490px; | |||||
| // position: relative; | |||||
| // overflow: hidden; | |||||
| // background-color: transparent; | |||||
| // " | |||||
| // > | |||||
| // </div> | |||||
| // `); | |||||
| $('#vmap').vectorMap({ | |||||
| map: 'world_mill', | |||||
| backgroundColor: '#fff', | |||||
| borderColor: '#fff', | |||||
| borderOpacity: 0.25, | |||||
| borderWidth: 0, | |||||
| color: '#e6e6e6', | |||||
| regionStyle : { | |||||
| initial : { | |||||
| fill : '#e4ecef', | |||||
| }, | |||||
| }, | |||||
| // $('#vmap').vectorMap({ | |||||
| // map: 'world_mill', | |||||
| // backgroundColor: '#fff', | |||||
| // borderColor: '#fff', | |||||
| // borderOpacity: 0.25, | |||||
| // borderWidth: 0, | |||||
| // color: '#e6e6e6', | |||||
| // regionStyle : { | |||||
| // initial : { | |||||
| // fill : '#e4ecef', | |||||
| // }, | |||||
| // }, | |||||
| markerStyle: { | |||||
| initial: { | |||||
| r: 7, | |||||
| 'fill': '#fff', | |||||
| 'fill-opacity':1, | |||||
| 'stroke': '#000', | |||||
| 'stroke-width' : 2, | |||||
| 'stroke-opacity': 0.4, | |||||
| }, | |||||
| }, | |||||
| // markerStyle: { | |||||
| // initial: { | |||||
| // r: 7, | |||||
| // 'fill': '#fff', | |||||
| // 'fill-opacity':1, | |||||
| // 'stroke': '#000', | |||||
| // 'stroke-width' : 2, | |||||
| // 'stroke-opacity': 0.4, | |||||
| // }, | |||||
| // }, | |||||
| markers : [{ | |||||
| latLng : [21.00, 78.00], | |||||
| name : 'INDIA : 350', | |||||
| }, { | |||||
| latLng : [-33.00, 151.00], | |||||
| name : 'Australia : 250', | |||||
| }, { | |||||
| latLng : [36.77, -119.41], | |||||
| name : 'USA : 250', | |||||
| }, { | |||||
| latLng : [55.37, -3.41], | |||||
| name : 'UK : 250', | |||||
| }, { | |||||
| latLng : [25.20, 55.27], | |||||
| name : 'UAE : 250', | |||||
| }], | |||||
| series: { | |||||
| regions: [{ | |||||
| values: { | |||||
| 'US': 298, | |||||
| 'SA': 200, | |||||
| 'AU': 760, | |||||
| 'IN': 200, | |||||
| 'GB': 120, | |||||
| }, | |||||
| scale: ['#03a9f3', '#02a7f1'], | |||||
| normalizeFunction: 'polynomial', | |||||
| }], | |||||
| }, | |||||
| hoverOpacity: null, | |||||
| normalizeFunction: 'linear', | |||||
| zoomOnScroll: false, | |||||
| scaleColors: ['#b6d6ff', '#005ace'], | |||||
| selectedColor: '#c9dfaf', | |||||
| selectedRegions: [], | |||||
| enableZoom: false, | |||||
| hoverColor: '#fff', | |||||
| }); | |||||
| } | |||||
| }; | |||||
| // markers : [{ | |||||
| // latLng : [21.00, 78.00], | |||||
| // name : 'INDIA : 350', | |||||
| // }, { | |||||
| // latLng : [-33.00, 151.00], | |||||
| // name : 'Australia : 250', | |||||
| // }, { | |||||
| // latLng : [36.77, -119.41], | |||||
| // name : 'USA : 250', | |||||
| // }, { | |||||
| // latLng : [55.37, -3.41], | |||||
| // name : 'UK : 250', | |||||
| // }, { | |||||
| // latLng : [25.20, 55.27], | |||||
| // name : 'UAE : 250', | |||||
| // }], | |||||
| // series: { | |||||
| // regions: [{ | |||||
| // values: { | |||||
| // 'US': 298, | |||||
| // 'SA': 200, | |||||
| // 'AU': 760, | |||||
| // 'IN': 200, | |||||
| // 'GB': 120, | |||||
| // }, | |||||
| // scale: ['#03a9f3', '#02a7f1'], | |||||
| // normalizeFunction: 'polynomial', | |||||
| // }], | |||||
| // }, | |||||
| // hoverOpacity: null, | |||||
| // normalizeFunction: 'linear', | |||||
| // zoomOnScroll: false, | |||||
| // scaleColors: ['#b6d6ff', '#005ace'], | |||||
| // selectedColor: '#c9dfaf', | |||||
| // selectedRegions: [], | |||||
| // enableZoom: false, | |||||
| // hoverColor: '#fff', | |||||
| // }); | |||||
| // } | |||||
| // }; | |||||
| vectorMapInit(); | |||||
| $(window).resize(debounce(vectorMapInit, 150)); | |||||
| })(); | |||||
| // vectorMapInit(); | |||||
| // $(window).resize(debounce(vectorMapInit, 150)); | |||||
| // })(); | |||||
| $(document).ready(() => { | |||||
| //MapBox-GL | |||||
| if (document.getElementById("world-map-marker")) { | |||||
| mapboxgl.accessToken = 'pk.eyJ1IjoiZGFzaGJvYXJlZHBhY2siLCJhIjoiY2s5bWlhZHRqMDAxazNsbnlpbXhhdDcwMSJ9.YU6cxTiRujREOAIVO6iLmA'; | |||||
| var coordinates = document.getElementById('coordinates'); | |||||
| var map = new mapboxgl.Map({ | |||||
| container: 'world-map-marker', | |||||
| style: 'mapbox://styles/mapbox/streets-v11', | |||||
| center: [0, 0], | |||||
| zoom: 1 | |||||
| }); | |||||
| } | |||||
| }); | |||||