OpenStreetMap Integration in react native application. Please guide me on that.

I'm trying to show a pin point on current location & after selecting search criteria user can see the near by (within 1km) shops pin point on the map.

asked 18 Nov, 11:36

Kailas%20B's gravatar image

Kailas B
112
accept rate: 0%

edited 18 Nov, 11:57

2

Can you explain in a bit more detail what you are actually trying to do? "OpenStreetMap" is just a big pile of data, and people use it for all sorts of things - they create maps from it, they calculate routes between A and B, they look up placenames, they use the data to statistically enquire about differences between regions. What is it you are actually trying to do?

(18 Nov, 11:51) SomeoneElse ♦

You will likely be using a Javascript library like Leaflet or OpenLayers to display a map, and then you will be constructing and sending a request to the Overpass API service that returns objects with certain tags within a certain distance from a given start point. You will want to learn/read up on how to display an OpenStreetMap map with Leaflet or OpenLayers, how you access the current position of the phone, how you write Overpass queries, and how you parse and display the results on the map (one option might be osmtogeojson).

permanent link

answered 18 Nov, 12:22

Frederik%20Ramm's gravatar image

Frederik Ramm ♦
71.3k846451113
accept rate: 24%

This will show default map with current location.

(18 Nov, 12:27) Kailas B

https://wiki.openstreetmap.org/wiki/API_v0.6 find out these API but authentication URL & parameter is not given. Is anyone know?

(19 Nov, 07:04) Kailas B
1

The OpenStreetMap API is not relevant for your task.

(19 Nov, 10:08) Frederik Ramm ♦

How can I show Map then in react native. not getting solution of show it. Can you provide any steps OR reference link.

(19 Nov, 11:53) Kailas B
2

As Frederik says above, "You will want to learn/read up on how to display an OpenStreetMap map with Leaflet or OpenLayers, how you access the current position of the phone, how you write Overpass queries, and how you parse and display the results on the map".

Taking this one at a time, the documentation on Leaflet is here. There are lots of tutorials there, but right on that front page is an example that displays a map with a marker on it.

You have a couple of options for "how you access the current position of the phone" that vary by phone - a simple web search gets you to various options, and you can decide what is right for you. I'm not familiar with React Native, but it's entirely possible that there's an abstraction layer in there for location.

Similarly, a web search for "how you write Overpass queries" points you at a couple of articles on the OSM wiki. It's pretty straightforward to use.

(19 Nov, 14:55) SomeoneElse ♦
2

Another link that might be helpful is StackOverflow's "how to ask a good question".

If you're really just confused and really don't know where to start, then take one (or several) steps backward until you can explain to people what you are familiar with and where your confusion starts. For example, if you aren't familiar with React Native (or Javascript) you'll need to learn how to do basic things there before being able to do anything with the answers to your question here.

(19 Nov, 15:00) SomeoneElse ♦
showing 5 of 6 show 1 more comments
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×2

question asked: 18 Nov, 11:36

question was seen: 176 times

last updated: 19 Nov, 15:00

Related questions

powered by OSQA