From c5fdadb8ad483890f063e1b7305ac1e754f14a4e Mon Sep 17 00:00:00 2001 From: Florian MICHEL Date: Wed, 4 Dec 2019 16:57:19 +0100 Subject: [PATCH] refactor: refactoring code to prepare js linter --- .eslintignore | 7 + .eslintrc.json | 167 +++++++++++++++ example/components/location.js | 14 +- example/components/results.js | 77 ++++--- example/config.js | 9 +- example/data/location.js | 3 +- example/data/locations.js | 8 +- src/AbstractMap.js | 94 +++++--- src/providers/gmaps-widget/GmapsWidget.js | 121 +++++++---- src/providers/gmaps/Gmaps.js | 120 +++++++---- src/providers/gmaps/GmapsPremium.js | 55 ++--- src/providers/leaflet/Leaflet.js | 210 +++++++++++------- src/providers/mappy-widget/MappyWidget.js | 247 ++++++++++++++-------- src/providers/mappy/Mappy.js | 236 +++++++++++++-------- src/utils/dom.js | 70 +++--- src/utils/ie.js | 6 +- src/utils/loader.js | 4 +- src/utils/type.js | 2 - 18 files changed, 983 insertions(+), 467 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..74dc5f3 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,7 @@ +# Ignore coverage files +coverage +node_modules +dist +jest.config.js +webpack.config.js +test/**/*.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..45b18b6 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,167 @@ +{ + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module" + }, + "env": { + "browser": true, + "jasmine": true, + "node": true, + "protractor": true + }, + "rules": { + "strict": 2, + + // Possible Errors + "comma-dangle": 2, + "no-cond-assign": 2, + "no-console": 2, + "no-control-regex": 2, + "no-debugger": 2, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-empty-character-class": 2, + "no-empty": 2, + "no-ex-assign": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 2, + "no-extra-semi": 2, + "no-func-assign": 2, + "no-inner-declarations": 2, + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-negated-in-lhs": 2, + "no-obj-calls": 2, + "no-regex-spaces": 2, + "no-sparse-arrays": 2, + "no-unexpected-multiline": 2, + "no-unreachable": 2, + "use-isnan": 2, + "valid-jsdoc": 2, + "valid-typeof": 2, + + // Best Practices + "accessor-pairs": 2, + "block-scoped-var": 2, + "complexity": [2, 8], + "consistent-return": 2, + "curly": 2, + "default-case": 2, + "dot-location": [2, "property"], + "dot-notation": 2, + "eqeqeq": 2, + "guard-for-in": 2, + "no-alert": 2, + "no-caller": 2, + "no-case-declarations": 2, + "no-div-regex": 2, + "no-else-return": 2, + "no-empty-pattern": 2, + "no-eq-null": 2, + "no-eval": 2, + "no-extra-bind": 2, + "no-fallthrough": 2, + "no-floating-decimal": 2, + "no-implied-eval": 2, + "no-invalid-this": 2, + "no-iterator": 2, + "no-labels": 2, + "no-lone-blocks": 2, + "no-loop-func": 2, + "no-magic-numbers": [2, { "ignore": [-1, 0, 1, 100] }], + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-native-reassign": 2, + "no-new-func": 2, + "no-new-wrappers": 2, + "no-new": 2, + "no-octal-escape": 2, + "no-octal": 2, + "no-param-reassign": [2, { "props": false }], + "no-proto": 2, + "no-redeclare": 2, + "no-return-assign": 2, + "no-script-url": 2, + "no-self-compare": 2, + "no-sequences": 2, + "no-throw-literal": 2, + "no-unused-expressions": 2, + "no-useless-call": 2, + "no-useless-concat": 2, + "no-void": 2, + "no-with": 2, + "radix": [2, "as-needed"], + "vars-on-top": 2, + "wrap-iife": 2, + + // Variables + "no-catch-shadow": 2, + "no-delete-var": 2, + "no-label-var": 2, + "no-shadow-restricted-names": 2, + "no-shadow": 2, + "no-undef-init": 2, + "no-undef": 2, + "no-undefined": 2, + "no-unused-vars": 2, + "no-use-before-define": [2, "nofunc"], + + // Stylistic Issues + "array-bracket-spacing": [2, "never"], + "brace-style": 2, + "camelcase": 2, + "comma-spacing": [2, { "before": false, "after": true }], + "comma-style": [2, "last"], + "computed-property-spacing": [2, "never"], + "eol-last": 2, + "func-style": [2, "declaration"], + "indent": [2, 4, { "SwitchCase": 1 }], + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "linebreak-style": [2, "unix"], + "max-depth": [2, 5], + "new-cap": 2, + "new-parens": 2, + "no-array-constructor": 2, + "no-bitwise": 2, + "no-continue": 2, + "no-mixed-spaces-and-tabs": 2, + "no-multiple-empty-lines": [2, { "max": 1, "maxEOF": 1 }], + "no-nested-ternary": 2, + "no-new-object": 2, + "no-spaced-func": 2, + "no-trailing-spaces": 2, + "no-unneeded-ternary": [2, { "defaultAssignment": true }], + "one-var": [2, "never"], + "padded-blocks": [2, "never"], + "quote-props": [2, "as-needed"], + "quotes": [2, "single"], + "semi-spacing": 2, + "semi": [2, "always"], + "space-before-blocks": 2, + "space-before-function-paren": [2, "never"], + "space-in-parens": [2, "never"], + + // ECMAScript 6 + "arrow-body-style": [2, "always"], + "arrow-spacing": [2, { "before": true, "after": true }], + "constructor-super": 2, + "no-confusing-arrow": 2, + "no-constant-condition": 2, + "no-class-assign": 2, + "no-const-assign": 2, + "no-dupe-class-members": 2, + "no-this-before-super": 2, + "no-var": 2, + "prefer-arrow-callback": 2, + "prefer-const": 2 + }, + "globals": { + "browser": true, + "angular": true, + "inject": true, + "Keycloak": true, + "MessageFormat": true, + "moment": true + } +} diff --git a/example/components/location.js b/example/components/location.js index 9aa468d..68a28b6 100644 --- a/example/components/location.js +++ b/example/components/location.js @@ -10,10 +10,11 @@ class MyMap { init() { const script = document.createElement('script'); - script.setAttribute('src', `../dist/${this.attr.provider}.js`) + script.setAttribute('src', `../dist/${this.attr.provider}.js`); document.head.appendChild(script); script.addEventListener('load', () => { + //eslint-disable-next-line no-undef this.map = new BatMap( this.el, this.attr.apiKey, @@ -27,7 +28,11 @@ class MyMap { } initMap() { - this.map.setMapOptions(this.attr.options, this.attr.markers, this.attr.labels); + this.map.setMapOptions( + this.attr.options, + this.attr.markers, + this.attr.labels + ); this.map.initMap(); @@ -39,7 +44,10 @@ class MyMap { this.map.addMarkers(); - this.map.fitBounds(this.map.getBounds(), this.attr.options.locationZoom); + this.map.fitBounds( + this.map.getBounds(), + this.attr.options.locationZoom + ); } } diff --git a/example/components/results.js b/example/components/results.js index 8cb6dc7..de6c24b 100644 --- a/example/components/results.js +++ b/example/components/results.js @@ -10,10 +10,11 @@ class MyMap { init() { const script = document.createElement('script'); - script.setAttribute('src', `../dist/${this.attr.provider}.js`) + script.setAttribute('src', `../dist/${this.attr.provider}.js`); document.head.appendChild(script); script.addEventListener('load', () => { + //eslint-disable-next-line no-undef this.map = new BatMap( this.el, this.attr.apiKey, @@ -27,12 +28,24 @@ class MyMap { } bindEvents() { - [].forEach.call(document.querySelectorAll('[data-location]'), location => { - const id = location.getAttribute('data-location'); - location.addEventListener('click', this.handleClickOnLocation(id)); - location.addEventListener('mouseenter', this.handleMouseEnterOnLocation(id)); - location.addEventListener('mouseleave', this.handleMouseLeaveOnLocation(id)); - }); + [].forEach.call( + document.querySelectorAll('[data-location]'), + location => { + const id = location.getAttribute('data-location'); + location.addEventListener( + 'click', + this.handleClickOnLocation(id) + ); + location.addEventListener( + 'mouseenter', + this.handleMouseEnterOnLocation(id) + ); + location.addEventListener( + 'mouseleave', + this.handleMouseLeaveOnLocation(id) + ); + } + ); } initMap() { @@ -57,7 +70,12 @@ class MyMap { } setMapOptions() { - this.map.setMapOptions(this.attr.options, this.attr.markers, this.attr.labels, this.attr.clusters); + this.map.setMapOptions( + this.attr.options, + this.attr.markers, + this.attr.labels, + this.attr.clusters + ); } setPoints() { @@ -103,18 +121,19 @@ class MyMap { } geolocateOnMap() { - if(this.attr.showPosition) { - this.map.getGeolocation() + if (this.attr.showPosition) { + this.map + .getGeolocation() .then(position => { this.map.addUserMarker(position.coords, 'user'); }) .catch(error => { - console.error(`geolocateOnMap(): ${error.message}`); - return false; + throw new Error(`geolocateOnMap(): ${error.message}`); }); } else { return false; } + return true; } panToAllMarkers() { @@ -137,25 +156,31 @@ class MyMap { this.scrollToLocation(marker.id); this.highlightLocation(marker.id, true); } - } + }; } handleMouseEnterOnMarker(marker) { return () => { - if (this.getMarkerIconType(marker) !== 'active' && this.getMarkerIconType(marker) !== 'hover') { + if ( + this.getMarkerIconType(marker) !== 'active' && + this.getMarkerIconType(marker) !== 'hover' + ) { this.setIconOnMarker(marker, 'hover'); this.highlightLocation(marker.id); } - } + }; } handleMouseLeaveOnMarker(marker) { return () => { - if (this.getMarkerIconType(marker) !== 'active' && this.getMarkerIconType(marker) !== 'default') { + if ( + this.getMarkerIconType(marker) !== 'active' && + this.getMarkerIconType(marker) !== 'default' + ) { this.setIconOnMarker(marker, 'default'); this.highlightLocation(false); } - } + }; } // NOTE: LocationOnMap @@ -171,7 +196,7 @@ class MyMap { this.focusOnMarker(marker); this.highlightLocation(id, true); } - } + }; } handleMouseEnterOnLocation(id) { @@ -185,7 +210,7 @@ class MyMap { this.highlightLocation(id, true); } } - } + }; } handleMouseLeaveOnLocation(id) { @@ -199,7 +224,7 @@ class MyMap { this.highlightLocation(id, true); } } - } + }; } highlightLocation(id = false, isActive = false) { @@ -214,9 +239,12 @@ class MyMap { location.classList.add('hover'); if (isActive) { - [].forEach.call(document.querySelectorAll('[data-location]'), l => { - l.classList.remove('active'); - }); + [].forEach.call( + document.querySelectorAll('[data-location]'), + l => { + l.classList.remove('active'); + } + ); location.classList.add('active'); } } @@ -229,7 +257,8 @@ class MyMap { if (location && list) { list.scrollTo({ - top: location.offsetTop - location.clientHeight - list.offsetTop, + top: + location.offsetTop - location.clientHeight - list.offsetTop, behavior: 'smooth' }); } diff --git a/example/config.js b/example/config.js index a492f61..15e4bee 100644 --- a/example/config.js +++ b/example/config.js @@ -1,5 +1,6 @@ // Parameters +// eslint-disable-next-line no-unused-vars const mapConfig = { /* Gmaps */ provider: 'gmaps', @@ -15,13 +16,13 @@ const mapConfig = { // apiKey: '', locale: 'en', - locations: locations, + locations: locations, // eslint-disable-line no-undef showCluster: true, showLabel: true, showPosition: true, options: { zoom: 12, - locationZoom: 16, + locationZoom: 16 }, markers: { default: { @@ -54,13 +55,13 @@ const mapConfig = { width: 50, height: 50, label: { - origin: [25, 25], + origin: [25, 25], //eslint-disable-line no-magic-numbers size: 14 } } }, labels: { - origin: [19, 19], + origin: [19, 19], //eslint-disable-line no-magic-numbers color: 'white', font: 'Arial, sans-serif', size: '14px', diff --git a/example/data/location.js b/example/data/location.js index 7993353..48b4f23 100644 --- a/example/data/location.js +++ b/example/data/location.js @@ -1,5 +1,6 @@ -// Mock data LocationPage +// Mock data LocationPag +// eslint-disable-next-line no-unused-vars const locations = [ { _id: 'uuid1', diff --git a/example/data/locations.js b/example/data/locations.js index 9e870a8..daf53c9 100644 --- a/example/data/locations.js +++ b/example/data/locations.js @@ -4,15 +4,17 @@ function getRandomInRange(from, to, fixed) { return (Math.random() * (to - from) + from).toFixed(fixed) * 1; } -let locations = []; +// eslint-disable-next-line no-unused-vars +const locations = []; +//eslint-disable-next-line no-magic-numbers for (let i = 0; i < 20; i++) { const location = { _id: `uuid${i}`, localisation: { coordinates: { - latitude: getRandomInRange(45, 46, 3), - longitude: getRandomInRange(5, 7, 3) + latitude: getRandomInRange(45, 46, 3), //eslint-disable-line no-magic-numbers + longitude: getRandomInRange(5, 7, 3) //eslint-disable-line no-magic-numbers } } }; diff --git a/src/AbstractMap.js b/src/AbstractMap.js index ad64938..1433a9e 100644 --- a/src/AbstractMap.js +++ b/src/AbstractMap.js @@ -1,5 +1,3 @@ -'use strict'; - require('./style.css'); const objectAssign = require('object-assign'); const dom = require('./utils/dom'); @@ -10,8 +8,18 @@ if (typeof Promise === 'undefined') { } class AbstractMap { - constructor(domSelector, apiKey, locale, showCluster = false, showLabel = false, showPosition = false, callback = () => {}) { - this.domElement = dom.isHTMLElement(domSelector) ? domSelector : document.querySelector(domSelector); + constructor( + domSelector, + apiKey, + locale, + showCluster = false, + showLabel = false, + showPosition = false, + callback = () => {} + ) { + this.domElement = dom.isHTMLElement(domSelector) + ? domSelector + : document.querySelector(domSelector); this.domId = this.domElement.id || ''; this.apiKey = apiKey; @@ -58,6 +66,7 @@ class AbstractMap { getMarker(marker) { if (typeof marker === 'string') { + // eslint-disable-next-line no-param-reassign marker = this.markers.find(m => { return m.id === marker; }); @@ -79,11 +88,12 @@ class AbstractMap { } getMarkerIconType(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); // eslint-disable-line no-param-reassign return marker.iconType; } getGeolocation() { + // eslint-disable-next-line no-undef return new Promise((resolve, reject) => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(resolve, reject, { @@ -92,83 +102,115 @@ class AbstractMap { enableHighAccuracy: true }); } else { - reject( - new Error() - ); + reject(new Error()); } }); } initMap() { - console.error(`${this.provider} has no 'initMap' method implemented.`); + throw new Error( + `${this.provider} has no 'initMap' method implemented.` + ); } setPoint() { - console.error(`${this.provider} has no 'setPoint' method implemented.`); + throw new Error( + `${this.provider} has no 'setPoint' method implemented.` + ); } addMarkers() { - console.error(`${this.provider} has no 'addMarkers' method implemented.`); + throw new Error( + `${this.provider} has no 'addMarkers' method implemented.` + ); } addUserMarker() { - console.error(`${this.provider} has no 'addUserMarker' method implemented.`); + throw new Error( + `${this.provider} has no 'addUserMarker' method implemented.` + ); } addMarker() { - console.error(`${this.provider} has no 'addMarker' method implemented.`); + throw new Error( + `${this.provider} has no 'addMarker' method implemented.` + ); } removeMarker() { - console.error(`${this.provider} has no 'removeMarker' method implemented.`); + throw new Error( + `${this.provider} has no 'removeMarker' method implemented.` + ); } setMarkerIcons() { - console.error(`${this.provider} has no 'setMarkerIcons' method implemented.`); + throw new Error( + `${this.provider} has no 'setMarkerIcons' method implemented.` + ); } setIconOnMarker() { - console.error(`${this.provider} has no 'setIconOnMarker' method implemented.`); + throw new Error( + `${this.provider} has no 'setIconOnMarker' method implemented.` + ); } focusOnMarker() { - console.error(`${this.provider} has no 'focusOnMarker' method implemented.`); + throw new Error( + `${this.provider} has no 'focusOnMarker' method implemented.` + ); } addCluster() { - console.error(`${this.provider} has no 'addCluster' method implemented.`); + throw new Error( + `${this.provider} has no 'addCluster' method implemented.` + ); } setCenter() { - console.error(`${this.provider} has no 'setCenter' method implemented.`); + throw new Error( + `${this.provider} has no 'setCenter' method implemented.` + ); } fitBounds() { - console.error(`${this.provider} has no 'fitBounds' method implemented.`); + throw new Error( + `${this.provider} has no 'fitBounds' method implemented.` + ); } extendBounds() { - console.error(`${this.provider} has no 'extendBounds' method implemented.`); + throw new Error( + `${this.provider} has no 'extendBounds' method implemented.` + ); } getBounds() { - console.error(`${this.provider} has no 'getBounds' method implemented.`); + throw new Error( + `${this.provider} has no 'getBounds' method implemented.` + ); } panTo() { - console.error(`${this.provider} has no 'panTo' method implemented.`); + throw new Error(`${this.provider} has no 'panTo' method implemented.`); } setZoom() { - console.error(`${this.provider} has no 'setZoom' method implemented.`); + throw new Error( + `${this.provider} has no 'setZoom' method implemented.` + ); } listenZoomChange() { - console.error(`${this.provider} has no 'listenZoomChange' method implemented.`); + throw new Error( + `${this.provider} has no 'listenZoomChange' method implemented.` + ); } minifyMarkerIcons() { - console.error(`${this.provider} has no 'minifyMarkerIcons' method implemented.`); + throw new Error( + `${this.provider} has no 'minifyMarkerIcons' method implemented.` + ); } } diff --git a/src/providers/gmaps-widget/GmapsWidget.js b/src/providers/gmaps-widget/GmapsWidget.js index cbbc133..56b4cc9 100644 --- a/src/providers/gmaps-widget/GmapsWidget.js +++ b/src/providers/gmaps-widget/GmapsWidget.js @@ -1,5 +1,3 @@ -'use strict'; - /** * Google Map v3 * API Documentation: https://developers.google.com/maps/documentation/javascript/ @@ -21,7 +19,9 @@ class GoogleMap extends AbstractMap { super(...args); this.provider = 'GoogleMap'; - window.google = document.querySelector('[data-reactroot]').contentWindow.google; + window.google = document.querySelector( + '[data-reactroot]' + ).contentWindow.google; } load(callback) { @@ -32,29 +32,37 @@ class GoogleMap extends AbstractMap { return; } - callback = loaderUtils.addLoader(this.domElement, callback); + callback = loaderUtils.addLoader(this.domElement, callback); //eslint-disable-line no-param-reassign - let iframe = document.querySelector('[data-reactroot]'); - let resources = []; + const iframe = document.querySelector('[data-reactroot]'); + const resources = []; - const urlParams = '?v=3.37&language=' + this.locale + '&key=' + this.apiKey; - resources.push(domUtils.createScript('//maps.googleapis.com/maps/api/js' + urlParams)); + const urlParams = + '?v=3.37&language=' + this.locale + '&key=' + this.apiKey; + resources.push( + domUtils.createScript( + '//maps.googleapis.com/maps/api/js' + urlParams + ) + ); domUtils.addResources(iframe.contentDocument.head, resources, callback); } setMapOptions(options = {}, markers = {}, labels = {}, clusters = {}) { - this.mapOptions = objectAssign({ - center: {lat: 0, lng: 0}, - zoom: 12, - locationZoom: 16, - mapTypeControl: false, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.TOP_LEFT + this.mapOptions = objectAssign( + { + center: { lat: 0, lng: 0 }, + zoom: 12, + locationZoom: 16, + mapTypeControl: false, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.TOP_LEFT //eslint-disable-line no-undef + }, + streetViewControl: false }, - streetViewControl: false - }, options); + options + ); this.markersOptions = markers; @@ -64,12 +72,13 @@ class GoogleMap extends AbstractMap { } initMap() { - this.bounds = new google.maps.LatLngBounds(); - this.map = new google.maps.Map(this.domElement, this.mapOptions); + this.bounds = new google.maps.LatLngBounds(); //eslint-disable-line no-undef + this.map = new google.maps.Map(this.domElement, this.mapOptions); //eslint-disable-line no-undef } setPoint(location, iconType, label = false) { const point = { + //eslint-disable-next-line no-undef position: new google.maps.LatLng( location.latitude, location.longitude @@ -99,7 +108,7 @@ class GoogleMap extends AbstractMap { } addMarker(point, eventCallback = {}) { - const marker = new google.maps.Marker(point); + const marker = new google.maps.Marker(point); //eslint-disable-line no-undef this.markers.push(marker); marker.setMap(this.map); @@ -114,24 +123,38 @@ class GoogleMap extends AbstractMap { } removeMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign marker.setMap(null); - this.markers = this.markers.filter(m => m.id !== marker.id); + this.markers = this.markers.filter(m => m.id !== marker.id); //eslint-disable-line arrow-body-style } setMarkerIcons() { + const divider = 2; + Object.keys(this.markersOptions).forEach(type => { const options = this.markersOptions[type]; - const iconAnchor = options.anchor || [options.width / 2, options.height]; + const iconAnchor = options.anchor || [ + options.width / divider, + options.height + ]; const iconLabelOptions = options.label || {}; - const labelOrigin = options.origin || this.labelsOptions.origin || [options.width / 2, options.height / 2]; - + /* eslint-disable indent */ + const labelOrigin = options.origin || + this.labelsOptions.origin || [ + options.width / divider, + options.height / divider + ]; + /* eslint-enable indent */ this.icons[type] = { url: options.url, - scaledSize: new google.maps.Size(options.width, options.height), - anchor: new google.maps.Point(iconAnchor[0], iconAnchor[1]), - labelOrigin: new google.maps.Point(labelOrigin[0], labelOrigin[1]), + scaledSize: new google.maps.Size(options.width, options.height), //eslint-disable-line no-undef + anchor: new google.maps.Point(iconAnchor[0], iconAnchor[1]), //eslint-disable-line no-undef + //eslint-disable-next-line no-undef + labelOrigin: new google.maps.Point( + labelOrigin[0], + labelOrigin[1] + ), labelOptions: this.getLabelOptions(iconLabelOptions) }; }); @@ -147,7 +170,7 @@ class GoogleMap extends AbstractMap { } setIconOnMarker(marker, iconType, isLabeled = true) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign const icon = this.icons[iconType]; if (marker && icon) { @@ -169,7 +192,7 @@ class GoogleMap extends AbstractMap { } focusOnMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign this.map.setZoom(this.mapOptions.locationZoom); this.panTo(marker.position); @@ -180,6 +203,7 @@ class GoogleMap extends AbstractMap { const point = { id: `${id}`, map: this.map, + //eslint-disable-next-line no-undef position: new google.maps.LatLng( position.latitude, position.longitude @@ -187,7 +211,7 @@ class GoogleMap extends AbstractMap { iconType }; - this.userMarker = new google.maps.Marker(point); + this.userMarker = new google.maps.Marker(point); //eslint-disable-line no-undef this.setIconOnMarker(this.userMarker, iconType, false); this.extendBounds(this.userMarker.position); @@ -197,17 +221,26 @@ class GoogleMap extends AbstractMap { addCluster() { const icon = this.icons.cluster; - this.cluster = new MarkerClusterer(this.map, this.markers, objectAssign({ - averageCenter: true, - styles: [{ - url: icon.url, - width: icon.scaledSize.width, - height: icon.scaledSize.height, - iconAnchor: icon.anchor, - textSize: icon.labelOptions.size, - textColor: icon.labelOptions.color - }] - }, this.clustersOptions)); + this.cluster = new MarkerClusterer( + this.map, + this.markers, + objectAssign( + { + averageCenter: true, + styles: [ + { + url: icon.url, + width: icon.scaledSize.width, + height: icon.scaledSize.height, + iconAnchor: icon.anchor, + textSize: icon.labelOptions.size, + textColor: icon.labelOptions.color + } + ] + }, + this.clustersOptions + ) + ); } setZoom(zoom) { @@ -245,6 +278,7 @@ class GoogleMap extends AbstractMap { }); } + //eslint-disable-next-line no-magic-numbers minifyMarkerIcons(zoom, breakZoom = 8, minifier = 0.8) { if (zoom < breakZoom + 1 && !this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { @@ -262,7 +296,6 @@ class GoogleMap extends AbstractMap { this.isMinifiedMarkerIcons = false; } } - } window.GoogleMap = GoogleMap; diff --git a/src/providers/gmaps/Gmaps.js b/src/providers/gmaps/Gmaps.js index 76e861b..4d2be33 100644 --- a/src/providers/gmaps/Gmaps.js +++ b/src/providers/gmaps/Gmaps.js @@ -1,5 +1,3 @@ -'use strict'; - /** * Google Map v3 * API Documentation: https://developers.google.com/maps/documentation/javascript/ @@ -33,35 +31,47 @@ class GoogleMap extends AbstractMap { return; } - callback = loaderUtils.addLoader(this.domElement, callback); + callback = loaderUtils.addLoader(this.domElement, callback); //eslint-disable-line no-param-reassign - let resources = []; + const resources = []; let urlParams = '?v=3.37&language=' + this.locale; if (Array.isArray(this.apiKey)) { urlParams = urlParams + '&client=' + this.apiKey[0]; - urlParams = urlParams + gmapsPremium.sign('https://maps.googleapis.com/maps/api/js', this.apiKey[1]); + urlParams = + urlParams + + gmapsPremium.sign( + 'https://maps.googleapis.com/maps/api/js', + this.apiKey[1] + ); } else { urlParams = urlParams + '&key=' + this.apiKey; } - resources.push(domUtils.createScript('//maps.googleapis.com/maps/api/js' + urlParams)); + resources.push( + domUtils.createScript( + '//maps.googleapis.com/maps/api/js' + urlParams + ) + ); domUtils.addResources(document.head, resources, callback); } setMapOptions(options = {}, markers = {}, labels = {}, clusters = {}) { - this.mapOptions = objectAssign({ - center: {lat: 0, lng: 0}, - zoom: 12, - locationZoom: 16, - mapTypeControl: false, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.TOP_LEFT + this.mapOptions = objectAssign( + { + center: { lat: 0, lng: 0 }, + zoom: 12, + locationZoom: 16, + mapTypeControl: false, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.TOP_LEFT //eslint-disable-line no-undef + }, + streetViewControl: false }, - streetViewControl: false - }, options); + options + ); this.markersOptions = markers; @@ -71,13 +81,13 @@ class GoogleMap extends AbstractMap { } initMap() { - this.bounds = new google.maps.LatLngBounds(); - this.map = new google.maps.Map(this.domElement, this.mapOptions); + this.bounds = new google.maps.LatLngBounds(); //eslint-disable-line no-undef + this.map = new google.maps.Map(this.domElement, this.mapOptions); //eslint-disable-line no-undef } setPoint(location, iconType, label = false) { const point = { - position: new google.maps.LatLng( + position: new google.maps.LatLng( //eslint-disable-line no-undef location.localisation.coordinates.latitude, location.localisation.coordinates.longitude ), @@ -106,7 +116,7 @@ class GoogleMap extends AbstractMap { } addMarker(point, eventCallback = {}) { - const marker = new google.maps.Marker(point); + const marker = new google.maps.Marker(point); //eslint-disable-line no-undef this.markers.push(marker); marker.setMap(this.map); @@ -121,24 +131,39 @@ class GoogleMap extends AbstractMap { } removeMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign marker.setMap(null); - this.markers = this.markers.filter(m => m.id !== marker.id); + this.markers = this.markers.filter(m => m.id !== marker.id); //eslint-disable-line arrow-body-style } setMarkerIcons() { + const divider = 2; + Object.keys(this.markersOptions).forEach(type => { const options = this.markersOptions[type]; - const iconAnchor = options.anchor || [options.width / 2, options.height]; - const iconLabelOptions = options.label || {}; - const labelOrigin = options.origin || this.labelsOptions.origin || [options.width / 2, options.height / 2]; + const iconAnchor = options.anchor || [ + options.width / divider, + options.height + ]; + const iconLabelOptions = options.label || {}; + /* eslint-disable indent */ + const labelOrigin = options.origin || + this.labelsOptions.origin || [ + options.width / divider, + options.height / divider + ]; + /* eslint-enable indent */ this.icons[type] = { url: options.url, - scaledSize: new google.maps.Size(options.width, options.height), - anchor: new google.maps.Point(iconAnchor[0], iconAnchor[1]), - labelOrigin: new google.maps.Point(labelOrigin[0], labelOrigin[1]), + scaledSize: new google.maps.Size(options.width, options.height), //eslint-disable-line no-undef + anchor: new google.maps.Point(iconAnchor[0], iconAnchor[1]), //eslint-disable-line no-undef + //eslint-disable-next-line no-undef + labelOrigin: new google.maps.Point( + labelOrigin[0], + labelOrigin[1] + ), labelOptions: this.getLabelOptions(iconLabelOptions) }; }); @@ -154,7 +179,7 @@ class GoogleMap extends AbstractMap { } setIconOnMarker(marker, iconType, isLabeled = true) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign const icon = this.icons[iconType]; if (marker && icon) { @@ -176,7 +201,7 @@ class GoogleMap extends AbstractMap { } focusOnMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign this.map.setZoom(this.mapOptions.locationZoom); this.panTo(marker.position); @@ -187,6 +212,7 @@ class GoogleMap extends AbstractMap { const point = { id: `${id}`, map: this.map, + //eslint-disable-next-line no-undef position: new google.maps.LatLng( position.latitude, position.longitude @@ -194,7 +220,7 @@ class GoogleMap extends AbstractMap { iconType }; - this.userMarker = new google.maps.Marker(point); + this.userMarker = new google.maps.Marker(point); //eslint-disable-line no-undef this.setIconOnMarker(this.userMarker, iconType, false); this.extendBounds(this.userMarker.position); @@ -204,17 +230,26 @@ class GoogleMap extends AbstractMap { addCluster() { const icon = this.icons.cluster; - this.cluster = new MarkerClusterer(this.map, this.markers, objectAssign({ - averageCenter: true, - styles: [{ - url: icon.url, - width: icon.scaledSize.width, - height: icon.scaledSize.height, - iconAnchor: icon.anchor, - textSize: icon.labelOptions.size, - textColor: icon.labelOptions.color - }] - }, this.clustersOptions)); + this.cluster = new MarkerClusterer( + this.map, + this.markers, + objectAssign( + { + averageCenter: true, + styles: [ + { + url: icon.url, + width: icon.scaledSize.width, + height: icon.scaledSize.height, + iconAnchor: icon.anchor, + textSize: icon.labelOptions.size, + textColor: icon.labelOptions.color + } + ] + }, + this.clustersOptions + ) + ); } setZoom(zoom) { @@ -252,6 +287,7 @@ class GoogleMap extends AbstractMap { }); } + //eslint-disable-next-line no-magic-numbers minifyMarkerIcons(zoom, breakZoom = 8, minifier = 0.8) { if (zoom < breakZoom + 1 && !this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { diff --git a/src/providers/gmaps/GmapsPremium.js b/src/providers/gmaps/GmapsPremium.js index 8c9f463..e444a64 100644 --- a/src/providers/gmaps/GmapsPremium.js +++ b/src/providers/gmaps/GmapsPremium.js @@ -1,6 +1,4 @@ -'use strict'; - -/* globals Buffer */ +/* globals Buffer */ //eslint-disable-line no-redeclare const crypto = require('crypto'); const url = require('url'); @@ -10,7 +8,7 @@ const url = require('url'); * * @param {string} safeEncodedString The code you want to translate * from a web safe form. - * @return {string} + * @return {string} raw string */ function removeWebSafe(safeEncodedString) { return safeEncodedString.replace(/-/g, '+').replace(/_/g, '/'); @@ -21,21 +19,23 @@ function removeWebSafe(safeEncodedString) { * * @param {string} encodedString The code you want to translate to a * web safe form. - * @return {string} + * @return {string} normalized string */ function makeWebSafe(encodedString) { return encodedString.replace(/\+/g, '-').replace(/\//g, '_'); } - /** +/** * Takes a base64 code and decodes it. * * @param {string} code The encoded data. - * @return {string} + * @return {string} decoded string */ function decodeBase64Hash(code) { - // "new Buffer(...)" is deprecated. Use Buffer.from if it exists. - return Buffer.from ? Buffer.from(code, 'base64') : new Buffer(code, 'base64'); + // "new Buffer(...)" is deprecated. Use Buffer.from if it exists. + return Buffer.from + ? Buffer.from(code, 'base64') + : new Buffer(code, 'base64'); } /** @@ -43,24 +43,29 @@ function decodeBase64Hash(code) { * * @param {string} key Your unique secret key. * @param {string} data The url to sign. - * @return {string} + * @return {string} signed string */ function encodeBase64Hash(key, data) { - return crypto.createHmac('sha1', key).update(data).digest('base64'); + return crypto + .createHmac('sha1', key) + .update(data) + .digest('base64'); } module.exports = { - /** - * Sign a URL using a secret key. - * - * @param {string} path The url you want to sign. - * @param {string} secret Your unique secret key. - * @return {string} - */ - sign: function sign(path, secret) { - const uri = url.parse(path); - const safeSecret = decodeBase64Hash(removeWebSafe(secret)); - const hashedSignature = makeWebSafe(encodeBase64Hash(safeSecret, uri.path)); - return '&signature=' + hashedSignature; - } -} + /** + * Sign a URL using a secret key. + * + * @param {string} path The url you want to sign. + * @param {string} secret Your unique secret key. + * @return {string} signed string + */ + sign: function sign(path, secret) { + const uri = url.parse(path); + const safeSecret = decodeBase64Hash(removeWebSafe(secret)); + const hashedSignature = makeWebSafe( + encodeBase64Hash(safeSecret, uri.path) + ); + return '&signature=' + hashedSignature; + } +}; diff --git a/src/providers/leaflet/Leaflet.js b/src/providers/leaflet/Leaflet.js index 65a1459..8e0ed51 100644 --- a/src/providers/leaflet/Leaflet.js +++ b/src/providers/leaflet/Leaflet.js @@ -1,5 +1,3 @@ -'use strict'; - /** * Leaflet Map * API Documentation: http://leafletjs.com/reference.html @@ -32,38 +30,63 @@ class Leaflet extends AbstractMap { return; } - callback = loaderUtils.addLoader(this.domElement, callback); - - domUtils.addResources(document.head, [ - domUtils.createStyle('//unpkg.com/leaflet@1.5.1/dist/leaflet.css'), - domUtils.createScript('//unpkg.com/leaflet@1.5.1/dist/leaflet.js') - ], () => { - const resources = []; - - if (this.showCluster) { - resources.push(domUtils.createStyle('//unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css')); - resources.push(domUtils.createStyle('//unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css')); - resources.push(domUtils.createScript('//unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js')); + callback = loaderUtils.addLoader(this.domElement, callback); //eslint-disable-line no-param-reassign + + domUtils.addResources( + document.head, + [ + domUtils.createStyle( + '//unpkg.com/leaflet@1.5.1/dist/leaflet.css' + ), + domUtils.createScript( + '//unpkg.com/leaflet@1.5.1/dist/leaflet.js' + ) + ], + () => { + const resources = []; + + if (this.showCluster) { + resources.push( + domUtils.createStyle( + '//unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css' + ) + ); + resources.push( + domUtils.createStyle( + '//unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css' + ) + ); + resources.push( + domUtils.createScript( + '//unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js' + ) + ); + } + + domUtils.addResources(document.head, resources, () => { + L = window.L; + callback(); + }); } - - domUtils.addResources(document.head, resources, () => { - L = window.L; - callback(); - }); - }); + ); } setMapOptions(options = {}, markers = {}, labels = {}, clusters = {}) { - this.mapOptions = objectAssign({ - center: [0, 0], - zoom: 12, - locationZoom: 16, - tileLayerProvider: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - tileLayerOptions: { - attribution: '© OpenStreetMap', - maxZoom: 19 - } - }, options); + this.mapOptions = objectAssign( + { + center: [0, 0], + zoom: 12, + locationZoom: 16, + tileLayerProvider: + '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + tileLayerOptions: { + attribution: + '© OpenStreetMap', + maxZoom: 19 + } + }, + options + ); this.markersOptions = markers; @@ -73,10 +96,13 @@ class Leaflet extends AbstractMap { } initMap() { - this.bounds = new L.latLngBounds([]); + this.bounds = new L.latLngBounds([]); //eslint-disable-line new-cap this.map = L.map(this.domElement, this.mapOptions); - L.tileLayer(this.mapOptions.tileLayerProvider, this.mapOptions.tileLayerOptions).addTo(this.map); + L.tileLayer( + this.mapOptions.tileLayerProvider, + this.mapOptions.tileLayerOptions + ).addTo(this.map); } setPoint(location, iconType, label = false) { const point = { @@ -130,16 +156,21 @@ class Leaflet extends AbstractMap { } removeMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign marker.removeFrom(this.map); - this.markers = this.markers.filter(m => m.id !== marker.id); + this.markers = this.markers.filter(m => m.id !== marker.id); //eslint-disable-line arrow-body-style } setMarkerIcons() { + const divider = 2; + Object.keys(this.markersOptions).forEach(type => { const options = this.markersOptions[type]; - const iconAnchor = options.anchor || [options.width / 2, options.height]; + const iconAnchor = options.anchor || [ + options.width / divider, + options.height + ]; const iconLabelOptions = options.label || {}; this.icons[type] = new L.Icon({ @@ -153,8 +184,16 @@ class Leaflet extends AbstractMap { } getLabelOptions(options) { + const divider = 2; + return { - origin: options.origin || this.labelsOptions.origin || [options.width / 2, options.height / 2], + /* eslint-disable indent */ + origin: options.origin || + this.labelsOptions.origin || [ + options.width / divider, + options.height / divider + ], + /* eslint-enable indent */ color: options.color || this.labelsOptions.color, font: options.font || this.labelsOptions.font, size: options.size || this.labelsOptions.size, @@ -163,7 +202,7 @@ class Leaflet extends AbstractMap { } setIconOnMarker(marker, iconType, isLabeled = true) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign const icon = this.icons[iconType]; if (marker && icon) { @@ -183,12 +222,14 @@ class Leaflet extends AbstractMap { span.style.fontWeight = `${labelOptions.weight}`; span.style.fontSize = `${labelOptions.size}px`; - marker.setIcon(new L.DivIcon({ - className: icon.options.className, - iconSize: icon.options.iconSize, - iconAnchor: icon.options.iconAnchor, - html: `${span.outerHTML}` - })); + marker.setIcon( + new L.DivIcon({ + className: icon.options.className, + iconSize: icon.options.iconSize, + iconAnchor: icon.options.iconAnchor, + html: `${span.outerHTML}` + }) + ); } else { marker.setIcon(icon); } @@ -196,14 +237,17 @@ class Leaflet extends AbstractMap { } focusOnMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign this.panTo(marker.getLatLng()); } addUserMarker(position, iconType, id = 0) { if (position) { - this.userMarker = new L.marker(L.latLng(position.latitude, position.longitude)); + //eslint-disable-next-line new-cap + this.userMarker = new L.marker( + L.latLng(position.latitude, position.longitude) + ); this.userMarker.id = id; this.userMarker.addTo(this.map); @@ -215,31 +259,38 @@ class Leaflet extends AbstractMap { addCluster() { const icon = this.icons.cluster; - this.cluster = L.markerClusterGroup(objectAssign({ - showCoverageOnHover: false, - zoomToBoundsOnClick: true, - spiderfyOnMaxZoom: true, - iconCreateFunction: cluster => { - const labelOptions = icon.options.labelOptions; - const span = document.createElement('span'); - span.innerText = cluster.getChildCount(); - - span.style.position = 'absolute'; - span.style.top = `${labelOptions.origin[0]}px`; - span.style.left = `${labelOptions.origin[1]}px`; - span.style.transform = 'translate(-50%, -50%)'; - span.style.color = `${labelOptions.color}`; - span.style.fontFamily = `${labelOptions.font}`; - span.style.fontWeight = `${labelOptions.weight}`; - span.style.fontSize = `${labelOptions.size}px`; - - return L.divIcon({ - className: icon.options.className, - html: `` + span.outerHTML, - iconSize: icon.options.iconSize - }); - } - }, this.clustersOptions)); + this.cluster = L.markerClusterGroup( + objectAssign( + { + showCoverageOnHover: false, + zoomToBoundsOnClick: true, + spiderfyOnMaxZoom: true, + iconCreateFunction: cluster => { + const labelOptions = icon.options.labelOptions; + const span = document.createElement('span'); + span.innerText = cluster.getChildCount(); + + span.style.position = 'absolute'; + span.style.top = `${labelOptions.origin[0]}px`; + span.style.left = `${labelOptions.origin[1]}px`; + span.style.transform = 'translate(-50%, -50%)'; + span.style.color = `${labelOptions.color}`; + span.style.fontFamily = `${labelOptions.font}`; + span.style.fontWeight = `${labelOptions.weight}`; + span.style.fontSize = `${labelOptions.size}px`; + + return L.divIcon({ + className: icon.options.className, + html: + `` + + span.outerHTML, + iconSize: icon.options.iconSize + }); + } + }, + this.clustersOptions + ) + ); this.map.addLayer(this.cluster); } @@ -263,7 +314,7 @@ class Leaflet extends AbstractMap { fitBounds(bounds, zoom = this.mapOptions.zoom) { if (this.markers.length > 1) { this.map.fitBounds(bounds, { - padding: L.point(50, 50), + padding: L.point(50, 50), //eslint-disable-line no-magic-numbers maxZoom: zoom }); } else { @@ -281,18 +332,25 @@ class Leaflet extends AbstractMap { }); } + //eslint-disable-next-line no-magic-numbers minifyMarkerIcons(zoom, breakZoom = 8, minifier = 0.8) { if (zoom < breakZoom + 1 && !this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] * minifier, size[1] * minifier]; + this.icons[key].options.iconSize = [ + size[0] * minifier, + size[1] * minifier + ]; }); this.isMinifiedMarkerIcons = true; this.updateAllMarkerIconsOnMap(); } else if (zoom > breakZoom && this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] / minifier, size[1] / minifier]; + this.icons[key].options.iconSize = [ + size[0] / minifier, + size[1] / minifier + ]; }); this.isMinifiedMarkerIcons = false; this.updateAllMarkerIconsOnMap(); @@ -305,7 +363,11 @@ class Leaflet extends AbstractMap { }); if (this.userMarker) { - this.setIconOnMarker(this.userMarker, this.userMarker.iconType, false); + this.setIconOnMarker( + this.userMarker, + this.userMarker.iconType, + false + ); } } } diff --git a/src/providers/mappy-widget/MappyWidget.js b/src/providers/mappy-widget/MappyWidget.js index b2c5272..4dfdcc5 100644 --- a/src/providers/mappy-widget/MappyWidget.js +++ b/src/providers/mappy-widget/MappyWidget.js @@ -1,5 +1,3 @@ -'use strict'; - /** * Mappy Map * API Documentation: https://leafletjs.com/reference-1.0.3.html @@ -32,51 +30,85 @@ class Mappy extends AbstractMap { return; } - callback = loaderUtils.addLoader(this.domElement, callback); - - domUtils.addResources(iframe.contentDocument.head, [ - domUtils.createStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css'), - domUtils.createScript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js') - ], () => { - const resources = [ - domUtils.createScript('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.js'), - domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.css') - ]; - - if (this.showCluster) { - resources.push(domUtils.createScript('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/leaflet.markercluster.js')); - resources.push(domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.Default.css')); - resources.push(domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.css')); + callback = loaderUtils.addLoader(this.domElement, callback); //eslint-disable-line no-param-reassign + + domUtils.addResources( + iframe.contentDocument.head, + [ + domUtils.createStyle( + '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' + ), + domUtils.createScript( + '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js' + ) + ], + () => { + const resources = [ + domUtils.createScript( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.js' + ), + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.css' + ) + ]; + + if (this.showCluster) { + resources.push( + domUtils.createScript( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/leaflet.markercluster.js' + ) + ); + resources.push( + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.Default.css' + ) + ); + resources.push( + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.css' + ) + ); + } + + domUtils.addResources( + iframe.contentDocument.head, + resources, + () => { + L = document.querySelector('[data-reactroot]') + .contentWindow.L; + L.Mappy.setImgPath( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/images/' + ); + callback(); + } + ); } - - domUtils.addResources(iframe.contentDocument.head, resources, () => { - L = document.querySelector('[data-reactroot]').contentWindow.L; - L.Mappy.setImgPath('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/images/'); - callback(); - }); - }); + ); } setMapOptions(options = {}, markers = {}, labels = {}, clusters = {}) { - this.mapOptions = objectAssign({ - clientId: this.apiKey, - locale: this.locale, - center: [0, 0], - zoom: 12, - locationZoom: 16, - scrollwheel: true, - mapTypeControl: false, - panControl: false, - zoomControl: true, - scaleControl: false, - streetViewControl: false, - layersControl: { - publicTransport: false, - traffic: true, - viewMode: true, - trafficLegend: true - } - }, options); + this.mapOptions = objectAssign( + { + clientId: this.apiKey, + locale: this.locale, + center: [0, 0], + zoom: 12, + locationZoom: 16, + scrollwheel: true, + mapTypeControl: false, + panControl: false, + zoomControl: true, + scaleControl: false, + streetViewControl: false, + layersControl: { + publicTransport: false, + traffic: true, + viewMode: true, + trafficLegend: true + } + }, + options + ); this.markersOptions = markers; @@ -86,16 +118,13 @@ class Mappy extends AbstractMap { } initMap() { - this.bounds = new L.latLngBounds([]); + this.bounds = new L.latLngBounds([]); //eslint-disable-line new-cap this.map = new L.Mappy.Map(this.domElement, this.mapOptions); } setPoint(location, iconType, label = false) { const point = { - position: L.latLng( - location.latitude, - location.longitude - ), + position: L.latLng(location.latitude, location.longitude), id: `${location._id}`, location, iconType @@ -142,19 +171,24 @@ class Mappy extends AbstractMap { } resetBounds() { - this.bounds = new L.latLngBounds([]); + this.bounds = new L.latLngBounds([]); //eslint-disable-line new-cap } removeMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign marker.removeFrom(this.map); - this.markers = this.markers.filter(m => m.id !== marker.id); + this.markers = this.markers.filter(m => m.id !== marker.id); //eslint-disable-line arrow-body-style } setMarkerIcons() { + const divider = 2; + Object.keys(this.markersOptions).forEach(type => { const options = this.markersOptions[type]; - const iconAnchor = options.anchor || [options.width / 2, options.height]; + const iconAnchor = options.anchor || [ + options.width / divider, + options.height + ]; const iconLabelOptions = options.label || {}; this.icons[type] = new L.Icon({ @@ -168,8 +202,16 @@ class Mappy extends AbstractMap { } getLabelOptions(options) { + const divider = 2; + return { - origin: options.origin || this.labelsOptions.origin || [options.width / 2, options.height / 2], + /* eslint-disable indent */ + origin: options.origin || + this.labelsOptions.origin || [ + options.width / divider, + options.height / divider + ], + /* eslint-enable indent */ color: options.color || this.labelsOptions.color, font: options.font || this.labelsOptions.font, size: options.size || this.labelsOptions.size, @@ -178,7 +220,7 @@ class Mappy extends AbstractMap { } setIconOnMarker(marker, iconType, isLabeled = true) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign const icon = this.icons[iconType]; if (marker && icon) { @@ -198,12 +240,14 @@ class Mappy extends AbstractMap { span.style.fontWeight = `${labelOptions.weight}`; span.style.fontSize = `${labelOptions.size}px`; - marker.setIcon(new L.DivIcon({ - className: icon.options.className, - iconSize: icon.options.iconSize, - iconAnchor: icon.options.iconAnchor, - html: `${span.outerHTML}` - })); + marker.setIcon( + new L.DivIcon({ + className: icon.options.className, + iconSize: icon.options.iconSize, + iconAnchor: icon.options.iconAnchor, + html: `${span.outerHTML}` + }) + ); } else { marker.setIcon(icon); } @@ -211,14 +255,17 @@ class Mappy extends AbstractMap { } focusOnMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign this.panTo(marker.getLatLng()); } addUserMarker(position, iconType, id = 0) { if (position) { - this.userMarker = new L.marker(L.latLng(position.latitude, position.longitude)); + //eslint-disable-next-line new-cap + this.userMarker = new L.marker( + L.latLng(position.latitude, position.longitude) + ); this.userMarker.id = id; this.userMarker.addTo(this.map); @@ -230,31 +277,38 @@ class Mappy extends AbstractMap { addCluster() { const icon = this.icons.cluster; - this.cluster = L.markerClusterGroup(objectAssign({ - showCoverageOnHover: false, - zoomToBoundsOnClick: true, - spiderfyOnMaxZoom: true, - iconCreateFunction: cluster => { - const labelOptions = icon.options.labelOptions; - const span = document.createElement('span'); - span.innerText = cluster.getChildCount(); - - span.style.position = 'absolute'; - span.style.top = `${labelOptions.origin[0]}px`; - span.style.left = `${labelOptions.origin[1]}px`; - span.style.transform = 'translate(-50%, -50%)'; - span.style.color = `${labelOptions.color}`; - span.style.fontFamily = `${labelOptions.font}`; - span.style.fontWeight = `${labelOptions.weight}`; - span.style.fontSize = `${labelOptions.size}px`; - - return L.divIcon({ - className: icon.options.className, - html: `` + span.outerHTML, - iconSize: icon.options.iconSize - }); - } - }, this.clustersOptions)); + this.cluster = L.markerClusterGroup( + objectAssign( + { + showCoverageOnHover: false, + zoomToBoundsOnClick: true, + spiderfyOnMaxZoom: true, + iconCreateFunction: cluster => { + const labelOptions = icon.options.labelOptions; + const span = document.createElement('span'); + span.innerText = cluster.getChildCount(); + + span.style.position = 'absolute'; + span.style.top = `${labelOptions.origin[0]}px`; + span.style.left = `${labelOptions.origin[1]}px`; + span.style.transform = 'translate(-50%, -50%)'; + span.style.color = `${labelOptions.color}`; + span.style.fontFamily = `${labelOptions.font}`; + span.style.fontWeight = `${labelOptions.weight}`; + span.style.fontSize = `${labelOptions.size}px`; + + return L.divIcon({ + className: icon.options.className, + html: + `` + + span.outerHTML, + iconSize: icon.options.iconSize + }); + } + }, + this.clustersOptions + ) + ); this.map.addLayer(this.cluster); } @@ -278,7 +332,7 @@ class Mappy extends AbstractMap { fitBounds(bounds, zoom = this.mapOptions.zoom) { if (this.markers.length > 1) { this.map.fitBounds(bounds, { - padding: L.point(50, 50), + padding: L.point(50, 50), //eslint-disable-line no-magic-numbers maxZoom: zoom }); } else { @@ -296,18 +350,25 @@ class Mappy extends AbstractMap { }); } + //eslint-disable-next-line no-magic-numbers minifyMarkerIcons(zoom, breakZoom = 8, minifier = 0.8) { if (zoom < breakZoom + 1 && !this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] * minifier, size[1] * minifier]; + this.icons[key].options.iconSize = [ + size[0] * minifier, + size[1] * minifier + ]; }); this.isMinifiedMarkerIcons = true; this.updateAllMarkerIconsOnMap(); } else if (zoom > breakZoom && this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] / minifier, size[1] / minifier]; + this.icons[key].options.iconSize = [ + size[0] / minifier, + size[1] / minifier + ]; }); this.isMinifiedMarkerIcons = false; this.updateAllMarkerIconsOnMap(); @@ -320,7 +381,11 @@ class Mappy extends AbstractMap { }); if (this.userMarker) { - this.setIconOnMarker(this.userMarker, this.userMarker.iconType, false); + this.setIconOnMarker( + this.userMarker, + this.userMarker.iconType, + false + ); } } } diff --git a/src/providers/mappy/Mappy.js b/src/providers/mappy/Mappy.js index ec2f528..57e4f36 100644 --- a/src/providers/mappy/Mappy.js +++ b/src/providers/mappy/Mappy.js @@ -1,5 +1,3 @@ -'use strict'; - /** * Mappy Map * API Documentation: https://leafletjs.com/reference-1.0.3.html @@ -31,51 +29,80 @@ class Mappy extends AbstractMap { return; } - callback = loaderUtils.addLoader(this.domElement, callback); - - domUtils.addResources(document.head, [ - domUtils.createStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css'), - domUtils.createScript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js') - ], () => { - const resources = [ - domUtils.createScript('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.js'), - domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.css') - ]; - - if (this.showCluster) { - resources.push(domUtils.createScript('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/leaflet.markercluster.js')); - resources.push(domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.Default.css')); - resources.push(domUtils.createStyle('//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.css')); + callback = loaderUtils.addLoader(this.domElement, callback); //eslint-disable-line no-param-reassign + + domUtils.addResources( + document.head, + [ + domUtils.createStyle( + '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' + ), + domUtils.createScript( + '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js' + ) + ], + () => { + const resources = [ + domUtils.createScript( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.js' + ), + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/L.Mappy.css' + ) + ]; + + if (this.showCluster) { + resources.push( + domUtils.createScript( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/leaflet.markercluster.js' + ) + ); + resources.push( + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.Default.css' + ) + ); + resources.push( + domUtils.createStyle( + '//d11lbkprc85eyb.cloudfront.net/plugins/mappy/7.5.0/MarkerCluster.css' + ) + ); + } + + domUtils.addResources(document.head, resources, () => { + L = window.L; + L.Mappy.setImgPath( + '//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/images/' + ); + callback(); + }); } - - domUtils.addResources(document.head, resources, () => { - L = window.L; - L.Mappy.setImgPath('//d11lbkprc85eyb.cloudfront.net/Mappy/7.5.0/images/'); - callback(); - }); - }); + ); } setMapOptions(options = {}, markers = {}, labels = {}, clusters = {}) { - this.mapOptions = objectAssign({ - clientId: this.apiKey, - locale: this.locale, - center: [0, 0], - zoom: 12, - locationZoom: 16, - scrollwheel: true, - mapTypeControl: false, - panControl: false, - zoomControl: true, - scaleControl: false, - streetViewControl: false, - layersControl: { - publicTransport: false, - traffic: true, - viewMode: true, - trafficLegend: true - } - }, options); + this.mapOptions = objectAssign( + { + clientId: this.apiKey, + locale: this.locale, + center: [0, 0], + zoom: 12, + locationZoom: 16, + scrollwheel: true, + mapTypeControl: false, + panControl: false, + zoomControl: true, + scaleControl: false, + streetViewControl: false, + layersControl: { + publicTransport: false, + traffic: true, + viewMode: true, + trafficLegend: true + } + }, + options + ); this.markersOptions = markers; @@ -85,7 +112,7 @@ class Mappy extends AbstractMap { } initMap() { - this.bounds = new L.latLngBounds([]); + this.bounds = new L.latLngBounds([]); //eslint-disable-line new-cap this.map = new L.Mappy.Map(this.domElement, this.mapOptions); } @@ -141,16 +168,21 @@ class Mappy extends AbstractMap { } removeMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign marker.removeFrom(this.map); - this.markers = this.markers.filter(m => m.id !== marker.id); + this.markers = this.markers.filter(m => m.id !== marker.id); //eslint-disable-line arrow-body-style } setMarkerIcons() { + const divider = 2; + Object.keys(this.markersOptions).forEach(type => { const options = this.markersOptions[type]; - const iconAnchor = options.anchor || [options.width / 2, options.height]; + const iconAnchor = options.anchor || [ + options.width / divider, + options.height + ]; const iconLabelOptions = options.label || {}; this.icons[type] = new L.Icon({ @@ -164,8 +196,16 @@ class Mappy extends AbstractMap { } getLabelOptions(options) { + const divider = 2; + return { - origin: options.origin || this.labelsOptions.origin || [options.width / 2, options.height / 2], + /* eslint-disable indent */ + origin: options.origin || + this.labelsOptions.origin || [ + options.width / divider, + options.height / divider + ], + /* eslint-enable indent */ color: options.color || this.labelsOptions.color, font: options.font || this.labelsOptions.font, size: options.size || this.labelsOptions.size, @@ -174,7 +214,7 @@ class Mappy extends AbstractMap { } setIconOnMarker(marker, iconType, isLabeled = true) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign const icon = this.icons[iconType]; if (marker && icon) { @@ -194,12 +234,14 @@ class Mappy extends AbstractMap { span.style.fontWeight = `${labelOptions.weight}`; span.style.fontSize = `${labelOptions.size}px`; - marker.setIcon(new L.DivIcon({ - className: icon.options.className, - iconSize: icon.options.iconSize, - iconAnchor: icon.options.iconAnchor, - html: `${span.outerHTML}` - })); + marker.setIcon( + new L.DivIcon({ + className: icon.options.className, + iconSize: icon.options.iconSize, + iconAnchor: icon.options.iconAnchor, + html: `${span.outerHTML}` + }) + ); } else { marker.setIcon(icon); } @@ -207,14 +249,17 @@ class Mappy extends AbstractMap { } focusOnMarker(marker) { - marker = this.getMarker(marker); + marker = this.getMarker(marker); //eslint-disable-line no-param-reassign this.panTo(marker.getLatLng()); } addUserMarker(position, iconType, id = 0) { if (position) { - this.userMarker = new L.marker(L.latLng(position.latitude, position.longitude)); + //eslint-disable-next-line new-cap + this.userMarker = new L.marker( + L.latLng(position.latitude, position.longitude) + ); this.userMarker.id = id; this.userMarker.addTo(this.map); @@ -226,31 +271,38 @@ class Mappy extends AbstractMap { addCluster() { const icon = this.icons.cluster; - this.cluster = L.markerClusterGroup(objectAssign({ - showCoverageOnHover: false, - zoomToBoundsOnClick: true, - spiderfyOnMaxZoom: true, - iconCreateFunction: cluster => { - const labelOptions = icon.options.labelOptions; - const span = document.createElement('span'); - span.innerText = cluster.getChildCount(); - - span.style.position = 'absolute'; - span.style.top = `${labelOptions.origin[0]}px`; - span.style.left = `${labelOptions.origin[1]}px`; - span.style.transform = 'translate(-50%, -50%)'; - span.style.color = `${labelOptions.color}`; - span.style.fontFamily = `${labelOptions.font}`; - span.style.fontWeight = `${labelOptions.weight}`; - span.style.fontSize = `${labelOptions.size}px`; - - return L.divIcon({ - className: icon.options.className, - html: `` + span.outerHTML, - iconSize: icon.options.iconSize - }); - } - }, this.clustersOptions)); + this.cluster = L.markerClusterGroup( + objectAssign( + { + showCoverageOnHover: false, + zoomToBoundsOnClick: true, + spiderfyOnMaxZoom: true, + iconCreateFunction: cluster => { + const labelOptions = icon.options.labelOptions; + const span = document.createElement('span'); + span.innerText = cluster.getChildCount(); + + span.style.position = 'absolute'; + span.style.top = `${labelOptions.origin[0]}px`; + span.style.left = `${labelOptions.origin[1]}px`; + span.style.transform = 'translate(-50%, -50%)'; + span.style.color = `${labelOptions.color}`; + span.style.fontFamily = `${labelOptions.font}`; + span.style.fontWeight = `${labelOptions.weight}`; + span.style.fontSize = `${labelOptions.size}px`; + + return L.divIcon({ + className: icon.options.className, + html: + `` + + span.outerHTML, + iconSize: icon.options.iconSize + }); + } + }, + this.clustersOptions + ) + ); this.map.addLayer(this.cluster); } @@ -274,7 +326,7 @@ class Mappy extends AbstractMap { fitBounds(bounds, zoom = this.mapOptions.zoom) { if (this.markers.length > 1) { this.map.fitBounds(bounds, { - padding: L.point(50, 50), + padding: L.point(50, 50), //eslint-disable-line no-magic-numbers maxZoom: zoom }); } else { @@ -291,19 +343,25 @@ class Mappy extends AbstractMap { return callback(this.map.getZoom()); }); } - + //eslint-disable-next-line no-magic-numbers minifyMarkerIcons(zoom, breakZoom = 8, minifier = 0.8) { if (zoom < breakZoom + 1 && !this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] * minifier, size[1] * minifier]; + this.icons[key].options.iconSize = [ + size[0] * minifier, + size[1] * minifier + ]; }); this.isMinifiedMarkerIcons = true; this.updateAllMarkerIconsOnMap(); } else if (zoom > breakZoom && this.isMinifiedMarkerIcons) { [].forEach.call(Object.keys(this.icons), key => { const size = this.icons[key].options.iconSize; - this.icons[key].options.iconSize = [size[0] / minifier, size[1] / minifier]; + this.icons[key].options.iconSize = [ + size[0] / minifier, + size[1] / minifier + ]; }); this.isMinifiedMarkerIcons = false; this.updateAllMarkerIconsOnMap(); @@ -316,7 +374,11 @@ class Mappy extends AbstractMap { }); if (this.userMarker) { - this.setIconOnMarker(this.userMarker, this.userMarker.iconType, false); + this.setIconOnMarker( + this.userMarker, + this.userMarker.iconType, + false + ); } } } diff --git a/src/utils/dom.js b/src/utils/dom.js index b0b39a5..a1d4cbc 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -1,26 +1,24 @@ -'use strict'; - -let ieUtils = require('./ie'); -let isAString = require('./type').isAString; -let isDefined = require('simple-js-validator').isDefined; +const ieUtils = require('./ie'); +const isAString = require('./type').isAString; +const isDefined = require('simple-js-validator').isDefined; module.exports = { - addScript: function (domElement, src) { + addScript: function(domElement, src) { domElement.appendChild(this.createScript(src)); }, - addStyle: function (domElement, href) { + addStyle: function(domElement, href) { domElement.appendChild(this.createStyle(href)); }, - addResources: function (domElement, resources, callback) { + addResources: function(domElement, resources, callback) { let nbLoaded = 0; if (resources.length === 0) { callback(); } - resources.forEach((resource) => { + resources.forEach(resource => { ieUtils.addLoadListener(resource, () => { nbLoaded++; @@ -33,8 +31,8 @@ module.exports = { }); }, - createScript: function (src) { - let script = document.createElement('script'); + createScript: function(src) { + const script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; script.async = true; @@ -42,36 +40,42 @@ module.exports = { return script; }, - createStyle: function (href) { - let style = document.createElement('link'); + createStyle: function(href) { + const style = document.createElement('link'); style.rel = 'stylesheet'; style.href = href; return style; }, - isHTMLElement: function (obj) { - return obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string'; + isHTMLElement: function(obj) { + return ( + obj && + typeof obj === 'object' && + obj !== null && + obj.nodeType === 1 && + typeof obj.nodeName === 'string' + ); }, - extractTextAndCssClasses: function (str) { - let div = document.createElement('div'); + extractTextAndCssClasses: function(str) { + const div = document.createElement('div'); div.innerHTML = str; - let textContent = div.textContent || div.innerText || ''; + const textContent = div.textContent || div.innerText || ''; let classes = ''; if (isDefined(div.firstChild)) { classes = div.firstChild.className; } - return {textContent: textContent, classes: classes}; + return { textContent: textContent, classes: classes }; }, // use a memoized version of the function as il would be silly to repeat the operation - getStyleFromCss: memoize((cssClass) => { + getStyleFromCss: memoize(cssClass => { const div = document.createElement('div'); div.className = cssClass; document.body.appendChild(div); - let style = window.getComputedStyle(div); - let result = { + const style = window.getComputedStyle(div); + const result = { top: extractPx(style.top), left: extractPx(style.left) }; @@ -85,25 +89,23 @@ function extractPx(str) { const pxValue = str.replace('px', '').replace('"', ''); const pxNumber = parseInt(pxValue); return isFinite(pxNumber) ? pxNumber : 0; - } else { - return 0; } + + return 0; } function memoize(func) { const cache = {}; - return (arg) => { + return arg => { if (arg in cache) { return cache[arg]; - } else { - try { - let result = func(arg); - cache[arg] = result; - return result; - } catch (e) { - console.log(e); - return null; - } + } + try { + const result = func(arg); + cache[arg] = result; + return result; + } catch (e) { + throw new Error(e); } }; } diff --git a/src/utils/ie.js b/src/utils/ie.js index c694b33..abdf7f5 100644 --- a/src/utils/ie.js +++ b/src/utils/ie.js @@ -1,11 +1,9 @@ -'use strict'; - module.exports = { delete: function(obj, key) { try { delete obj[key]; - } catch(e) { - obj[key] = undefined; + } catch (e) { + obj[key] = undefined; //eslint-disable-line no-undefined } }, addEventListener: function(domElement, event, callback, useCapture) { diff --git a/src/utils/loader.js b/src/utils/loader.js index 54f2cc4..28294e2 100644 --- a/src/utils/loader.js +++ b/src/utils/loader.js @@ -1,10 +1,8 @@ -'use strict'; - const defaultLoaderClass = 'batmap__spinner'; module.exports = { addLoader: function(domElement, callback, customClass = null) { - let loader = document.createElement('div'); + const loader = document.createElement('div'); if (typeof customClass === 'string') { loader.className = customClass; diff --git a/src/utils/type.js b/src/utils/type.js index f33f386..1f842ab 100644 --- a/src/utils/type.js +++ b/src/utils/type.js @@ -1,5 +1,3 @@ -'use strict'; - function isAString(something) { return typeof something === 'string'; }