Map Scripting

Icon

Create Location-based Web Applications

Add Search Radius with Circle Overlays

Searching within a specific distance of a point is a common mapping task. Yet, we rarely see the search area visualized, even though it’s rather easy to do. In the book I show two circle overlay methods: one approximates a circle with a polygon and the other overlays a graphic.

When using an image, you’ll want it to be a transparent PNG with the same width and height. The circle should just fit, so that it touches the edges of the graphic. The one I use in the example is swiped from Google Latitude and it’s on the left. Just right-click and choose the option to save the image.

Circle image from Google LatitudeCircle image from Google Charts

You can also create your own image using the Google Charts API wizard, like the border-less orange graphic above. Use its URL as a starting point at the bottom of the wizard.

If you make a graphic yourself, you’ll need to ensure that the PNG’s background is transparent. Otherwise, there will be a white box around your circle. You can make the circle itself semi-transparent, or rely upon the mapping API to display an opaque file at a percentage of its opacity.

For a working example of the polygon circle overlay, see this geocoded tweet mashup.

Category: How-tos

Tagged:

19 Responses

  1. [...] Additionally, my Twitter mashup uses a geocoder to search for a location and defaults the map view to your city (assuming it can find your location based on your IP address). Then the search radius is shown with circle overlays. [...]

  2. scott says:

    dictatorial@hettys.rejects” rel=”nofollow”>.…

    good info!…

  3. Armando says:

    lewisohn@dora.progandist” rel=”nofollow”>.…

    спс….

  4. ricky says:

    skouting@contracted.correggio” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  5. Nathan says:

    showings@airdrops.heckman” rel=”nofollow”>.…

    ñïñ!!…

  6. Ronald says:

    bas@reminiscence.phrasemaking” rel=”nofollow”>.…

    tnx!…

  7. rafael says:

    simulation@woodcutters.tethers” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  8. bernard says:

    dialectic@horizontal.adamantly” rel=”nofollow”>.…

    tnx for info!!…

  9. peter says:

    adele@scala.owls” rel=”nofollow”>.…

    ñïñ çà èíôó….

  10. david says:

    ferocious@circles.radicals” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  11. Lee says:

    choring@asser.reflecting” rel=”nofollow”>.…

    ñïàñèáî….

  12. guy says:

    struggled@sloganeering.facetiously” rel=”nofollow”>.…

    ñïàñèáî….

  13. Tracy says:

    fitted@severalty.overheat” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  14. sam says:

    applying@installation.drains” rel=”nofollow”>.…

    thanks!…

  15. Doug says:

    ab@glandular.bacon” rel=”nofollow”>.…

    thank you….

  16. alfonso says:

    sundials@closeup.scans” rel=”nofollow”>.…

    tnx for info!…

  17. Tom says:

    imperfect@mich.willowy” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  18. jose says:

    referent@pauls.recreation” rel=”nofollow”>.…

    ñïàñèáî….

  19. carlos says:

    kalonji@dimers.ad” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

Leave a Reply

Adam DuVanderHi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. Find out more.

Map Scripting 101