I'm using MapBox to show several store locations on a page. My specific use case is a little complex for what I am initially seeing tutorials for on the Mapbox site.
I have a few pages, one page for each city. Each city page should have it's own map with different location points. (This is in React, so each city page is a template component using WP data).
Is there a way to either bring in data from an outside source (like WP) or use data from a json file in the React project? i haven't been able to find any information on how to do this so far.
There is most definitely a way to bring in data from an outside source or JSON file. I wrote a comprehensive guide, "A Complete Guide to Sources and Layers in React and Mapbox GL JS", that details how you can add different types of data to a Mapbox Map using React. You can find the guide here.
I also put together a Code Sandbox to accompany the guide which you can find here. The guide and code sandbox detail how to add spatial data from various sources (Mapbox hosted data, from a JSON file, from an API) and then how to display it as a layer. I figured it is easier to just link to both instead of writing a really long post here.
Hope this helps! I am also in the process of writing a comprehensive playbook for working with React and Mapbox in case you are interested! You can view it here.
Related
Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.
I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a¶m2=b¶m3=w¶m4=aa .
How do you use those free AngularJS Dashboard Templates you find online?
I found many free angular dashboard templates.
They look nice, but I dont see documentation on how to use them,, some starting point for example.
Looks like you could use them to pull data from a database and represent it dynamically, but I dont know where to start in the most simplistic way.
for example, with this one:
http://startangular.com/product/flatlogic-angular-material-dashboard/
Start by merging your package.json and dev dependencies together, or using their project as the base, then you can do a lot in editing the partials in views/partials, and then for pulling data, you can implement an api into each of their controllers or pass information into each of the directives. There's no starting point for any data manipulation, it's more like a dashboard that you can send data into the panel-widget. This is only front-end stuff, so you must already have a location to pull data from.
I have tried to do google map with marking using 'google-map-react' but marking places in map is not working.I need to mark places dynamically on page load .
I have referenced this URL https://github.com/istarkov/google-map-react
Please Provide a solution as a sample code or provide any reference url.I am hoping to hear from more experienced React developers.
Thanks
Here is my question, and afterwards I'll give some context.I'll try add as much info here to help.
Is it possible to render a JPG from a Angular implementation of Google Maps with dynamic waypoints?
Context:
We currently have an angular implementation of google maps that allows us to turn on and off waypoints from a GUI. Turning off a route, hides that from the map.
There are various settings that can be changed in the GUI that dictates where the waypoints will go and therefore the route.
The purpose or objective outcome is to be able to take a JPG of that map configuration and embed in email, attach, send to customer etc etc
UPDATE: I should note that we have considered building the static map through the API directly by appending waypoints to the URL, however we need to use our custom styled map overlay.
Any help or guidance would be most appreciated.
Thanks everyone!