Solved

Ideas on laying a Google-like map in ASP.NET

Posted on 2007-03-27
8
487 Views
Last Modified: 2010-04-16
Hello all,

this is a very big question, I know :).
My primary concern for now is just the layout design of Google, I am not digging into the whole software architecture thing behind Google map yet.

My question is: if you have to build an application similar to Google Map in ASP.NET, how would you decide on the layout of the GUI?

What I am thinking is:

We can use a frameset with 3 frames, top frame for the From and To, left frame for displaying the route in text, and the remaining frame is to display the map

But, I am not so sure how easy to pass around parameters among frames in .NET yet, so I don't know if using frameset is a good idea? For example, when user clicks on a selected path in the left frame, the map on the right frame highlight that path. Would that be easy to do with frames or something else?

Please suggest your GUI layout for Google Map. What do you think of using frameset like above? What else do you think that could be easier to use in ASP.NET (using <div>?????? I dont know just guessing).

I will try to divide the points fairly to the most detailed, appropriate answers. Please be acknowledged that this question is more like an open ending question, and the purpose is mostly for my general design knowledge, not for a specific problem; so assigning is very subjective.

Hope someone finds this question interesting.
0
Comment
Question by:dttai
  • 4
8 Comments
 
LVL 17

Expert Comment

by:Daniel Reynolds
ID: 18805795
I have had good success using <div>'s and positioning them appropriately.

Using <divs> with absolute positioning gets rid of your problem of passing variables around to different pages. You would want to design for a specific page size to set up the div sizes just right. Or if you are good, you could determine the display size and have several optimum div sizes.


0
 

Author Comment

by:dttai
ID: 18805898
thanks xDJR
A friend of mine suggest using popup windows lol. I think it is a bad idea.
First, there are still the problem with passing parameters aroudn from page to page.
Second, it is not as friendly as the Google design

Woud that be possible for you to share with me your project which uses <div>. Or do you have any favorite reference on the Web while working on that project. I would like to see the thing in action, you know what I mean :)

thanks again
0
 
LVL 17

Accepted Solution

by:
Daniel Reynolds earned 500 total points
ID: 18811085
Define the style of the grid in the <head> section....
      <style type="text/css">
      
      #divGrid { BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 0px; OVERFLOW: auto; BORDER-LEFT: black 1px solid; WIDTH: 100%; BOTTOM: 100px; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; HEIGHT: 350px; layer-background-color: #E0E0E0 }
      #divGrid P { MARGIN: 0px; COLOR: #ffffff }
      #divGrid A:hover { WIDTH: 100%; HEIGHT: 100%;text-decoration: none; }
      #divGrid A { WIDTH: 100%; HEIGHT: 100%;text-decoration: none; }
      </style>


---in the body of your page define the grid you are putting content in.
---note, you can have several grids absolutely positioned, just play with the style above
---for positioning and size.
---The overflow:auto provides a scrolling window if content exceeds the width specified for the div

                <div id="divGrid" >
                    <!-- content goes here -->
                </div>
0
 
LVL 17

Expert Comment

by:Daniel Reynolds
ID: 18811090
Again, there are many ways to skin a cat, but this might be one you can make some use of.
0
 
LVL 17

Expert Comment

by:Daniel Reynolds
ID: 19250525
I am still interested in the disposition of this question. Dan
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Changes to XXX.exe.config file are not retrieved on restart. 3 39
bound data table problem 2 32
abstract class C# 1 31
need to convert function to c# 5 24
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question