Android Question Draw on GPS map

Discussion in 'Android Questions' started by Rusty, Feb 6, 2015.

  1. Rusty

    Rusty Well-Known Member Licensed 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
     
  2. klaus

    klaus Expert Licensed User

    You need to be more presice on what exactly you want to do.
    What kind of map and where does it come from ?
    Is the user supposed to draw the shape ?
     
    Last edited: Feb 8, 2015
  3. Rusty

    Rusty Well-Known Member Licensed 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
     
  4. klaus

    klaus Expert Licensed 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.
     
  5. Rusty

    Rusty Well-Known Member Licensed User

    Thanks Klaus,
    How did you do this with the Google map? Can you send sample code or a description?
    Rusty
     
  6. klaus

    klaus Expert Licensed User

    Leave me some time to make a small example.
     
  7. Troberg

    Troberg Well-Known Member Licensed 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).
     
  8. Rusty

    Rusty Well-Known Member Licensed User

    Thanks Klaus :)
     
  9. Rusty

    Rusty Well-Known Member Licensed User

    Did you ever get the time to make the little example?
    Thanks,
    Rusty
     
  10. mark35at

    mark35at Well-Known Member Licensed 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
     
  11. mark35at

    mark35at Well-Known Member Licensed 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.
     
  12. Rusty

    Rusty Well-Known Member Licensed User

    Thanks Mark!
    If you don't mind sharing your code, I'd greatly appreciate it.
    Regards,
    Rusty
     
  13. mark35at

    mark35at Well-Known Member Licensed 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
     

    Attached Files:

    DonManfred likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice