zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.07k stars 424 forks source link

static map files #234

Closed cquex closed 3 years ago

cquex commented 3 years ago

Hi, Im having an issue creating my map. I create my json file on https://mapshaper.org/ with the country that i want:

image

Then i just download it and load on my Geographies component:

`import React from "react"; import {geoCentroid} from "d3-geo"; import { ComposableMap, Geographies, Geography, Marker, Annotation, } from "react-simple-maps";

import geoUrl2 from "./data/guatemala.json";

const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";

const Map2 = () => { return (

{({geographies}) => geographies.map((geo) => ( )) }

); };

export default Map2;`

In my webpage the map looks :

image

I think is something with the projection, the scale and the rotation. How i know which configuration is the best for my map ?

datproto commented 3 years ago

You only need to adjust the "Scale" and "center" property of the ComposableMap component.

Something like below:

<ComposableMap
        height={550}
        projectionConfig={{
          scale: 1550,
          center: [105, 16]
        }}
        projection="geoMercator"
        data-tip=""
>
  ...
</ComposableMap>