Question 213162 in React native Question posted in
The official React Native documentation can be found here.

How to create full world map in react native?

I want create a full world map where I have to plot some points based on some data
I have tried many libraries in react native but not getting any solutions for it.

this is image ,I am searching for in react native
enter image description here

Tags:

2

Answers


  1. 0

    Solution

    You can create such map using SVGs, by finding a world map SVG and tracking the locations of the countries in this SVG map. Using these locations, you can plot Circles around the countries.

    Prerequisite

    I would suggest reading this to get better understanding of the SVG Path.

    Render the Map

    Step 1

    Download an SVG world map. Things you will need in the svg map image are,

    • Each country should be drawn using a separate SVG Path to locate country or nearby region.
    • SVG should be scalable.

    I downloaded svg map from SimpleMaps. Here maps have both of the things I mentioned above. You have option to download maps with custom height/width and each country is drawn with separate path.

    Step 2

    Convert the downloaded SVG into JSX, there are many converters available online, this is the one I use.
    Now render this converted JSX on the screen.

    With this, we are done with the map.

    Plot The Circles

    Step 1

    While downloading the SVG map, we checked that each country is drawn using separate path, You can also notice that each of this path is having an id or class named after a country. This name may be shorthand. This is how we find path for respective countries.

    Step 2

    To understand this part, it is must to read this first.

    Now suppose India’s map path starts with M223.14 53.577, which means in the whole world map, we will get India’s location at this point(223.1, 53.577). In this way you can get location of any country in the map using the path. We can use this point to plot a circle.

    Step 3

    To plot circle on this point, we will use Circle from react-native-svg,
    Draw this circle at the end on the svg, just before closing Svg tag like this,

        ...
       <Circle cx={223.14} cy={53.577} r={5} fill={'red'}/>
    </Svg>

    Note that the location you get from the Path is on border of the country, you may need to tweak the location to get the circle on your desired location.

    Result

    I have created this snack with free to use map which I downloaded from above suggested site, you may follow it, I have plotted a circle on United kingdom here. As mentioned earlier, you can download map svg in custom dimensions also but I think that is not free to use, so I have not used custom dimension map in it, but you will need a map with custom dimensions to make it fit on mobile screen.

    Screenshot

    expected output screenshot

    Login or Signup to reply.
  2. 0

    Consider using a full map sdk such as mapbox, maplibre, or Google maps and host a custom tileset.

    Why use a map sdk?

    • Doing all these calculations with an image may work, but it could be time intensive, error prone, require a bunch of testing. VS map-sdk already shipping most of the calculations.
    • map specific features. Like showing current location. Map sdks do that well.

    Example Mapbox allows for custom map styling and you can host your own tiles/layers directly. See here

    Most of these services have a react-native variant. Example

    These services would allow you to use world coordinates to accurately put points on your map. You will need to add a symbol layer for your pins, add the custom images as sources and pin the locations on the map using coordinates matched with the symbol type.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search