Need some graphical advice

[MrNobody]

I need to make a user interface which features an interactive map, where all
the states are drawn and the user may click on individual states to get
details on it, and they may color in states different colors and make regions
or groups of similar colored states.

I figured out pretty easily how to get a clickable map where I know what
state the user clicks on, but the problem I am having is how do I color
different states in? And how do I draw borders between the states and between
the regions? I really have no 2D drawing experience so I was hoping someone
here would be able to advise me.

Right now I have a bitmap behind the scenes which maps x,y coordinates to an
individual state then an image drawn on the user interface. The map drawn to
the user interface right now is basically the United States from a satellite
photograph- with the terrain and everything colored in. I used that map to
build my bitmap to map what state a user clicks on from an x,y coord.

But no borders are drawn. I need to somehow trace the boundaries between
different colors on the bitmap file and use that to draw lines. Then probably
using a very similar if not same technique for tracing those borders I can
create the shapes which would be colored in as an overlay when the user
colors in some states and groups them into regions.

What kind of APIs and what techniques would I need to use in order to trace
these bitmap areas so I can build those borders and create shapes I can color
in?

 

[Ignacio Machin ( .NET/ C# MVP )]

I need to make a user interface which features an interactive map, where all
the states are drawn and the user may click on individual states to get
details on it, and they may color in states different colors and make regions
or groups of similar colored states.

Hi,

Doing that manually is very hard work, especially if you have no
experience doing it.
Take a look at either google maps or MS virtual earth. you would need
internet connection to run the application though.

 

[colin]

you might consider using the web browser control
and generating html code to display the map,
this takes care of clicking on items, etc ...

I did this when I wanted a colour coded text display.
it also meant I could click on items and it would go to bookmarks.

other than that its quite a long job to make such a custom gui
with custom control. however there might be a commercial library or
some examples or open projects.

Colin =^.^=

 

[MrNobody]

Thanks for your reply!

I don't imagine it being that difficult, I think perhaps I did not explain
my requirement very effectively. Perhaps I made it sound more difficult than
it really is.

Are you familiar with the PaintBucket tool in Microsoft's Paint application?
Basically I would need the same exact algorithm for when I need to fill
states in with color... when the user clicks a spot within the state's
boundary (mapped from the bitmap file) it's just as if someone using Paint
used the PaintBucket on a solid colored shape. That entire shape becomes a
new color, but nothing beyond that shape. That's exactly what I need to do.

The step beyond that is that in order to draw actually boundaries to the
user, I need to only draw lines around these solid colored shapes where
colors differ

 

[Rad [Visual C# MVP]]

I need to make a user interface which features an interactive map, where all
the states are drawn and the user may click on individual states to get
details on it, and they may color in states different colors and make regions
or groups of similar colored states.

I figured out pretty easily how to get a clickable map where I know what
state the user clicks on, but the problem I am having is how do I color
different states in? And how do I draw borders between the states and between
the regions? I really have no 2D drawing experience so I was hoping someone
here would be able to advise me.

Right now I have a bitmap behind the scenes which maps x,y coordinates to an
individual state then an image drawn on the user interface. The map drawn to
the user interface right now is basically the United States from a satellite
photograph- with the terrain and everything colored in. I used that map to
build my bitmap to map what state a user clicks on from an x,y coord.

But no borders are drawn. I need to somehow trace the boundaries between
different colors on the bitmap file and use that to draw lines. Then probably
using a very similar if not same technique for tracing those borders I can
create the shapes which would be colored in as an overlay when the user
colors in some states and groups them into regions.

What kind of APIs and what techniques would I need to use in order to trace
these bitmap areas so I can build those borders and create shapes I can color
in?

You could also (if you have the budget of course) investivate GIS software
like ArcView that provide SDKs that allow you to do precisely that sort of
thing

 

[clintonG]

Actually, I would be and will be using WPF/Silverlight for this type of
work.

<%= Clinton

 

[Ignacio Machin ( .NET/ C# MVP )]

Thanks for your reply!

I don't imagine it being that difficult, I think perhaps I did not explain
my requirement very effectively. Perhaps I made it sound more difficult than
it really is.

Are you familiar with the PaintBucket tool in Microsoft's Paint application?
Basically I would need the same exact algorithm for when I need to fill
states in with color... when the user clicks a spot within the state's
boundary (mapped from the bitmap file) it's just as if someone using Paint
used the PaintBucket on a solid colored shape. That entire shape becomes a
new color, but nothing beyond that shape. That's exactly what I need to do..

The step beyond that is that in order to draw actually boundaries to the
user, I need to only draw lines around these solid colored shapes where
colors differ

:




- Show quoted text -

Hi,

If that is your case you could do it, first you need to know which are
the limits of each state, you should maintain a list of coordinates
for each state line. You need this to draw the states line after all.
Then you can calculated inside which state the mouse was clicked,
there are algorithm for this.
Then you can use the same method you used to draw the states to redraw
it in the new color