diff --git a/README.md b/README.md index 8de33f6..3fada2c 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ const map = new DottedMap({ countries: ['FRA'] // look into `countries.geo.json` to see which keys to use. You can also omit this parameter and the whole world will be used region: { lat: { min, max }, lng: { min, max } }, // if not present, it will fit the countries (and if no country is specified, the whole world) grid: 'vertical' | 'diagonal', // how points should be aligned + avoidOuterPins: false | true, // if it's true, prevent adding pins when they are outside of region/countries }); // Add some points/change the color of existing points diff --git a/index.js b/index.js index e3a20e2..f5c872b 100644 --- a/index.js +++ b/index.js @@ -61,7 +61,7 @@ const computeGeojsonBox = (geojson) => { } }; -function DottedMap({ height = 0, width = 0, countries = [], region, grid = 'vertical' }) { +function DottedMap({ height = 0, width = 0, countries = [], region, grid = 'vertical', avoidOuterPins = false }) { if (height <= 0 && width <= 0) { throw new Error('height or width is required'); } @@ -118,6 +118,10 @@ function DottedMap({ height = 0, width = 0, countries = [], region, grid = 'vert return { addPin({ lat, lng, data, svgOptions }) { 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') {