I am designing an application that allow users to highlight areas of a geographical map using a tool that is like brush or a pen. The tool basically draw a circle with a single click and continue drawing those circles with mouse move.

Here is an example of drawing made by moving the tool. It is pretty much same as Microsoft Paint.

enter image description here

Regardless of programming language what is best approach (most inexpensive approach) for saving this kind of data?


There is an implementation of MVC objects in Google Maps JavaScript API V3. It allows map objects to store state and update their presentation automatically. There is a DEMO of moving and resizing a circle which may provide what you require. The full tutorial can be seen HERE

  • 1
    +1. This is better than my answer because it provides a complete solution with minimal coding. Internally the library seems to be doing the same thing as what I had outlined though. – Apoorv Oct 21 '12 at 16:42
  • Glad to be of help. – david strachan Oct 21 '12 at 16:44
  • Thank you for references. I find out this a better match for my needs. – Mohsen Oct 21 '12 at 21:44

I am not aware of any mapping libraries that support highlights outright but if you want to do this with Google Maps or Yahoo GeoService then you can simply record the latitude and longitude of the bounds of the highlight area in a database.

On loading the map again, you can restore the highlight area from those bounds by rendering points using the lat/long. The approach will also work with resizable and transformable maps.

Obviously, the more complicated shapes you support the messier the implementation would get. Simplest would be to support shapes that follow a simple 2 variable equation (e.g., circles or rectangles).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.