Android Question Draw on GPS map

Rusty

Well-Known Member
Licensed User
Longtime User
Is there an easy way to "draw" a shape (like a circle) on a GPS map displayed within a webview by which one can capture the gps coordinates of the shape?
I would like to be able to draw a shape and then find all points within that shape. (obviously the resolution of "all points" would have to be reduced so there aren't so many.)
Thanks,
Rusty
 

Rusty

Well-Known Member
Licensed User
Longtime User
sorry...
I have a webview; i retrieve a map from GPS and display it therein. Once the map is displayed, I'd like the user to draw a "circle" on the displayed map and then I'd like to get the coordinates created by the shape.
Thanks
Rusty
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
I don't know if it's possible to draw onto the WebView.
But it's possible to draw the circle onto a transparent Panel, for that you'd need to know the scale and coordinates of the map in the WebView.
I did something similar with a Google map.
 
Upvote 0

Rusty

Well-Known Member
Licensed User
Longtime User
Thanks Klaus,
How did you do this with the Google map? Can you send sample code or a description?
Rusty
 
Upvote 0

Troberg

Well-Known Member
Licensed User
Longtime User
I have a similar problem, I also want to draw (lines, circles, symbols) on top of a map, for example a line between two coords in the map, a symbol at a coord in the map or a circle around a coord with a specified radius (in real world units, such as meters).
 
Upvote 0

Mark Read

Well-Known Member
Licensed User
Longtime User
This any help to you? The variable "radius in line 53 is in meters, I checked it.

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['Leoben'] = {
  center: new google.maps.LatLng(47.38639043553, 15.092814266681671),
  population: 24598
};


var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(47.38639043553, 15.092814266681671),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: 3500
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

The link is here: https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=de
 
Upvote 0

Mark Read

Well-Known Member
Licensed User
Longtime User
As another answer to post #1, I use OSMdroid to draw my map based on GPS coordinates. Then I ...

1. Find the four corner points in gps coordinates.
2. Get the screen size in pixels
3. Make a screenshot
4. Load a canvas and draw on it noting points as pixels.
5. Convet the pixels back to gps lon & lat.
6 Add the points onto the original map as markers.

If my code can help you in any way, just ask.
 
Upvote 0

Rusty

Well-Known Member
Licensed User
Longtime User
Thanks Mark!
If you don't mind sharing your code, I'd greatly appreciate it.
Regards,
Rusty
 
Upvote 0

Mark Read

Well-Known Member
Licensed User
Longtime User
Hello Rusty,

here is the code. The app is not finished and will not run well on the emulator. B4A 3.80

Interesting for you are the following subs:

Main - Activity_Create, GetCoordinates, TouchEventsOverlay1_LongClick, TakeScreenShot
Pathfinder - Activity_Create (first few lines), ConvertPathToMarkers, GetCoordinatesOfMarkers

Hope this helps you.

Tags: osmdroid, routing, geopoint
 

Attachments

  • mapview.zip
    53.7 KB · Views: 271
Upvote 0
Top