Any way to show accuracy circle around dot?

[jensolsson]

This would be very nice for example if one wants to show a gps position with a set accuracy in meters. I saw that I can set the size of the dot, but it would be nice to set a circle around this with a radius in metres and not in pixels. Is this possible in some way?

$("#map").geomap("append", { type: "Point", coordinates: [-84.558831, 38.209797] // Coordinates are lng/lat }, { height: 20, width: 20, borderRadius: 20, color: "#2196F3", fillOpacity: 0.75, stroke: "#212121", strokeWidth: 1 } );

[ryanttb]

Hi @jensolsson! Thanks for the question. You gave me a perfect opportunity to release v1.1 with jQuery 3 support and a new (albeit limited) $.geo.buffer function. http://docs.jquerygeo.com/geo/buffer.html

The buffer function turns Points into Polygon circles based on projection instead of pixels. Something like the following should do the trick for you. Note: instead of handling a click event, you would handle GPS signal updates.

The two ", false" arguments prevent the map from trying to refresh while you make multiple graphic edits.

    $(function() {
      var startCoords = [-84.558831, 38.209797]; // Coordinates are lng/lat

      // create a map
      var map = $("#map").geomap({
        center: startCoords,
        zoom: 16,
        shapeStyle: {
          height: 4,
          width: 4,
          borderRadius: 2,
          color: "#2196F3",
          stroke: "black",
          strokeWidth: 1
        },
        click: function( e, geo ) {
          setGpsPos( geo, 200 );
        }
      });

      setGpsPos( {
        type: "Point",
        coordinates: startCoords
      }, 200 );

      function setGpsPos( point, accuracy ) {
        map.geomap( 'empty', false );
        map.geomap( 'append', point, false );
        map.geomap( 'append', $.geo.buffer( point, accuracy ), {
          opacity: 0.4,
          color: "#2196F3",
        } );
      }
    } );

[jensolsson]

This is awesome! Works perferctly!