I get the mentioned error when I try to add a Pin to the map. Here is the code I use:

const createMap = () => {
    const map = new DottedMap({
        height: 60,
        grid: 'vertical',
        avoidOuterPins: true,
    });

    map.addPin({
        lat: 40.73061,
        lng: -73.935242,
        svgOptions: { color: '#d6ff79', radius: 0.4 },
    });

    mapSvg.value = map.getSVG({
        shape: 'circle',
        color: '#FFFFFF',
        radius: 0.22,
    });
}

onMounted(() => createMap())

And this is the error message:

Uncaught (in promise) ReferenceError: poly is not defined
    at Object.getPin (index.js:1:259757)
    at Object.addPin (index.js:1:259544)
    at createMap (statistics.vue:23:11)
    at statistics.vue:38:21
    at chunk-FBYHIP7F.js:4075:88
    at callWithErrorHandling (chunk-FBYHIP7F.js:1565:18)
    at callWithAsyncErrorHandling (chunk-FBYHIP7F.js:1573:17)
    at hook.__weh.hook.__weh (chunk-FBYHIP7F.js:4055:19)
    at flushPostFlushCbs (chunk-FBYHIP7F.js:1731:41)
    at flushJobs (chunk-FBYHIP7F.js:1769:5)

Any ideas?

Is it possible to add custom popup on markers of the hexagon map?
I am just gonna add a popup on markers on the hexagon map.

Hey, first, thanks for making this available 💐

I am trying to use this in a Vite React project, but when I import with

import DottedMap from "dotted-map";

I get this error:

__vite_ssr_import_5__.default is not a constructor

Any idea what might be the cause?

Thanks @NTag for this nice library!

What is the license of this code? Could you add a LICENSE.txt file?

Mateusz

Hey there! First of all - love this project!

I'd need to use similar dots around an orthographic globe projection. I'm wondering: Is there any way that this could be used more flexibly?

Things I tried: getting the JSON string to be used as geoJson. Draw the SVG using d3js. So far, I did not really succeed.

What would be the easiest way to change the project of this and/or make this more flexible?

Thanks so much,
Arne

I would like to have a "map of europe" for example.

Problem

I want to make a world map with small hexagons representing countries and on hover, I want to display the country data in a tooltip.

Thanks for the nice library!
One problem i stumbled upon: I tried to extract a specific country svg, but when i do, it throws an error:

`c:\dev\map>node map.js
c:\dev\map\node_modules\dotted-map\index.js:1
(function (exports, require, module, __filename, __dirname) { !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("proj4"),require("@turf/boolean-point-in-polygon")):"function"==typeof define&&define.amd?define(["proj4","@turf/boolean-point-in-polygon"],t):"object"==typeof exports?exports["dotted-map"]=t(require("proj4"),require("@turf/boolean-point-in-polygon")):e["dotted-map"]=t(e.proj4,e["@turf/boolean-point-in-polygon"])}(this,(function(e,t){return(()=>{"use strict";var o={573:(e,t,o)=>{o.r(t),o.d(t,{default:()=>c,getMapJSON:()=>u});var r=o(25),a=o.n(r),n=o(620),i=o.n(n);const p=JSON.parse('{"type":"FeatureCollection","features":[{"type":"Feature","id":"AFG","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631

TypeError: a.flat is not a function
at m (c:\dev\map\node_modules\dotted-map\index.js:1:257925)
at m (c:\dev\map\node_modules\dotted-map\index.js:1:257823)
at Array.map ()
at m (c:\dev\map\node_modules\dotted-map\index.js:1:257617)
at l (c:\dev\map\node_modules\dotted-map\index.js:1:258331)
at new c (c:\dev\map\node_modules\dotted-map\index.js:1:259269)
at Object. (c:\dev\map\map.js:26:13)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)`

This is the code i used:

`const fs = require('fs');
const DottedMap = require('dotted-map').default;

const map = new DottedMap(
{
height: 100,
grid: 'vertical',//'diagonal',
countries: ['FRA'],
avoidOuterPins: false
});

const svgMap = map.getSVG({
radius: 0.22,
color: '#000',
shape: 'circle',
});

console.log(svgMap);`

Did i miss something?