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!
Related
I'm working on creating a dynamic map of the factory at which I work. I would like to create a map that can zoom in and out with different elements that will populate depending on the zoom level. I can't find any tutorials that DON'T involve using some sort of maps API to just create a quick maps app. I want to use my own images, my own elements, but with the basic functionality of Google Maps, and I'd like to use React if I can.
Where can I go for this? It's difficult to find anything that talks about the basic "tile structure" coding logic of a zoomable web app that will render different images (in my case would be the "zoomed" images of the same factory) depending on the zoom level. Thanks, any help helps
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 .
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.
How can I load the firebase data before Google sees the content?
For example, retrieve data and render it with h1, p and other html tags, but my problem is SEO. I've been watching Gatsby JS but I don't need something like that.
On Firebase, the SEO is called App Analytics and it's possible to disable it on your database. However, you can only disable it generally and not load the data before it starts, once it's activated, it's always working, unfortunately.
I would recommend you to raise a Feature Request for this to be implemented here, so Google can check for further development.
Besides that, in case you want more information about how this is possible, you can check the below documentation.
Disable Analytics data collection
In addition, this question from the Community - How to use Cloud Functions for Firebase to prerender pages for SEO? - there is a case that I believe might help you, since it's about pre-rendering content. This is for another type of use case, but I believe it might help.
Let me know if the information helped you!
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