Surface map generation based on user Geolocation and movement - javascript

I need to create a small web hybrid app that uses google maps to track down users movements and in the end generate a shape on the map with some info like area or distance the user did. The perfect case would be when the surface is a rectangular shape.
I'm thinking of creating a cordova app and use the geolocation api but does the google maps api give me all the other info I need to generate the shape and calculate things like area or height map.
Could this approach work or do you know other open source tools that can help me with this app?

Related

Building a completely custom map in React Native?

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.

Google Earth embebed, create grid layout in Satellite view

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

Here Map Javascript API turn by turn navigation

I am developing a HTML5 app where needs to show vehicle location according to coordinate and also the route(list of received customised coordinates) on the map in real time. Coordinates received via third party device.
I have tried leaflet library, google map, but didn't find a way to rotate/adjust the map(inside a div) according to the heading(the future coordinates).
The requirement is to have the vehicle icon always on the bottom center of the page and the route/heading points upwards. Similar to navigation apps. Any people know if it's possible in Here map Javascript API? Is it called turn by turn navigation?
There is a new release of the JS API planned which will provide this kind of scenario.
Please watch out for the JS API API release 3.1 on developer.here.com (roughly estimated by the end of May)

Offline Map Tiles

Intro
I am working on a mobile app (Cordova) in which user can draw polygon on Map and view their areas lately and etc. In online mode i am using google maps api 3 it is working fine.
Requirement
Now i want to provide map view to users if they have no internet access but it cannot done by Google Map as their licences mentioned. So i use Leaflet maps for offline use. Now i want to download tiles only specific region that user define in online mode (polygons).
So my question is that how do i achieve that functionality to download tiles only given polygon points. I want tiles only on demand of given polygon
Try following
I use Mobile Atlas Creator to download tiles but it download separately. SO that will increase my app size i don't want that. So when user using app he/she can download if they want.

How to show Google Maps tile overlays of Google Earth's Old-world maps (or a blank / physical world map)?

I am trying to build a Google Maps-driven web application that can display a map of the whole world in one or all of the following configurations:
A continent-outline map, only differentiating between land and water (like this, but without the country borders/names, and without showing any additional detail as you zoom in)
A physical geography map of the world, containing absolutely no road, city, or political borders (so the default satellite map is out - if I can't get anything else working, I'm considering just restricting the zoom-level such that you can't get in close enough to see modern features)
The same kind of old-world maps shown here and here for Google Earth.
A similar effect to what I'm after can be achieved with the old maps from the Rumsey Collection (q.v.), which are excellent but rather bandwidth-intensive and slow down the GMaps performance significantly. Simpler, less detailed images would better suit my purposes.
Is there an efficient way to load those world-spanning KMZ graphical files from bullet 3 as tilesets?
How about the physical or silhouette-based map? If necessary, one could follow the GMaps guideline for carving out .png files to represent each tile if there exists a freely available starting map.
You can also use open-source MapTiler application - http://www.maptiler.org/ or the command line utility gdal2tiles.
Here is a tutorial on building custom tiled maps:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
This appears to be a service for creating custom tiled maps:
http://www.maplib.net/
Good luck!

Categories