I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.
Related
I'm working currently in a project where we need to create a new feature that allow to the user zoom in a Google Earth map embedded in a web app, and create a grid layout over the map, so the user should be able to "mark" some elements of the maps, for example, some specific buildings etc. But we need to create kind of square around the element, so it is not a single point, but at least 3 or 4 as needed to round the element.
We need to save those elements map with its coordinates and assign an ID to every element of the created grid.
Is it that possible? Is there a JS library that I could use?
Google Earth does not currently make an API or embedding available. If you don't need the full 3D view, then you can do this with the Google Maps API. There is a "drawing" library available that you can use to draw objects on the map. More info here:
https://developers.google.com/maps/documentation/javascript/drawinglayer
So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.
I am new to Leaflet and I would like to find out if how to create a fully interactive fictional map. I have an image that I would like to convert to a leaflet map. This image has a number of connections and points like a graph basically.
I want to first of all convert that image to the map, be able to hover over the points, highlight them and display information about them and also to create animations at some point but not immediately with the connections. There is also a requirement to display permanent labels next to each point.
Is that at all possible in Leaflet?
Is that at all possible in Leaflet?
Yes.
Start by reading the leaflet tutorial for non-geographical maps.
I'm attempting to create a map of a building using the google maps javascript API. I have the actual map itself set up, but I want users to be able to view inside the building using a custom made floor plan that I would overlay on top of the building. The idea is that users can look at the map and get an easy to use view of the inside of the building. How would this be done?
I want to make user able to draw routes and areas on static images as it is done on Google Maps. I've never done any JavaScript drawing before. Please advice me:
Any library/plugin who can help me to draw editable polylines and polygones on static images (and make it able to store the lines/points on my server)
What is the common way to draw for most browsers? As I know the "canvas" tag isn't supported enough by many browsers, and to make a line using multiple DIVs wouldn't be the best way to achieve this.
Is it possible to attach Google Maps API to a static picture?
Thank you!
Look into the Google Maps "GroundOverlay" object
http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays
This should allow you to lay your static image on top of the map, while keeping all of the map's regular functionality (infowindows, polylines, routes, etc).