However, for this illustration, I am computing it from the TopoJSON because it comes with the Gross Domestic Product and the population estimates for each country. Ordinarily, you would retrieve such data sets from your database or a third party API. It is a map showing the distribution of GDP per capita income of all countries in the world. The code below illustrates how to use react-simple-maps to create the most basic SVG map. Creating a simple map with react-simple-maps Similarly, you can also create a TopoJSON file with mapshaper using either the command line or the online tool. There are other free TopoJSON files online with friendly licenses which you can also use. In this article, we shall use a simple TopoJSON file created for experimenting with the react-simple-maps package. Its value should be the URI for the GeoJSON or TopoJSON file. The Geographies component accepts the geography prop. There are online resources that do a great job explaining them in great detail if you want to learn more. Since this article is not primarily about GeoJSON or TopoJSON, we won’t go into them in great detail here. Therefore, due to the smaller bundle size, you are better off using TopoJSON if you want to transfer the file over the network or use it to create a map in the browser. It has been established that a TopoJSON file is up to 80% smaller than its corresponding GeoJSON file. On the other hand, though more complex and less readable, TopoJSON files are orders of magnitude smaller than GeoJSON files. One advantage of GeoJSON over TopoJSON is its simplicity and readability. However, each one of them has its strengths and weaknesses. TopoJSON is a derivative of GeoJSON.Īs hinted in the previous paragraph, you can draw some parallels between the two formats. In their simplest form, GeoJSON and TopoJSON files are JSON files that store the data you need to create a map. GeoJSON and TopoJSONīefore using react-simple-maps, you need to have a valid GeoJSON or TopoJSON file. It accepts props for setting your map’s width, height, projection, and projection configuration. The ComposableMap component is a wrapper for any map you want to create using react-simple-maps. To create the most basic SVG map using react-simple-maps, you need to import and use the ComposableMap, Geography, and Geographies components. It can get you writing React code almost instantly.īefore using react-simple-maps, you need to install it from npm using one of the commands below: # Using npm If you haven’t, you can use creat-react-app to set up a React project. This section assumes you already have a React project set up. How to create SVG maps using react-simple-maps Let us learn more about react-simple-maps by building a simple SVG map. That is about how simple this package can be. Most features offered by react-simple-maps are in form of simple React components that you import and render with the appropriate props. For more about these D3 packages, you need to read the API section of the D3 documentation. Other D3 packages used by react-simple-maps include d3-selection, d3-zoom, and topojson-client. React-simple-maps internally relies on the D3 package d3-geo for creating maps. Because it uses the React Hooks API under the hood, you must be using React version 16.8 or later. What is react-simple-maps?Īs mentioned in the introduction, react-simple-maps is a simple library for adding an SVG map to your React application. This article will be a complete guide on how to create SVG maps using react-simple-maps. The simplicity and the small bundle size make it an ideal library for creating simple maps. It boasts of being easy-to-learn, flexible, tiny, and extensible. React-simple-maps, like its name suggests, is a simple library for creating SVG maps in a React application. One such alternative package is react-simple-maps, which relies on D3 packages under the hood. There are smaller and easier-to-learn alternatives to D3. If you are an absolute beginner, picking up D3 and immediately becoming productive is difficult. However, despite being a feature-rich library with several graphing capabilities, D3 has a steep learning curve. When looking to visually present data on a map, one powerful library you can use is D3.js. Maps provide one of the most eye-catching and aesthetically pleasing ways of presenting data tied to geographic locations. Joseph Mawa Follow A very passionate open source contributor and technical writer How to create SVG maps in React with react-simple-maps
0 Comments
Leave a Reply. |