diff --git a/package-lock.json b/package-lock.json index 71eb2a5..8a5b7cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4003,22 +4003,42 @@ "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==" }, "d3-geo": { - "version": "1.11.3", - "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.3.tgz", - "integrity": "sha512-n30yN9qSKREvV2fxcrhmHUdXP9TNH7ZZj3C/qnaoU0cVf/Ea85+yT7HY7i8ySPwkwjCNYtmKqQFTvLFngfkItQ==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.0.1.tgz", + "integrity": "sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==", "requires": { - "d3-array": "1" + "d3-array": "2.5.0 - 3" + }, + "dependencies": { + "d3-array": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz", + "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==", + "requires": { + "internmap": "1 - 2" + } + } } }, "d3-geo-projection": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-2.6.0.tgz", - "integrity": "sha512-snlzliB5q8SgzvYG2iVp4wRM+qmWbCY5nO2sWIbChRFiR3PD3NayOgNVTtdBoC70eY3QWI9z6dmzy8Qi7q0IQA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-2.9.0.tgz", + "integrity": "sha512-ZULvK/zBn87of5rWAfFMc9mJOipeSo57O+BBitsKIXmU4rTVAnX1kSsJkE0R+TxY8pGNoM1nbyRRE7GYHhdOEQ==", "requires": { "commander": "2", "d3-array": "1", - "d3-geo": "^1.10.0", + "d3-geo": "^1.12.0", "resolve": "^1.1.10" + }, + "dependencies": { + "d3-geo": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz", + "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==", + "requires": { + "d3-array": "1" + } + } } }, "damerau-levenshtein": { @@ -5541,6 +5561,11 @@ "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, + "geo-albers-usa-territories": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/geo-albers-usa-territories/-/geo-albers-usa-territories-0.1.0.tgz", + "integrity": "sha512-mmYOFbMcDbO/EP/bs01huipWEVGN8J6kz2zasMCx1CI1nAQyAAmfXQhpIROleDm4/RoOiaql5qO81eW+tPs9og==" + }, "geojson-vt": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", @@ -6195,6 +6220,11 @@ "ipaddr.js": "^1.9.0" } }, + "internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", diff --git a/package.json b/package.json index 186578f..4413608 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "@fortawesome/fontawesome-svg-core": "^1.2.18", "@fortawesome/free-solid-svg-icons": "^5.8.2", "axios": "^0.21.1", - "d3-geo": "^1.11.3", - "d3-geo-projection": "^2.6.0", + "d3-geo": "^3.0.1", + "d3-geo-projection": "^2.9.0", + "geo-albers-usa-territories": "^0.1.0", "mapbox-gl": "^0.54.0", "react": "^16.8.6", "react-dom": "^16.8.6", diff --git a/src/App.js b/src/App.js index 74973ea..59696a1 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,9 @@ import fontawesome from "./fontawesome"; const d3 = require("d3-geo"); const axios = require("axios"); +//https://github.com/stamen/geo-albers-usa-territories +const geoAlbersUsaTerritories = require("geo-albers-usa-territories"); + mapboxgl.accessToken = "pk.eyJ1IjoidXJiYW5pbnN0aXR1dGUiLCJhIjoiTEJUbmNDcyJ9.mbuZTy4hI_PWXw3C3UFbDQ"; @@ -56,8 +59,17 @@ class App extends Component { // Setup albersUSA projection for markers. // @see https://github.com/developmentseed/dirty-reprojectors/issues/12. let R = 6378137.0; // radius of Earth in meters - const projection = d3.geoAlbersUsa().translate([0, 0]).scale(R); + // This line commented out and projectionTerritories added instead + // const projection = d3.geoAlbersUsa().translate([0, 0]).scale(R); + + // Setup to include US territories projectd into the map + // @see https://github.com/d3/d3-geo/issues/152 + const projectionTerritories = geoAlbersUsaTerritories + .geoAlbersUsaTerritories() + .translate([0, 0]) + .scale(R); const projectionMercartor = d3.geoMercator().translate([0, 0]).scale(R); + // API URL set in .env axios .get(process.env.REACT_APP_API_URL) @@ -115,7 +127,7 @@ class App extends Component { }) .setLngLat( projectionMercartor.invert( - projection(marker.geometry.coordinates) + projectionTerritories(marker.geometry.coordinates) ) ) .setPopup(mypopup) // add popups