This package allows creating maps from geojson features. The maps can be colorized based on data and tooltip/zoom+pan can be set up readily.
The package is designed to try and handle all the map setup and appearance, but it needs the geographic features in the form of geojson.
By default the maps will use GEO_ID to give features unique keys and select data if a data object is passed. This must be found within each feature's properties. To use a different identifying key,the featurekey argument can be passed to any of the map components and it will be used instead of GEO_ID.
For the components to correctly associate data with features, provide an object with the GEO_ID/featurekey values as keys and the data as values.
I set up the projection/scaling for some UsMap setups.
Example of UsStateMap US State map with generated data
This component makes no assumption about what geographic features you want to display, but this also means you will need to handle projection, scaling, and possibly the viewBox. There are defaults for these, but they are complete guesses.
colorize={fcn} to specify a colorizing function. This is any fcn that will take all data values for config and returns a fcn that then takes single data values and returns a color that categorizes them. I have a default quantile colorizer set up.
The only required argument is getstates, which is a function to get state outline data, or an object containing that data. Either is fine, and it will handle async retrieval of data.
const Map = props => {
return (
<UsStateMap
data={data}
colorize={colorfcn}
getstates={stategeofcn}
formatter={input => Math.round(input)}
featurekey={'GEO_ID'}
legendstyle={{
width: "100%",
height: "40px",
fontSize: "0.8em",
padding: "0 0 5px 0"
}}
statestyle={{
fill: "#f4f6f6",
stroke: "#707b7c",
strokeLinejoin: "round"
}}
statedatastyle={{
stroke: "#323535",
strokeLinejoin: "round"
}}
/>
);
};
It works the exact same way as the states map, but needs both the state and county outline data. You can also configure the style for both state/county features.
const Map = props => {
return (
<UsMap
data={data}
colorize={colorfcn}
getstates={stategeo}
getcounties={countygeo}
formatter={input => Math.round(input)}
featurekey={'GEO_ID'}
legendstyle={{
width: "100%",
height: "40px",
fontSize: "0.8em",
padding: "0 0 5px 0"
}}
statestyle={{ fill: "#f4f6f6", stroke: "#707b7c", strokeLinejoin: "round" }}
countystyle={{ fill: "#f4f6f6", stroke: "#ccd1d1" }}
countydatastyle={{
stroke: "#323535",
strokeLinejoin: "round"
}}
/>
);
};
Example UsMap US map with generated data
You will need to import the CustomMap component, have your own data set up, and provide a projection/scaling info. The example I show here is for setting up a world map, but the process is similar regardless of the map. Example of CustomMap, world map in this case World map with generated data Important args to specify -
import { CustomMap } from "@jadesrochers/geomap";
import { geoEqualEarth } from "d3-geo"
const projectEqualEarth = scale =>
geoEqualEarth()
.scale(scale)
.translate([350, 250]);
const WorldMap = props => {
let worldgeo = {
type: worldgeojson["type"],
features: worldgeojson["features"]
};
let randdata = worldgeo.features.map(feat => {
let item = {};
item[feat.properties.sov_a3] = Math.random() * 100;
return item;
});
let data = R.mergeAll(randdata);
return (
<CustomMap
projection={projectEqualEarth}
featurename={'countries'}
featurekey={'sov_a3'}
tooltipkey={'name_sort'}
scaling={180}
getgeofeat={worldgeo}
data={data}
legendstyle={{
width: "100%",
height: "40px",
fontSize: "0.8em",
padding: "0 0 5px 0"
}}
styling={{
fill: "#f4f6f6",
stroke: "#707b7c",
strokeLinejoin: "round"
}}
datastyling={{
stroke: "#323535",
strokeLinejoin: "round"
}}
{...props}
/>
);
};
d3-geo is a good location. Anywhere that can tranform lat/long into projected coordinates is fine, it just needs to provide infromation that can be plotted on svg.
By default, it will occupy as much space as it is given. You can pass width/height args, or reduce the space it has, as it should scale to any space fairly well.