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 :)
Related
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.
Is it possible to implement slider with static gradient track in React Native using any 3rd party library or what-soever?
Illustrative image from Google:
Right now I'm using sldier from #react-native-community/slider, but it doesn't seem to support gradient slider track? I can customize minimumTrackTintColor and maximumTrackTintColor, but I would like to have static gradient track independent of the indicator position. I have looked into other 3rd party slider libraries as well, but encountered the same problem.
So, is there any way in any library to achieve this in React Native?
I dont think any package upfront gives this functionality, but you can always use linear-gradient. this library, make a view with. gradient like that, and on top of that, by using position:'relative' make a cursor and slide it by using rn-draggable . You will need to work out on that, but you can create a new functionality , and maybe publish it so that it can be used by others in future.
Hopeit helps.feel free for doubts
Inspired from what #Gaurav_Roy answered above, in the end, I achieved what I wanted with react-native-gesture-responder . I positioned my custom gradient slider track and slider dot as images and used createResponder from the library to capture user interactions with the slider dot. Then calculated the distance between dot position and track edges to get the value.
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.
Does anyone know how to make a Horizontal Population Pyramid like the one in the header image located in this article? I want Yes to go up vertically and No to go down vertically.. https://www.elastic.co/blog/from-tableau-to-elastic-how-samtec-streamlined-business-intelligence-and-analytics
Was this created with vega or classical kibana visualizations?
I doubt that graph was made with Vega, simply because most likely I would have been asked for help in building it :). That said, Vega allows you to build things like that, e.g. see this graph. Also, while I haven't tried it, I suspect that example can be substantially reduced in the size by using a single rect mark inside a single group, but I wouldn't know for sure until I try to refactor it.
I have some issues about my model. Is is an easy model buy I can not make It work well...
I upload my project here: http://webgl.drapps.info
I have a car model with some pieces that change material when mouse is over them. I use threex.domevent.js library with "on" function. My model is loaded by json files.
Issue 1
when mouse is out of canvas, threejs detects that mouse is over a piece of my model, but this is not true, and that piece change its material (triggering mouseOver event).
Furthermore, I tried to get better mouseover event because even when mouse is really over a piece, that event doesn't trigger.
Issue 2
This is about TrackballControls. Is there any way to control rotation of my world? I mean: rotation only in one axis, rotation only for 180 degrees, etc... Is there any tutorial or article to learn how to rotate and translate camera?
Thanks for everything, I will so please to anybody who wants answer this... because I am a little lost
Thanks
Sorry, but you are out of luck.
Question 1. Yikes! You are using threex.js which is a third-party app that hasn't been updated in almost a year, so I can't help you with that.
You are also using an older version of three.js. Please update to the current version.
If you still have problems, post a new question with a simple demo -- not your entire project. Better yet, Google your question first.
Question 2. TrackballControls is not part of the library -- it is part of the examples -- so it is not officially supported. If you are not happy with it, you will have to hack the code yourself.
This question has come up a lot. Google it. To the best of my knowledge, there is not a good solution.
Personally, I would use OrbitControls in your case -- it keeps the scene right-side-up, and you can constrain the maximum polar angle, keeping the camera "above ground".
The best examples/tutorials are the official three.js examples, which will work with the current version of the library.
I can't help with issue 1.
Issue2:
I am also working on a project to visualize vehicles and needed to be able to rotate. I also tried Trackballcontrolls but it did not suit my needs.
What I ended up doing was creating a a master Object3d and then instead of adding objects/models to the scene, I added them to the master Object3d. That way to rotate everything in the scene, I just had to rotate the master object.
To actually do the rotation I just used the code from one of the cube examples.