I’m new to React Native, but what I’m trying to do is port over my react app that centers around maps. Usually in react I can load Geojson files directly to data layer of Google Maps, but how do I go about doing this in react-native-maps? Also anytime the Geojson is loaded in react I can attach an event listener to trigger something when you click on that area, how is that accomplished in RN. (React code below)
I've tried working with (Polygon) but the format with the coordinates in Geojson doesn't play well with each other.
map.data.addGeoJson(localGeoJsonFile.json);
map.data.addListener(‘click’, function(event) {
getInfo = event.feature.getProperty(‘city_name’);
});
First of all, have a look at https://github.com/frankrowe/react-native-geojson, it allows you to load GeoJSON data into a MapView element from react-native-maps.
Concerning click events, although the element supports onPress property, currently react-native-geojson doesn't propagate such properties to the calculated Polygon from GeoJSON.
A first attempt to support onPress on every feature is made in this fork https://github.com/Appcademy/react-native-geojson
Related
Junior dev here!
Building a project with React (ts) and Mapbox.
I'm trying to render a marker popup with data from my own API with .setPopup() from the mapbox api.
Since I could not find a way to render a react component when clicking on a marker I use the .setHTML() from the mapbox api.
It worked fine until it was time to render arrays (one array with objects and one with strings).
I've tried mapping it out as I would in a tsx component and with pure ts + querySelectors and so on.
Either I get [Object, Object ] or nothing.
Anyone got any ideas? #desperate
I want to show a UI like below
and when user starts entering keywords I want to populate it with search results which when click on a particular name.
map should get displayed with marker and I want to fetch the lat and long for that marker pointer.
Can I do it for free using google API for web as I am doing it in reactjs
or is there any other good API
This is possible with Google's Places Autocomplete API for the dropdown, you can even narrow the search to a specific country. There's a npm package I've used that's very nice and relatively straightforward that you can integrate with your dropdown API calls, they have functions that allow for getting lat and long values of data in the dropdown list.
The map is a separate issue; I'd suggest passing your coordinates through your URL or via props to a child component after a user selects the location they want. In your map component (which will need Google Maps API or some other map like Mapbox integrated into the component), you would use these co-ordinates to define a marker (passed from props etc.). I would also suggest using Google API for the maps, as there are npm packages (discontinued but still works & a more recent package) that easily allow for you to plot custom markers as well as multiple markers.
My Sandbox the code for which I take no credit as it comes from this great post displays a google map with some markers and below it, a list of links. with an onClick handler, I'm trying to trigger the marker's
window.google.maps.event.trigger
I believe I need to make the markers I create, global so I was trying to do so using the useState hook. Every time I have done so it has gone into an infinite loop.
I am using esri map(javascript) in my AngularJS site. All esri resources were downloaded in my local and using dojo.js to load esri map in page. When switching map page to another page and go back to map page again, the map was initialized. Is there any way to keep the state of map? e.g: zoom level. Any help would be appreciated.
Generally speaking, I can think of 2 options to handle this.
Persist the state of the map somewhere outside the map and any transition to the map route can re-create the map and use the state info to get it back to its previous state. This is what we do in Open Data (an Ember app). Map state is maintained in routable URL parameters, so the URL http://opendata.arcgis.com/datasets/CAPCOG::schools?geometry=-104.712%2C28.588%2C-90.649%2C31.909&selectedAttribute=INSTR_TYPE tells the dataset route to open the map at the bbox specified in the “geometery” parameter, to add the “CAPCOG::schools” layer, with a smart mapping generated renderer on the “INSTR_TYPE” field. As you can imagine, if you had a lot of map state to manage, that could get complicated quickly. We get away w/ that b/c we’re only tracking a few bits of state
Move the map to some <div> that is outside of the routable view area, and then add custom logic in the route to manage the map (i.e. create, hide, show, destroy, etc). That’s the general idea, but you’d have to custom tailor it depending on the workflow of your app. The benefit would be that you would not need to destroy/recreate the map over and over again. Which means you would not need to keep track of the map's state, just whether or not it should be visible on any given route and/or whether or not it has been created yet. The downside is that you're introducing a custom state flow with side effects etc that goes "against the grain" of typical Angular development. I’m not aware of any examples out there that demonstrate this kind of approach.
I am aware of React Test Utils that can be used to simulate events when testing, however I have a browser extension that doesn't have access to the context of the page. I would like to be able to interact with the DOM (click events and filling out fields), however it seems that the state is not updated by a page running with ReactJS. Is there a way to this at all?