dotted-map

You can limit to one (or several) countries (France, Italy, UK)

Installation

Requires NodeJS ≥ 13.

``bash
npm i dotted-map
`

Usage

`js
const fs = require('fs');
const DottedMap = require('dotted-map').default;
// Or in the browser: import DottedMap from 'dotted-map';

const map = new DottedMap({ height: 60, grid: 'diagonal' });

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

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

fs.writeFileSync('./map.svg', svgMap);
`

If you use a large number of points (height or width ≥ 100), it may take a bit of time to compute the map (from 1 to 30 seconds depending on your device and number of points). This is why the result grid is cached. If you don’t change the parameters of new DottedMap, the next maps will be a lot faster to generate. You can however change the pins and the SVG options.

$3

Because the previous operation can be expansive (especially if you want to use DottedMap in a browser or React Native app), it’s possible to precompute the grid. You will still be able to add pins on-the-fly, in real time. This also allows you to import a lighter version of the library. This is especially useful if you always use the same map parameters, but only change the pins.

`js
// So you do this first step only once, when developing your app
const getMapJSON = require('dotted-map').getMapJSON;

// This function accepts the same arguments as DottedMap in the example above.
const mapJsonString = getMapJSON({ height: 60, grid: 'diagonal' });
console.log(mapJsonString);

// This string will contain everything about the grid. You will need to copy
// and include it in your front.
`

`js
// Now we are in your app, let’s imagine it’s a React app

// This import doesn’t include coordinates of countries: it’s lighter
// that 'dotted-map', so especially useful in fronts.
// However, you must give it a map you have pre-computed before.
import DottedMap from 'dotted-map/without-countries';

// Basically myMap.js contains something like:
//
// const MyMapString = 'the string mapJsonString that you got on the first step';
// export default MyMapString;
import MyMapString from './myMap';

const MyComponent = () => {
// It’s safe to re-create the map at each render, because of the
// pre-computation it’s super fast ⚡️
const map = new DottedMap({ map: JSON.parse(MyMapString) });

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

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

return (



data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}} />