I am using react-native-maps in my React Native project and I want the map to show only Germany and dhe user should zoom in and out up to a certain level but always withing Germany. I don't want the user to be able to navigate to other countries.
I checked the documentation but I didn't find anything related to my problem. Is there any way to achieve this? Thanks!
As far as I'm aware, you'll really need to 'bodge' this as it's not really true functionality of native maps.
You can limit the maxZoom level, to ensure that they cannot zoom passed a certain point - this will help with zooming. As for scrolling outside of a certain area - you can hitch onto the onDrag event, and check the lat and lon object. If the coordinates are outside a specific boundary, you can take the user back to a specified location - or present a user error? Geo fencing seems like it could be a part of this also.
Apart from theoretical - I'm afraid I've never done this, so cannot show you any implementation.
Related
I want to implement a feature in my react native application to let the user measure area or fields with two different methods the first is manual like manually drawing the fields area in the map and secondly automatically by using the gps and entering points while he walk around the field .
Could please anyone share some resosurces or any help material that may assist me in achieving this feature.
Thanks in advance
It is totally doable. Since you didn't mention any particular library, let me explain using react-native-maps (it is an awesome package :). Let's first discuss using the drawing (not sure if you literally mean drawing - at least I don't think you need to add complexity in this).
You can provide the <MapView> component provided by the package with a onTap method, when the user taps, you can add the coordinate a list of coordinates like this:
const [coordinates, setCoordinates] = useState([]);
then in the map, you can do
<MapView onPress={(coords) => setCoordinates([...coordinates, coords])} ...rest of the code
when the user is done, you can use a bit of mathematics (https://www.mathopenref.com/coordpolygonarea.html) or even a polygon package to calculate the area (https://www.npmjs.com/package/polygon).
Well, the second use case is easier I think as no extra interaction is needed since user can input the coordinates which you can again put in the coordinates array and use to calculate area.
I hope it helps :)
I have 19451 points exported by coordinates in a JSON file. I am trying to render them in an efficient way on the map with circles. How can I achieve this? It is the first time I am using https://github.com/react-native-maps/react-native-maps with expo, so I am not that experienced in using maps services. I don't even know where to start from. I was thinking of something like rendering the points dynamically, based on whether one point is to be found in the region of the map that is currently shown on the screen, although I have no idea how to actually achieve this. The first thing I tried was to obviously render them at once: it takes ages and it is very buggy!
You have several options:
Use some kind of clustering when there are multiple circles in the same area, for example when you're zoomed out. Have a look at react-native-maps-clustering. Performance wise is decent enough but it may lag on older devices.
When you go over a zoom level you can limit the number of circles you draw, I guess they overlap anyways. When your limit has been reached, you can display some warning to let the user know that the number of circles was limited and he should zoom in. From my experience, drawing max 50 custom markers was the upper limit to avoid lag on older devices. With circles, that limit might be different.
Manually filter your data and decide whether the circle belongs to the current viewport (visible part of the map) or not.
Some code would help me to give you some more hints.
In my application I can draw an overlay (PolyLine) on my map (MKMapView). This overlay however, is not bounded to actual roads. Is there a way (some API or others) to adapt the overlay so that it covers/overlays a real road.
The application is run on mobile devices (iPod Touch & iPhone), so to not make my app a very battery consuming one, I would set the Core Location Accuracy not to the highest. As a result, the location will be a bit next to the road where you are. Then I would still like my program to adjust this error...
To get an overlay that matches actual roads, I used Google Maps API Webservices. I already had an array of all points forming a route and I used these points (coordinates) to easily create an overlay that maps on real roads.
I used the first and last point to create a navigation between and set all the other points as 'waypoints', see Directions API
To find the nearest address of a point, I used the Geocoding API
Google Maps API Webservices: http://code.google.com/intl/nl-NL/apis/maps/documentation/webservices/
I'm currently developing an iPad application that integrates MapKit. But I have a small issue. I display lines between two points on my map but when these points are one at the very west of the map and an other one at the very east of it, for instance, I would like to draw the shortest line between then. In other words, I would like to center my map between these two points (but not in the usual way because If I do so I have to draw a line from the left one that goes left to the left border of the map, then continues from the right border to the right marker... so on the opposite point of the map) and then draw the shortest route that is know in the middle of my view.
I've thought of two ideas that could help me...
- Change the map background and have a map centered on a different place of the planet,
- Instead of a map as background, have 2 maps side to side and switch to the right one according to what I need to display,
But I couldn't find anything about it... Do you know if these solutions would be possible and how ? If not, would you have an other idea about how to do what I'm trying to do ?
Thanks in advance !
Just in case it might help others people...
I didn't found any way to modify the background map in my map view and I have been forced to display some routes in two parts. Indeed, it seems impossible to do differently so far with the mapKit iOS library. We can only wait for improvements ;) !
I have compiled a list of locations with latitude and longitude information. Can I check what is the best approach to filter and populate the list of "nearest" geolocations in a table and mapview based on my current location? (or a destination entered by a user). Also is it also possible to indicate what is the radius I am interested in? e.g. only select all the nearest bookstores within 5km from my location etc
Appreciate your advice on this
Zhen Hoe
Maybe I'm missing something, but why don't you just add your locations to a mapView, and center the map on the user's current location or whereever they want? MapKit will do all the calculations for you, and only show the ones near the center. The user can set their own radius by zooming in and out. MapKit is highly optimized for exactly this purpose, that's how you can see the "rain of pins" in real time.
Update:
You can also go the other way: once you have the annotations on the map, you can query the map for those annotations that are in the visible region with:
- (NSSet *)annotationsInMapRect:(MKMapRect)mapRect
From the docs:
This method offers a fast way to retrieve the annotation objects in a particular portion of the map. This method is much faster than doing a linear search of the objects in the annotations property yourself.
You may find - (CLLocationDistance)distanceFromLocation:(const CLLocation *)location to be very useful
http://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocation_Class/CLLocation/CLLocation.html#//apple_ref/occ/instm/CLLocation/distanceFromLocation:
The haversine formula is frequently used to in navigation for calculating distances between coordinates. This is a pretty decent resource for distance calculations, and even has a code sample for haversine (though it is in Javascript).
If your list of locations is relative small (hundreds, even), you can probably just iterate through the whole list and calculate the distance between each place against current location.