dotted-map 2.2.2 → 3.0.0

package/src/with-countries.js

@@ -1,180 +0,0 @@
-import proj4 from 'proj4';
-import inside from '@turf/boolean-point-in-polygon';
-import geojsonWorld from './countries.geo.json';
-import DottedMapWithoutCountries from './without-countries';
-
-const geojsonByCountry = geojsonWorld.features.reduce((countries, feature) => {
-  countries[feature.id] = feature;
-  return countries;
-}, {});
-
-const geojsonToMultiPolygons = (geojson) => {
-  const coordinates = geojson.features.reduce(
-    (poly, feature) =>
-      poly.concat(
-        feature.geometry.type === 'Polygon'
-          ? [feature.geometry.coordinates]
-          : feature.geometry.coordinates,
-      ),
-    [],
-  );
-  return { type: 'Feature', geometry: { type: 'MultiPolygon', coordinates } };
-};
-
-const CACHE = {};
-
-const DEFAULT_WORLD_REGION = {
-  lat: { min: -56, max: 71 },
-  lng: { min: -179, max: 179 },
-};
-
-const computeGeojsonBox = (geojson) => {
-  const { type, features, geometry, coordinates } = geojson;
-  if (type === 'FeatureCollection') {
-    const boxes = features.map(computeGeojsonBox);
-    return {
-      lat: {
-        min: Math.min(...boxes.map((box) => box.lat.min)),
-        max: Math.max(...boxes.map((box) => box.lat.max)),
-      },
-      lng: {
-        min: Math.min(...boxes.map((box) => box.lng.min)),
-        max: Math.max(...boxes.map((box) => box.lng.max)),
-      },
-    };
-  } else if (type == 'Feature') {
-    return computeGeojsonBox(geometry);
-  } else if (type === 'MultiPolygon') {
-    return computeGeojsonBox({
-      type: 'Polygon',
-      coordinates: coordinates.flat(),
-    });
-  } else if (type == 'Polygon') {
-    const coords = coordinates.flat();
-    const latitudes = coords.map(([_lng, lat]) => lat);
-    const longitudes = coords.map(([lng, _lat]) => lng);
-
-    return {
-      lat: {
-        min: Math.min(...latitudes),
-        max: Math.max(...latitudes),
-      },
-      lng: {
-        min: Math.min(...longitudes),
-        max: Math.max(...longitudes),
-      },
-    };
-  } else {
-    throw new Error(`Unknown geojson type ${type}`);
-  }
-};
-
-const getMap = ({
-  height = 0,
-  width = 0,
-  countries = [],
-  region,
-  grid = 'vertical',
-}) => {
-  if (height <= 0 && width <= 0) {
-    throw new Error('height or width is required');
-  }
-
-  let geojson = geojsonWorld;
-  if (countries.length > 0) {
-    geojson = {
-      type: 'FeatureCollection',
-      features: countries.map((country) => geojsonByCountry[country]),
-    };
-    if (!region) {
-      region = computeGeojsonBox(geojson);
-    }
-  } else if (!region) {
-    region = DEFAULT_WORLD_REGION;
-  }
-
-  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_RANGE = X_MAX - X_MIN;
-  const Y_RANGE = Y_MAX - Y_MIN;
-
-  if (width <= 0) {
-    width = Math.round((height * X_RANGE) / Y_RANGE);
-  } else if (height <= 0) {
-    height = Math.round((width * Y_RANGE) / X_RANGE);
-  }
-
-  const points = {};
-  const ystep = grid === 'diagonal' ? Math.sqrt(3) / 2 : 1;
-
-  for (let y = 0; y * ystep < height; y += 1) {
-    for (let x = 0; x < width; x += 1) {
-      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,
-      );
-
-      if (inside(wgs84Point, poly)) {
-        points[[x, y].join(';')] = { x: localx, y: localy };
-      }
-    }
-  }
-
-  return {
-    points,
-    X_MIN,
-    Y_MIN,
-    X_MAX,
-    Y_MAX,
-    X_RANGE,
-    Y_RANGE,
-    region,
-    grid,
-    height,
-    width,
-    ystep,
-  };
-};
-
-export const getMapJSON = (props) => JSON.stringify(getMap(props));
-
-const getCacheKey = ({
-  height = 0,
-  width = 0,
-  countries = [],
-  region,
-  grid = 'vertical',
-}) => {
-  return [
-    JSON.stringify(region),
-    grid,
-    height,
-    width,
-    JSON.stringify(countries),
-  ].join(' ');
-};
-
-function DottedMap({ avoidOuterPins = false, ...args }) {
-  const cacheKey = getCacheKey(args);
-  const map = CACHE[cacheKey] || getMap(args);
-
-  return new DottedMapWithoutCountries({ avoidOuterPins, map });
-}
-
-export default DottedMap;

package/src/without-countries.js

@@ -1,108 +0,0 @@
-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,
-    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,
-        ]);
-        if (!inside(wgs84Point, poly)) return;
-      }
-      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;
-      }
-      const x = Math.round(rawX);
-      let [localx, localy] = [x, Math.round(y) * ystep];
-      if (y % 2 === 0 && grid === 'diagonal') {
-        localx += 0.5;
-      }
-
-      const [localLng, localLat] = proj4(
-        proj4.defs('GOOGLE'),
-        proj4.defs('WGS84'),
-        [
-          (localx * X_RANGE) / width + X_MIN,
-          Y_MAX - (localy * Y_RANGE) / height,
-        ],
-      );
-
-      const pin = { x: localx, y: localy, lat: localLat, lng: localLng };
-
-      return pin;
-    },
-    getPoints() {
-      return Object.values(points);
-    },
-    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
-          }" />`;
-        } else if (shape === 'hexagon') {
-          const sqrt3radius = Math.sqrt(3) * pointRadius;
-
-          const polyPoints = [
-            [x + sqrt3radius, y - pointRadius],
-            [x + sqrt3radius, y + pointRadius],
-            [x, y + 2 * pointRadius],
-            [x - sqrt3radius, y + pointRadius],
-            [x - sqrt3radius, y - pointRadius],
-            [x, y - 2 * pointRadius],
-          ];
-
-          return `<polyline points="${polyPoints
-            .map((point) => point.join(','))
-            .join(' ')}" fill="${svgOptions.color || color}" />`;
-        }
-      };
-
-      return `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" style="background-color: ${backgroundColor}">
-        ${Object.values(points).map(getPoint).join('\n')}
-      </svg>`;
-    },
-    image: {
-      region,
-      width,
-      height,
-    },
-  };
-}
-
-export default DottedMapWithoutCountries;

package/webpack.config.js

@@ -1,37 +0,0 @@
-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/with-countries.js',
-    'without-countries': './src/without-countries.js',
-  },
-  mode: 'production',
-  output: {
-    path: path.resolve(__dirname),
-    filename: '[name].js',
-    library: {
-      name: 'dotted-map',
-      type: 'umd',
-    },
-    globalObject: 'this',
-  },
-  externals: {
-    '@turf/boolean-point-in-polygon': '@turf/boolean-point-in-polygon',
-    proj4: 'proj4',
-  },
-  plugins: [new CleanOutput()],
-};

package/without-countries.d.ts

@@ -1,70 +0,0 @@
-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

@@ -1 +0,0 @@
-!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})()}));