dotted-map 2.1.0 → 2.2.2

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "dotted-map",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "description": "Create a SVG map filled with dots for the world or countries",
-  "main": "./dist/index.bundle.js",
+  "main": "./index.js",
   "exports": {
-    ".": "./dist/index.bundle.js",
-    "./without-countries": "./dist/without-countries.bundle.js"
+    ".": "./index.js",
+    "./without-countries": "./without-countries.js"
   },
-  "module": "./src/index.js",
+  "module": "./src/with-countries.js",
   "scripts": {
     "build": "webpack"
   },

package/src/{index.js → with-countries.js}

@@ -1,7 +1,7 @@
 import proj4 from 'proj4';
 import inside from '@turf/boolean-point-in-polygon';
 import geojsonWorld from './countries.geo.json';
-import DottedMapWithoutCountries from './index-without-countries';
+import DottedMapWithoutCountries from './without-countries';
 
 const geojsonByCountry = geojsonWorld.features.reduce((countries, feature) => {
   countries[feature.id] = feature;
@@ -11,7 +11,11 @@ const geojsonByCountry = geojsonWorld.features.reduce((countries, feature) => {
 const geojsonToMultiPolygons = (geojson) => {
   const coordinates = geojson.features.reduce(
     (poly, feature) =>
-      poly.concat(feature.geometry.type === 'Polygon' ? [feature.geometry.coordinates] : feature.geometry.coordinates),
+      poly.concat(
+        feature.geometry.type === 'Polygon'
+          ? [feature.geometry.coordinates]
+          : feature.geometry.coordinates,
+      ),
     [],
   );
   return { type: 'Feature', geometry: { type: 'MultiPolygon', coordinates } };
@@ -41,7 +45,10 @@ const computeGeojsonBox = (geojson) => {
   } else if (type == 'Feature') {
     return computeGeojsonBox(geometry);
   } else if (type === 'MultiPolygon') {
-    return computeGeojsonBox({ type: 'Polygon', coordinates: coordinates.flat() });
+    return computeGeojsonBox({
+      type: 'Polygon',
+      coordinates: coordinates.flat(),
+    });
   } else if (type == 'Polygon') {
     const coords = coordinates.flat();
     const latitudes = coords.map(([_lng, lat]) => lat);
@@ -62,7 +69,13 @@ const computeGeojsonBox = (geojson) => {
   }
 };
 
-const getMap = ({ height = 0, width = 0, countries = [], region, grid = 'vertical' }) => {
+const getMap = ({
+  height = 0,
+  width = 0,
+  countries = [],
+  region,
+  grid = 'vertical',
+}) => {
   if (height <= 0 && width <= 0) {
     throw new Error('height or width is required');
   }
@@ -82,8 +95,14 @@ const getMap = ({ height = 0, width = 0, countries = [], region, grid = 'vertica
 
   const poly = geojsonToMultiPolygons(geojson);
 
-  const [X_MIN, Y_MIN] = proj4(proj4.defs('GOOGLE'), [region.lng.min, region.lat.min]);
-  const [X_MAX, Y_MAX] = proj4(proj4.defs('GOOGLE'), [region.lng.max, region.lat.max]);
+  const [X_MIN, Y_MIN] = proj4(proj4.defs('GOOGLE'), [
+    region.lng.min,
+    region.lat.min,
+  ]);
+  const [X_MAX, Y_MAX] = proj4(proj4.defs('GOOGLE'), [
+    region.lng.max,
+    region.lat.max,
+  ]);
   const X_RANGE = X_MAX - X_MIN;
   const Y_RANGE = Y_MAX - Y_MIN;
 
@@ -101,8 +120,15 @@ const getMap = ({ height = 0, width = 0, countries = [], region, grid = 'vertica
       const localx = y % 2 === 0 && grid === 'diagonal' ? x + 0.5 : x;
       const localy = y * ystep;
 
-      const pointGoogle = [(localx / width) * X_RANGE + X_MIN, Y_MAX - (localy / height) * Y_RANGE];
-      const wgs84Point = proj4(proj4.defs('GOOGLE'), proj4.defs('WGS84'), pointGoogle);
+      const pointGoogle = [
+        (localx / width) * X_RANGE + X_MIN,
+        Y_MAX - (localy / height) * Y_RANGE,
+      ];
+      const wgs84Point = proj4(
+        proj4.defs('GOOGLE'),
+        proj4.defs('WGS84'),
+        pointGoogle,
+      );
 
       if (inside(wgs84Point, poly)) {
         points[[x, y].join(';')] = { x: localx, y: localy };
@@ -122,16 +148,31 @@ const getMap = ({ height = 0, width = 0, countries = [], region, grid = 'vertica
     grid,
     height,
     width,
+    ystep,
   };
 };
 
 export const getMapJSON = (props) => JSON.stringify(getMap(props));
 
-function DottedMap({ avoidOuterPins = false, ...args }) {
-  const map = getMap(args);
+const getCacheKey = ({
+  height = 0,
+  width = 0,
+  countries = [],
+  region,
+  grid = 'vertical',
+}) => {
+  return [
+    JSON.stringify(region),
+    grid,
+    height,
+    width,
+    JSON.stringify(countries),
+  ].join(' ');
+};
 
-  // const cacheKey = [JSON.stringify(region), grid, height, width, JSON.stringify(countries)].join(' ');
-  // const map = CACHE[cacheKey];
+function DottedMap({ avoidOuterPins = false, ...args }) {
+  const cacheKey = getCacheKey(args);
+  const map = CACHE[cacheKey] || getMap(args);
 
   return new DottedMapWithoutCountries({ avoidOuterPins, map });
 }

package/src/{index-without-countries.js → without-countries.js}

@@ -2,16 +2,41 @@ import proj4 from 'proj4';
 import inside from '@turf/boolean-point-in-polygon';
 
 function DottedMapWithoutCountries({ map, avoidOuterPins = false }) {
-  const { points, X_MIN, Y_MAX, X_RANGE, Y_RANGE, region, grid, width, height } = map;
+  const {
+    points,
+    X_MIN,
+    Y_MAX,
+    X_RANGE,
+    Y_RANGE,
+    region,
+    grid,
+    width,
+    height,
+    ystep,
+  } = map;
 
   return {
     addPin({ lat, lng, data, svgOptions }) {
+      const pin = this.getPin({ lat, lng });
+      const point = { ...pin, data, svgOptions };
+
+      points[[point.x, point.y].join(';')] = point;
+
+      return point;
+    },
+    getPin({ lat, lng }) {
       const [googleX, googleY] = proj4(proj4.defs('GOOGLE'), [lng, lat]);
       if (avoidOuterPins) {
-        const wgs84Point = proj4(proj4.defs('GOOGLE'), proj4.defs('WGS84'), [googleX, googleY]);
+        const wgs84Point = proj4(proj4.defs('GOOGLE'), proj4.defs('WGS84'), [
+          googleX,
+          googleY,
+        ]);
         if (!inside(wgs84Point, poly)) return;
       }
-      let [rawX, rawY] = [(width * (googleX - X_MIN)) / X_RANGE, (height * (Y_MAX - googleY)) / Y_RANGE];
+      let [rawX, rawY] = [
+        (width * (googleX - X_MIN)) / X_RANGE,
+        (height * (Y_MAX - googleY)) / Y_RANGE,
+      ];
       const y = Math.round(rawY / ystep);
       if (y % 2 === 0 && grid === 'diagonal') {
         rawX -= 0.5;
@@ -22,20 +47,34 @@ function DottedMapWithoutCountries({ map, avoidOuterPins = false }) {
         localx += 0.5;
       }
 
-      const point = { x: localx, y: localy, data, svgOptions };
+      const [localLng, localLat] = proj4(
+        proj4.defs('GOOGLE'),
+        proj4.defs('WGS84'),
+        [
+          (localx * X_RANGE) / width + X_MIN,
+          Y_MAX - (localy * Y_RANGE) / height,
+        ],
+      );
 
-      points[[x, y].join(';')] = point;
+      const pin = { x: localx, y: localy, lat: localLat, lng: localLng };
 
-      return point;
+      return pin;
     },
     getPoints() {
       return Object.values(points);
     },
-    getSVG({ shape = 'circle', color = 'current', backgroundColor = 'transparent', radius = 0.5 }) {
+    getSVG({
+      shape = 'circle',
+      color = 'current',
+      backgroundColor = 'transparent',
+      radius = 0.5,
+    }) {
       const getPoint = ({ x, y, svgOptions = {} }) => {
         const pointRadius = svgOptions.radius || radius;
         if (shape === 'circle') {
-          return `<circle cx="${x}" cy="${y}" r="${pointRadius}" fill="${svgOptions.color || color}" />`;
+          return `<circle cx="${x}" cy="${y}" r="${pointRadius}" fill="${
+            svgOptions.color || color
+          }" />`;
         } else if (shape === 'hexagon') {
           const sqrt3radius = Math.sqrt(3) * pointRadius;
 
@@ -48,9 +87,9 @@ function DottedMapWithoutCountries({ map, avoidOuterPins = false }) {
             [x, y - 2 * pointRadius],
           ];
 
-          return `<polyline points="${polyPoints.map((point) => point.join(',')).join(' ')}" fill="${
-            svgOptions.color || color
-          }" />`;
+          return `<polyline points="${polyPoints
+            .map((point) => point.join(','))
+            .join(' ')}" fill="${svgOptions.color || color}" />`;
         }
       };
 

package/webpack.config.js

@@ -1,23 +1,37 @@
 const path = require('path');
+const fs = require('fs');
+
+class CleanOutput {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('CleanOutput', () => {
+      if (fs.existsSync('./index.js')) {
+        fs.rmSync('./index.js');
+      }
+      if (fs.existsSync('./without-countries.js')) {
+        fs.rmSync('./without-countries.js');
+      }
+    });
+  }
+}
 
 module.exports = {
   entry: {
-    index: './src/index.js',
-    ['without-countries']: './src/index-without-countries.js',
+    index: './src/with-countries.js',
+    'without-countries': './src/without-countries.js',
   },
   mode: 'production',
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].bundle.js',
+    path: path.resolve(__dirname),
+    filename: '[name].js',
     library: {
       name: 'dotted-map',
       type: 'umd',
     },
     globalObject: 'this',
-    clean: true,
   },
   externals: {
     '@turf/boolean-point-in-polygon': '@turf/boolean-point-in-polygon',
     proj4: 'proj4',
   },
+  plugins: [new CleanOutput()],
 };

package/without-countries.d.ts

@@ -0,0 +1,70 @@
+namespace DottedMapWithoutCountriesLib {
+  interface Region {
+    lat: { min: number; max: number };
+    lng: { min: number; max: number };
+  }
+
+  interface Map {
+    points: Point[];
+    X_MIN: number;
+    Y_MAX: number;
+    X_RANGE: number;
+    Y_RANGE: number;
+    region: Region;
+    grid: 'vertical' | 'diagonal';
+    width: number;
+    height: number;
+    ystep: number;
+  }
+
+  interface Settings extends MapSettings {
+    map: Map;
+    avoidOuterPins?: false | true;
+  }
+
+  interface SvgOptions {
+    color?: string;
+    radius?: number;
+  }
+
+  interface Pin {
+    lat: number;
+    lng: number;
+    data?: any;
+    svgOptions?: SvgOptions;
+  }
+
+  interface SvgSettings {
+    shape?: 'circle' | 'hexagon';
+    color?: string;
+    backgroundColor?: string;
+    radius?: number;
+  }
+
+  type Point = {
+    x: number;
+    y: number;
+    lat: number;
+    lng: number;
+    data?: any;
+    svgOptions?: SvgOptions;
+  };
+}
+
+export default class DottedMapWithoutCountries {
+  constructor(settings: DottedMapWithoutCountriesLib.Settings);
+
+  addPin(
+    pin: DottedMapWithoutCountriesLib.Pin,
+  ): DottedMapWithoutCountriesLib.Point;
+  getPin(
+    pin: DottedMapWithoutCountriesLib.Pin,
+  ): DottedMapWithoutCountriesLib.Point;
+  getPoints(): DottedMapWithoutCountriesLib.Point[];
+  getSVG(settings: DottedMapWithoutCountriesLib.SvgSettings): string;
+  image: {
+    region: DottedMap.Region;
+    width: number;
+    height: number;
+  };
+}

package/without-countries.js

@@ -0,0 +1 @@
+!function(o,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("proj4"),require("@turf/boolean-point-in-polygon")):"function"==typeof define&&define.amd?define(["proj4","@turf/boolean-point-in-polygon"],e):"object"==typeof exports?exports["dotted-map"]=e(require("proj4"),require("@turf/boolean-point-in-polygon")):o["dotted-map"]=e(o.proj4,o["@turf/boolean-point-in-polygon"])}(this,(function(o,e){return(()=>{"use strict";var t={620:o=>{o.exports=e},25:e=>{e.exports=o}},n={};function r(o){var e=n[o];if(void 0!==e)return e.exports;var i=n[o]={exports:{}};return t[o](i,i.exports,r),i.exports}r.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return r.d(e,{a:e}),e},r.d=(o,e)=>{for(var t in e)r.o(e,t)&&!r.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{default:()=>a});var o=r(25),e=r.n(o),t=r(620),n=r.n(t);const a=function({map:o,avoidOuterPins:t=!1}){const{points:r,X_MIN:i,Y_MAX:a,X_RANGE:s,Y_RANGE:l,region:p,grid:u,width:d,height:c,ystep:f}=o;return{addPin({lat:o,lng:e,data:t,svgOptions:n}){const i={...this.getPin({lat:o,lng:e}),data:t,svgOptions:n};return r[[i.x,i.y].join(";")]=i,i},getPin({lat:o,lng:r}){const[p,g]=e()(e().defs("GOOGLE"),[r,o]);if(t){const o=e()(e().defs("GOOGLE"),e().defs("WGS84"),[p,g]);if(!n()(o,poly))return}let[y,v]=[d*(p-i)/s,c*(a-g)/l];const b=Math.round(v/f);b%2==0&&"diagonal"===u&&(y-=.5);const j=Math.round(y);let[x,O]=[j,Math.round(b)*f];b%2==0&&"diagonal"===u&&(x+=.5);const[h,m]=e()(e().defs("GOOGLE"),e().defs("WGS84"),[x*s/d+i,a-O*l/c]);return{x,y:O,lat:m,lng:h}},getPoints:()=>Object.values(r),getSVG:({shape:o="circle",color:e="current",backgroundColor:t="transparent",radius:n=.5})=>`<svg viewBox="0 0 ${d} ${c}" xmlns="http://www.w3.org/2000/svg" style="background-color: ${t}">\n        ${Object.values(r).map((({x:t,y:r,svgOptions:i={}})=>{const a=i.radius||n;if("circle"===o)return`<circle cx="${t}" cy="${r}" r="${a}" fill="${i.color||e}" />`;if("hexagon"===o){const o=Math.sqrt(3)*a;return`<polyline points="${[[t+o,r-a],[t+o,r+a],[t,r+2*a],[t-o,r+a],[t-o,r-a],[t,r-2*a]].map((o=>o.join(","))).join(" ")}" fill="${i.color||e}" />`}})).join("\n")}\n      </svg>`,image:{region:p,width:d,height:c}}}})(),i})()}));