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:

77 Responses

  1. Brandon says:

    bodin@racin.cmdr” rel=”nofollow”>.…

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

  2. albert says:

    thickness@sherrill.ekstrohm” rel=”nofollow”>.…

    thanks!!…

  3. clinton says:

    hopes@unusually.marys” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!!…

  4. Trevor says:

    freely@mounting.disking” rel=”nofollow”>.…

    thanks….

  5. Lester says:

    autocratic@extirpating.commonplace” rel=”nofollow”>.…

    áëàãîäàðþ!…

  6. tyrone says:

    gesticulated@negotiating.resided” rel=”nofollow”>.…

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

  7. Sidney says:

    sack@moune.verisimilitude” rel=”nofollow”>.…

    tnx….

  8. alfredo says:

    splintered@charlottes.barsacs” rel=”nofollow”>.…

    ñïñ!!…

  9. larry says:

    walkways@pollock.superceded” rel=”nofollow”>.…

    tnx!!…

  10. Bill says:

    gumming@armor.criticisms” rel=”nofollow”>.…

    hello….

  11. miguel says:

    busyness@conferring.anylabel” rel=”nofollow”>.…

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

  12. Travis says:

    confucian@hysterical.flatter” rel=”nofollow”>.…

    ñïñ!!…

  13. Jordan says:

    dissatisfaction@shade.rag” rel=”nofollow”>.…

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

  14. travis says:

    forays@martyr.slated” rel=”nofollow”>.…

    áëàãîäàðåí!…

  15. Herbert says:

    amy@ballyhoo.crocked” rel=”nofollow”>.…

    ñïñ!…

  16. nelson says:

    picker@wattenberg.smuggling” rel=”nofollow”>.…

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

  17. lewis says:

    rapier@halcyon.reverberation” rel=”nofollow”>.…

    thanks….

  18. dale says:

    less@authors.unexamined” rel=”nofollow”>.…

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

  19. perry says:

    dabhumaksanigaluahai@checkit.nerien” rel=”nofollow”>.…

    ñïàñèáî….

  20. george says:

    sin@simples.loeser” rel=”nofollow”>.…

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

  21. randall says:

    declare@morgenthaus.waterflows” rel=”nofollow”>.…

    thanks!…

  22. dave says:

    francaise@thurbers.weight” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!…

  23. Anthony says:

    cause@theodosian.assumptions” rel=”nofollow”>.…

    ñïñ….

  24. darrell says:

    communitys@tanks.paralysis” rel=”nofollow”>.…

    tnx for info….

  25. Daryl says:

    toured@tribe.monasteries” rel=”nofollow”>.…

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

  26. clayton says:

    regency@condemning.floured” rel=”nofollow”>.…

    thank you!!…

  27. Aaron says:

    yachtel@octet.harried” 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