SlideShare a Scribd company logo
bbyopen/App_Code/.DS_Store
bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb
Imports Microsoft.VisualBasic
Imports System.Xml.Linq
Public Class GoogleMapsAPIHelpers
Public Shared Function GetGeocodingSearchResults(ByVal
address As String) As XElement
'Use the Google Geocoding service to get information
about the user-entered address
'See
http://code.google.com/apis/maps/documentation/geocoding/ind
ex.html for more info...
Dim url =
String.Format("http://maps.google.com/maps/api/geocode/xml?a
ddress={0}&sensor=false",
HttpContext.Current.Server.UrlEncode(address))
'Load the XML into an XElement object (whee, LINQ to
XML!)
Dim results = XElement.Load(url)
'Check the status
Dim status = results.Element("status").Value
If status <> "OK" AndAlso status <> "ZERO_RESULTS"
Then
'Whoops, something else was wrong with the request...
Throw New ApplicationException("There was an error
with Google's Geocoding Service: " & status)
End If
Return results
End Function
End Class
bbyopen/App_Data/StoreLocations.mdf
bbyopen/App_Data/StoreLocations_log.LDF
bbyopen/Bin/Microsoft.Web.GeneratedImage.dll
bbyopen/Default.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content runat="server" ID="myHeadContent"
ContentPlaceHolderID="head">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script
>
<script type="text/javascript">
</script>
<script type="text/javascript">
function init_map(map_canvas_id, lat, lng, zoomLevel)
{
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas =
document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
var marker=new google.maps.Marker({
position:myLatLng,
});
marker.setMap(map);
}
</script>
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Welcome!</h2>
<p>
This demo shows how to use the <a
href="http://code.google.com/apis/maps/">Google Maps
API</a> to build a simple store locator
web application.
</p>
<p>
This demo site is powered by the
<code>StoreLocations.mdf</code> database in the
<code>App_Data</code> folder, which contains a single
table, <code>Stores</code>. This table has one record for
each store, specifying the StoreId, address, city, , zip code,
phone, hours,
and latitude and longitude coordinates. From the <a
href="FindAStore.aspx">Find a Store</a> page you can search
this
database by entering the ZIP code.
<a href="FindAStore.aspx">Give it a try!</a>
</p>
<h2>Best Buy Headquarters</h2>
<div id="my_map"
style="width:500px;height:400px;border:solid 1px
#333"></div>
<script type="text/javascript">
init_map('my_map', 44.863731,-93.306751, 16);
</script>
</asp:Content>
bbyopen/Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
End Class
bbyopen/FindAStore.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="FindAStore.aspx.vb" Inherits="FindAStore" %>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Find a Store Near You!</h2>
<p>
Enter your address, city, or postal code to find stores near
you!
</p>
<asp:UpdatePanel ID="upSearchUI" runat="server">
<ContentTemplate>
<asp:Panel runat="server" DefaultButton="btnSearch">
<b>Enter Zip Code:</b> <asp:TextBox
ID="txtSearch" Width="10%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqSearch"
ControlToValidate="txtSearch" runat="server"
ErrorMessage="[Required]"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:Button ID="btnSearch" runat="server"
Text="Search!" />
<b>Select Your Distance Radius:</b>
<asp:DropDownList ID="distanceDropDown"
runat="server">
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<asp:Label runat="server" ID="lblNoResults"
Visible="false" ForeColor="Red" Font-Italic="true">The
address you entered is not known or understood. Try
simplifying the address, or enter just a city, region, or postal
code...</asp:Label>
<asp:ListView ID="lvDidYouMean" runat="server">
<LayoutTemplate>
<div style="padding-left: 25px; margin-top:
10px;">
<b>Did you mean...</b>
<ol>
<asp:PlaceHolder runat="server"
ID="itemPlaceholder"></asp:PlaceHolder>
</ol>
</div>
</LayoutTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkSelectDYM"
runat="server"
NavigateUrl='<%#
string.Format("ShowStoreLocations.aspx?Address={0}",
Server.UrlEncode(Container.DataItem.ToString())) %>'
Text='<%# Container.DataItem %>'
/>
</li>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
bbyopen/FindAStore.aspx.vb
Imports System.Linq
Imports System.Xml.Linq
Partial Class FindAStore
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.Load
txtSearch.Focus()
End Sub
Protected Sub btnSearch_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles btnSearch.Click
Dim results =
GoogleMapsAPIHelpers.GetGeocodingSearchResults(txtSearch.
Text.Trim())
Dim resultCount = results.Elements("result").Count()
lvDidYouMean.Visible = False
lblNoResults.Visible = False
'How many results did we get back?
If resultCount = 0 Then
'Eep, no results!
lblNoResults.Visible = True
ElseIf resultCount = 1 Then
'Got back just one result, show the stores that match the
address search
ShowResults(results)
Else
'Got back multiple results - We need to ask the user
which address they mean to use...
Dim matches = From result In
results.Elements("result") _
Let formatted_address =
result.Element("formatted_address").Value _
Select formatted_address
lvDidYouMean.DataSource = matches
lvDidYouMean.DataBind()
lvDidYouMean.Visible = True
End If
End Sub
Protected Sub ShowResults(ByVal results As XElement)
Response.Redirect("ShowStoreLocations.aspx?Address="
&
Server.UrlEncode(results.Element("result").Element("formatted
_address").Value))
End Sub
End Class
bbyopen/Images/NumberToImageHandler.ashx
<%@ WebHandler Language="VB"
Class="NumberToImageHandler" %>
Imports System
Imports System.Web
Imports Microsoft.Web
Imports System.Drawing
'For more information on dynamically generating images see:
'
' Dynamically Generating and Caching Images in ASP.NET
with the GeneratedImage Control
' http://www.4guysfromrolla.com/articles/042209-1.aspx
'
Public Class NumberToImageHandler : Inherits ImageHandler
Public Sub New()
MyBase.ContentType = Imaging.ImageFormat.Png
MyBase.EnableClientCache = True
End Sub
Public Overrides Function GenerateImage(ByVal parameters
As System.Collections.Specialized.NameValueCollection) As
Microsoft.Web.ImageInfo
Dim sz As SizeF = Nothing
Dim numberFont As New Font("Verdana", 12,
FontStyle.Bold)
Using dummyBitmap As New Bitmap(1, 1)
Dim dummyGraphics As Graphics =
Graphics.FromImage(dummyBitmap)
sz =
dummyGraphics.MeasureString(parameters("number"),
numberFont)
End Using
Dim realWidth = sz.Width + 6
Dim realHeight = sz.Height + 4
Dim realBitmap As New
Bitmap(Convert.ToInt32(realWidth),
Convert.ToInt32(realHeight))
Dim realGraphics As Graphics =
Graphics.FromImage(realBitmap)
realGraphics.Clear(Color.Transparent)
realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth,
realHeight)
realGraphics.DrawString(parameters("number"),
numberFont, New SolidBrush(Color.White), 3, 2)
Return New ImageInfo(realBitmap)
End Function
End Class
bbyopen/Images/NumberToImageHandlerCS.ashx
<%@ WebHandler Language="C#"
Class="NumberToImageHandlerCS" %>
using System;
using System.Web;
using Microsoft.Web;
using System.Drawing;
using System.Drawing.Imaging;
//For more information on dynamically generating images see:
//
// Dynamically Generating and Caching Images in ASP.NET
with the GeneratedImage Control
// http://www.4guysfromrolla.com/articles/042209-1.aspx
//
public class NumberToImageHandlerCS : ImageHandler
{
public NumberToImageHandlerCS()
{
base.ContentType = ImageFormat.Png;
base.EnableClientCache = true;
}
public override ImageInfo
GenerateImage(System.Collections.Specialized.NameValueColl
ection parameters)
{
SizeF sz;
var numberFont = new Font("Verdana", 12,
FontStyle.Bold);
using (var dummyBitmap = new Bitmap(1, 1)) {
var dummyGraphics =
Graphics.FromImage(dummyBitmap);
sz =
dummyGraphics.MeasureString(parameters["number"],
numberFont);
}
var realWidth = sz.Width + 6;
var realHeight = sz.Height + 4;
var realBitmap = new Bitmap(Convert.ToInt32(realWidth),
Convert.ToInt32(realHeight));
var realGraphics = Graphics.FromImage(realBitmap);
realGraphics.Clear(Color.Transparent);
realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth,
realHeight);
realGraphics.DrawString(parameters["number"],
numberFont, new SolidBrush(Color.White), 3, 2);
return new ImageInfo(realBitmap);
}
}
bbyopen/Scripts/GoogleMapHelpers.js
var currentlyOpenedInfoWindow = null;
function init_map(map_canvas_id, lat, lng, zoom, markers,
infoWindowContents) {
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoom,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas =
document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
if (markers && markers.length > 0) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker(markers[i]);
marker.setMap(map);
bounds.extend(marker.getPosition());
if (infoWindowContents &&
infoWindowContents.length > i)
createInfoWindow(map, marker,
infoWindowContents[i]);
}
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
}
}
function createInfoWindow(map, marker,
infoWindowProperties) {
var info = new
google.maps.InfoWindow(infoWindowProperties);
google.maps.event.addListener(marker, 'click', function() {
if (currentlyOpenedInfoWindow != null)
currentlyOpenedInfoWindow.close();
info.open(map, marker);
currentlyOpenedInfoWindow = info;
});
}
bbyopen/ShowStoreLocations.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="ShowStoreLocations.aspx.vb"
Inherits="ShowStoreLocations" %>
<asp:Content runat="server" ID="headContent"
ContentPlaceHolderID="head">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script
>
<script type="text/javascript"
src="Scripts/GoogleMapHelpers.js"></script>
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Store Locations Near <asp:Label ID="lblAddress"
runat="server"></asp:Label></h2>
<p>
<a href="FindAStore.aspx">&lt;&lt; Enter a new
search...</a>
</p>
<div id="map_canvas" class="map-area"></div>
<asp:UpdatePanel ID="upSearchResults"
UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ListView ID="lvSearchResults" runat="server"
DataSourceID="dsSearchResults">
<EmptyDataTemplate>
<div id="noResults">
<p>
There are no branches within 15 miles of the
address you entered. Please try again...
</p>
<p>
<b>Hint:</b> Try entering a zip code like
77037
</p>
</div>
</EmptyDataTemplate>
<LayoutTemplate>
<table cellspacing="0" cellpadding="5"
rules="all" class="searchResults">
<tr>
<th>
<asp:LinkButton runat="server"
ID="lbSortStoreId" CommandName="Sort"
CommandArgument="StoreNumber">Store #</asp:LinkButton>
</th>
<th>
<asp:LinkButton runat="server"
ID="lbSortDistance" CommandName="Sort"
CommandArgument="DistanceFromAddress">Distance</asp:Li
nkButton>
</th>
<th>Address</th>
</tr>
<asp:PlaceHolder runat="server"
ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("StoreId")%></td>
<td><%# Eval("DistanceFromAddress",
"{0:0.00}")%> miles</td>
<td>
<table>
<tr>
<td>
<asp:Image runat="server"
ID="imgIcon"
ImageUrl='<%#
string.Format("~/Images/NumberToImageHandler.ashx?number
={0}", Container.DisplayIndex + 1) %>' />
</td>
<td>
<%# Eval("Address")%><br />
<%# Eval("City")%>, <%#
Eval("postalCode")%><br />
<%# Eval("phone")%> <%#
Eval("hours")%>
</td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="dsSearchResults"
runat="server"
ConnectionString="<%$
ConnectionStrings:StoreLocationsConnectionString %>"
SelectCommand="SELECT StoreId, Address, City,
postalCode, phone, hours, lat, lng, SQRT(POWER(lat - @lat, 2)
+ POWER(lng - @lng, 2)) * 62.1371192 AS
DistanceFromAddress FROM Stores WHERE (ABS(lat - @lat)
&lt; 0.25) AND (ABS(lng - @lng) &lt; 0.25) ORDER BY
DistanceFromAddress">
<SelectParameters>
<asp:Parameter Name="lat" />
<asp:Parameter Name="lng" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
bbyopen/ShowStoreLocations.aspx.vb
Imports System.Collections.Generic
Imports System.Data
Partial Class ShowStoreLocations
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim address = Request.QueryString("Address")
If String.IsNullOrEmpty(address) Then
Response.Redirect("FindAStore.aspx")
End If
'Get the lat/long info about the address
Dim results =
GoogleMapsAPIHelpers.GetGeocodingSearchResults(address)
lblAddress.Text = address
'Set the latitude and longtitude parameters based on the
address being searched on
Dim lat =
results.Element("result").Element("geometry").Element("locatio
n").Element("lat").Value
Dim lng =
results.Element("result").Element("geometry").Element("locatio
n").Element("lng").Value
dsSearchResults.SelectParameters("lat").DefaultValue =
lat
dsSearchResults.SelectParameters("lng").DefaultValue
= lng
lvSearchResults.DataBind()
'Loop through each nearby location and build up the
JavaScript to place the markers
Dim locations As New List(Of String)
Dim overlayContents As New List(Of String)
Dim nearbyLocations =
CType(dsSearchResults.Select(DataSourceSelectArguments.Em
pty), DataView)
Dim count = 1
For Each location As DataRowView In nearbyLocations
locations.Add(String.Format("{{ title: ""Store
#{0}"", position: new google.maps.LatLng({1}, {2}), icon:
""Images/NumberToImageHandler.ashx?number={3}"" }}",
location("StoreId"), location("lat"), location("lng"), count))
overlayContents.Add(String.Format("{{ content:
""<div class=""infoWindow""><b>Store #{0}</b><br
/>{1}<br />{2}, {3} {4}</div>"" }}", location("StoreId"),
location("Address"), location("City"), location("postalCode"),
location("phone")))
count += 1
Next
Dim locationsJson = "[" & String.Join(",",
locations.ToArray()) & "]"
Dim overlayContentsJson = "[" & String.Join(",",
overlayContents.ToArray()) & "]"
' Inject the Google Maps script
ClientScript.RegisterStartupScript(Me.GetType(),
"Google Maps Initialization", _
String.Format("init_map('map_canvas', {0}, {1}, 13, {2},
{3});", lat, lng, locationsJson, overlayContentsJson), True)
End If
End Sub
End Class
bbyopen/Site.master
Unit 4 Assignment 1 Best Buy Store Locator
Alex Benavides
HomeFind a Store
ASP.NET application designed by Alex Benavides.
IT4795 Unit 4 Assignment 1
bbyopen/Site.master.vb
Partial Class Site
Inherits System.Web.UI.MasterPage
End Class
bbyopen/Styles/CustomStyles.css
.skm_BookReviewContainer
{
text-align: center;
}
.skm_BookReview
{
}
.skm_BookReviewByline
{
font-size: 85%;
}
.skm_EditRow
{
background-color: #DDD;
}
.skm_RowLabel
{
font-weight: bold;
text-align: right;
}
pre b
{
color: Red;
}
table.searchResults {
width: 95%;
border: 1px solid black;
}
table.searchResults th {
background-color: #fee;
}
#noResults {
padding-left: 25px;
color: Red;
}
.map-area {
width: 95%;
height: 400px;
margin-bottom: 15px;
border: solid 1px #333;
}
.infoWindow {
line-height: normal;
}
bbyopen/Styles/LICENCE.txt
*****************************************************
*********************
* *
* The Sinorcaish Stylesheet *
* Copyright (C) 2004-07, John Zaitseff *
* *
*****************************************************
*********************
You may freely redistribute and/or modify the Sinorcaish
stylesheet files
"sinorcaish-screen.css" and "sinorcaish-print.css" on the
condition that
the original copyright notice is preserved. The same condition
applies to
the overview document "index.html", to the sample document
"sample.html"
and to the logo image instructions "logo.html". You may
redistribute and/
or modify the template file "template.html" without ANY such
restriction.
You may freely redistribute unmodified versions of the
complete Sinorcaish
stylesheet archives.
These conditions may be waived; write to John Zaitseff for
details:
Postal: John Zaitseff,
The ZAP Group,
Unit 6, 116 Woodburn Road,
Berala, NSW, 2141,
Australia
E-mail: [email protected]
bbyopen/Styles/sinorcaish-screen.css
/****************************************************
********************
* *
* Sinorcaish Screen-based Style Sheet *
* Copyright (C) 2004-07, John Zaitseff *
* *
*****************************************************
*******************/
/* Author: John Zaitseff <[email protected]>
Version: 1.3
$Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $
This file provides the Sinorcaish style sheet for screen-based
user
agents (ie, for ordinary Web browsers). This file conforms to
the
Cascading Style Sheets 2.1 specification.
The design of Sinorcaish is influenced by Sinorca (available
from the
Open Source Web Design site, http://www.oswd.org/), which
in turn was
based on the Acronis company web site
(http://www.acronis.com/). You
can find more information about this design from its home
page on the
ZAP Group web site,
http://www.zap.org.au/documents/styles/sinorcaish/.
This file may be redistributed and/or modified on the
condition that
the original copyright notice is retained.
*/
/********** Global Styles **********/
/* The global font size is set to 90% as */
/* most browsers' normal font size is too */
/* large, at least when using Verdana */
body {
font-family: Verdana, "DejaVu Sans", "Bitstream Vera
Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 90%; /* Allow IE/Win to resize the
document */
color: black;
background: White;
margin: 0;
padding: 0;
border: none;
}
.hidden { /* Used for content that should be
displayed */
/* by non-stylesheet-aware browsers
*/
display: none !important;
}
.notprinted { /* Used for content that should not be
*/
} /* printed to paper */
/* Headings */
h1, /* Headings (H1-H6) should only be used
in */
h2, /* the main content area */
h3 {
font-weight: bold;
text-align: left;
margin: 0.5em 0 0 0;
padding: 0;
}
h4,
h5,
h6 {
font-weight: bold;
text-align: left;
margin: 1.25em 0 0 0;
padding: 0;
}
h1 { font-size: 175% }
h2 { font-size: 145% }
h3 { font-size: 120% }
h4 { font-size: 105% }
h5 { font-size: 80% }
h6 { font-size: 65% }
/* Anchors */
a:link {
text-decoration: none;
color: #0066CC;
background: transparent;
}
a:visited {
text-decoration: none;
color: #003399;
background: transparent;
}
a:hover,
a:active {
text-decoration: underline;
}
/* Inline elements and classes */
/* This style sheet assumes B, BIG, EM, I,
*/
/* SMALL, STRONG, SUB and SUP are
defined */
/* by the browser as per the HTML4 sample
*/
/* style sheet. */
code,
kbd,
samp,
tt {
font-family: "Courier New", Courier, monospace;
font-size: 115%; /* Courier tends to be a little too
small */
line-height: 1.0; /* Otherwise lines tend to spread out
*/
}
kbd,
code.markup, /* HTML/CSS markup */
span.markup, /* Alternative form for HTML/CSS
markup */
.title { /* Title in floating boxes / left sidebar */
font-weight: bolder;
}
abbr,
acronym {
font: inherit; /* Don't use small-caps, etc. */
}
.tooltip {
cursor: help;
border-bottom: 1px dotted #CCCCCC;
}
abbr[title],
acronym[title] {
cursor: help;
border-bottom: 1px dotted #CCCCCC;
}
cite,
dfn,
var,
.fn, /* Filename */
.url, /* Uniform Resource Locator */
.email { /* E-mail address */
font-style: italic;
}
.program, /* Command-line name of a computer
program */
.window, /* Window or dialog box name */
.menu, /* Menu item in a computer program
*/
.gui, /* Generic GUI element in a computer
program */
.key { /* Keypress in a computer program */
font-weight: bolder;
}
.clearboxes { /* Clear navboxes and floatboxes */
clear: right;
}
.unicode {
font-family: "Arial Unicode MS", "Lucida Sans Unicode",
Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans",
Arial, Helvetica, sans-serif;
}
/* Block-inline elements and classes */
img {
vertical-align: baseline;
margin: 0;
padding: 0;
border: none;
}
img.icon16 { /* For 16x16 file-type icons */
vertical-align: -2px;
}
del,
del * { /* Required for Mozilla */
text-decoration: line-through;
}
ins,
ins * { /* Required for Mozilla */
text-decoration: underline;
}
.floatleft { /* Left-floating images and spans */
margin: 0.5em 1.5em 0.5em 0;
float: left;
}
.floatright { /* Right-floating images and spans */
margin: 0.5em 0 0.5em 1.5em;
float: right;
}
.nowrap {
white-space: nowrap;
}
/* Block elements */
p {
margin: 1em 0;
padding: 0;
}
blockquote { /* Should only be used in main
content area, */
/* floating boxes or left sidebar. */
margin: 1em 2.5em;
padding: 0;
}
pre { /* Should only be used in main content area
*/
/* and floating boxes. */
font-family: "Courier New", Courier, monospace;
font-size: 95%; /* Courier tends to be a little too
small */
line-height: 1.2;
margin: 1em 2.5em;
padding: 0;
}
pre code,
pre kbd,
pre samp,
pre tt {
font-size: 100%; /* PRE is already enlarged above */
line-height: 1.2; /* Use same value as for PRE above */
}
hr {
color: #999999;
background: transparent;
height: 1px; /* Required for IE/Win */
margin: 0;
padding: 0;
border-color: #999999;
border-width: 1px;
border-style: none none solid none;
}
hr.lighter { /* Warning: not printed out on paper
*/
color: #F0F0F0;
background: transparent;
border-color: #F0F0F0;
}
/* Lists */
ol {
list-style: decimal outside;
margin: 1em 0;
padding: 0 0 0 2.5em;
}
ol.alpha {
list-style-type: lower-alpha;
}
ol.number {
list-style-type: decimal;
}
ul {
list-style: square outside;
margin: 1em 0;
padding: 0 0 0 2.5em;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin-top: 0;
margin-bottom: 0;
}
ol ul, /* Override possible browser styles */
ol ol ul,
ol ul ul,
ul ul,
ul ol ul,
ul ul ul {
list-style: square outside;
}
li {
margin: 0;
padding: 0;
}
dl {
margin: 1em 0;
padding: 0;
}
dt {
font: inherit; /* Don't make the text bold by default
*/
margin: 1em 0 0.25em 0;
padding: 0;
}
dd {
margin: 0 0 1em 2.5em;
padding: 0;
}
/* Tables */
/* Tables should never be used for visual */
/* formatting: that is the role of CSS! */
table.simple {
color: inherit;
background: inherit; /* Don't make tables transparent
*/
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin: 0.5em 2.5em;
padding: 0;
border: 1px solid #999999;
}
table.simple caption {
text-align: center;
caption-side: top;
margin: 0 2.5em 0.75em;
padding: 0;
border: none;
}
table.simple td,
table.simple th {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0.25em 0.5em;
border: 1px solid #999999;
}
table.simple th,
table.simple td.highlight,
table.simple th.highlight {
font-weight: bold;
color: inherit;
background: #F0F0F0;
}
table.simple td.lighter,
table.simple th.lighter {
color: inherit;
background: #F8F8F8;
}
table.simple td.left,
table.simple th.left {
text-align: left;
}
table.simple td.center,
table.simple th.center {
text-align: center;
}
table.simple td.right,
table.simple th.right {
text-align: right;
}
/* Forms */
form {
margin: 1em 0;
padding: 0;
border: none;
}
input,
button,
select,
fieldset,
legend {
font-family: Verdana, "DejaVu Sans", "Bitstream Vera
Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 95%;
color: black;
background: inherit;
vertical-align: middle;
}
textarea {
font-family: "Courier New", Courier, monospace;
font-size: 100%;
color: black;
background: inherit;
vertical-align: middle;
}
fieldset {
font-size: 100%;
margin: 1em 0;
border: 1px solid #999999;
}
legend {
font-size: 100%;
margin: 0 0.5em;
padding: 0 0.25em;
border: none;
}
table.formtable {
color: inherit;
background: inherit;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin: 0;
padding: 0;
border: none;
}
table.formtable td,
table.formtable th {
text-align: justify;
vertical-align: middle;
margin: 0;
padding: 0.25em 0.5em;
border: none;
}
table.formtable th {
text-align: center;
font-weight: bold;
}
table.formtable td.label,
table.formtable th.label {
text-align: right;
vertical-align: top;
}
table.formtable td.vertspace,
table.formtable th.vertspace {
empty-cells: show;
margin: 0;
padding: 0.5em 0;
height: 1em; /* Required for IE/Win */
}
table.formtable fieldset {
margin: 0;
}
table.formtable fieldset td,
table.formtable fieldset th {
margin: 0.25em 0.5em;
}
.reqfield {
color: red;
background: transparent;
font-weight: bolder;
}
.info {
color: gray;
background: transparent;
font-size: 90%;
}
/* The following HTML elements should NOT be used in
documents using this
style sheet:
address - use the #footer style instead
q - use &ldquo; and &rdquo; instead
*/
/********** Styles for Main Content **********/
#main {
text-align: justify;
line-height: 1.5;
color: black;
background: white;
margin: 0 0 0 12.5em;
padding: 0.1em 1.5em 0.5em 1em;
border-left: 1px solid #999999;
}
#main h1 { /* Should be used once, following
navhead */
color: #999999;
background: transparent;
margin: 0 0 0.5em 0;
}
#main .highlight { /* Highlight box (for warnings, etc) */
color: inherit;
background: #F0F0F0;
margin: 1em 0;
padding: 1em 2.5em;
border: 1px solid #999999;
}
#main .totop { /* For "Top ^" lines in FAQs, etc */
font-size: 90%;
text-align: right;
margin: -0.75em 0 1em 0;
padding: 0 0 0.25em 0;
border-bottom: 1px solid #F0F0F0;
}
#main table.simple td.highlight, /* Else "#main .highlight" will
override */
#main table.simple th.highlight {
margin: 0;
padding: 0.25em 0.5em;
}
/* Other styles related to the main content */
#mainlink { /* "Skip to main content" link */
display: none !important;
}
#navhead { /* "Path to this page" information */
/* Warning: not printed out on paper */
font-size: 90%;
}
#navhead hr {
display: none;
}
#endmain {
visibility: hidden;
clear: both; /* Doesn't always work under IE/Win */
}
/********** Styles for Floating Boxes **********/
/* "navbox" is used to provide intra/inter-
*/
/* page links; it is NOT printed out on */
/* paper. "floatbox" is used to provide */
/* floating boxes that may appear anywhere
*/
/* in the main content; they ARE printed.
*/
.floatbox,
.navbox {
overflow: visible;
font-size: 95%;
line-height: 1.25;
margin: 0 0 0.75em 1.5em;
padding: 0.5em 1em;
border: 1px solid #999999;
float: right;
clear: right;
}
.floatbox {
color: black;
background: #F0F0F0;
width: 35%;
}
.navbox {
text-align: left;
color: black;
background: white;
width: 12.5em;
}
.floatbox hr, /* Used for non-stylesheet-aware
browsers */
.navbox hr {
display: none !important;
}
.floatbox p,
.navbox p {
margin: 0.75em 0;
padding: 0;
}
.floatbox ol,
.floatbox ul {
margin: 0.75em 0;
padding: 0 0 0 1.5em;
}
.navbox ol,
.navbox ul {
margin: 0.5em 0;
padding: 0 0 0 1.5em;
}
.floatbox blockquote {
margin: 0.75em 1.5em;
padding: 0;
}
.floatbox pre {
font-size: 95%;
margin: 0.75em 1.5em;
padding: 0;
}
.floatbox dt {
margin: 0.75em 0;
padding: 0;
}
.floatbox dt {
margin: 0.75em 0 0.25em 0;
padding: 0;
}
.floatbox dd {
margin: 0 0 0.75em 1.5em;
padding: 0;
}
#main .floatbox .highlight {
color: inherit;
background: white;
margin: 0.75em 0;
padding: 0.75em 1.5em;
}
#main .floatbox table.simple {
margin: 0.75em 0;
}
#main .floatbox table.simple th,
#main .floatbox table.simple td.highlight,
#main .floatbox table.simple th.highlight {
color: inherit;
background: white;
margin: 0;
padding: 0.25em 0.5em;
}
/********** Styles for Header **********/
/* In this style sheet, headers are composed
*/
/* of three parts: left, right and subheader
*/
/* Left part is ideally an image. */
#header { /* Warning: not printed out on paper */
color: #003399;
background: #8CA8E6;
}
#header a:link,
#header a:visited {
color: #003399;
background: transparent;
}
#header .highlight,
#header a.highlight:link,
#header a.highlight:visited {
color: white;
background: transparent;
}
/* Left part of header (ideally an image but may be a link) */
#header div.left {
float: left;
clear: left;
margin: 0;
padding: 0;
}
#header div.left img {
display: block; /* Otherwise IMG is an inline, causing
gaps */
}
#header div.left,
#header div.left a:link,
#header div.left a:visited {
font-size: 200%;
font-weight: bold;
text-decoration: none;
color: white;
background: transparent;
}
#header div.left p {
margin: 0 0 0 0.25em;
padding: 0;
}
#header div.left .alt {
color: #FF9800;
background: transparent;
}
/* Right part of header is for external/global links, search, etc
*/
#header div.right {
font-size: 90%;
text-align: right;
margin: 0;
padding: 0.5em 1.17em 0 1em;
float: right;
clear: right;
}
#header div.right a:link,
#header div.right a:visited {
margin: 0;
padding: 0 0.5em;
}
#header div.right form {
margin: 0;
padding: 0.25em 0.5em 0 0;
}
#header div.right form input {
font-size: 95%;
vertical-align: middle;
}
/* Subheader for global links */
#header div.subheader {
color: white;
background: #003399;
margin: 0;
padding: 0;
border: 1px solid #003399; /* Required for IE/Win */
clear: both;
}
#header div.subheader p { /* To overcome an IE/Win
unwanted padding */
/* bug, still present in IE7. */
margin: 0;
padding: 0.5em;
}
#header div.subheader a:link,
#header div.subheader a:visited {
font-weight: bolder;
color: white;
background: transparent;
margin: 0;
padding: 0 0.5em;
}
#header div.subheader .highlight,
#header div.subheader a.highlight:link,
#header div.subheader a.highlight:visited {
color: #FDA05E;
background: transparent;
}
/********** Styles for Left Sidebar **********/
#sidebar { /* Warning: not printed out on paper */
width: 12.5em;
border-right: 1px solid #999999;
float: left;
background-color:#F0F0F0;
clear: both;
}
#sidebar div {
font-size: 95%;
margin: 0;
padding: 0.25em 0.25em;
}
#sidebar div.lighter {
color: inherit;
background: white;
}
#sidebar p {
margin: 0.5em 0;
}
#sidebar .title a:link,
#sidebar .title a:visited {
color: black;
background: transparent;
}
#sidebar ul {
list-style: none outside;
margin: 0.5em 0;
padding: 0;
}
#sidebar ul li {
margin: 0;
padding: 0.125em 0;
}
#sidebar ul li.highlight {
color: inherit;
background: white;
margin-left: -1em;
margin-right: -1em;
padding-left: 1em;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
#sidebar ul li.highlight a:link,
#sidebar ul li.highlight a:visited {
color: black;
background: transparent;
}
/********** Styles for Footer **********/
#footer {
font-size: 90%;
text-align: left;
color: white;
background: #6381DC;
margin: 0;
padding: 0.5em 1.67em 0.5em 15.25em;
clear: both;
}
#footer a:link,
#footer a:visited {
text-decoration: underline;
color: white;
background: transparent;
}
#footer hr {
display: none !important;
}
/* End of the Sinorcaish style sheet */
bbyopen/web.config
bbyopen/App_Code/.DS_Store
bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb
Imports Microsoft.VisualBasic
Imports System.Xml.Linq
Public Class GoogleMapsAPIHelpers
Public Shared Function GetGeocodingSearchResults(ByVal
address As String) As XElement
'Use the Google Geocoding service to get information
about the user-entered address
'See
http://code.google.com/apis/maps/documentation/geocoding/ind
ex.html for more info...
Dim url =
String.Format("http://maps.google.com/maps/api/geocode/xml?a
ddress={0}&sensor=false",
HttpContext.Current.Server.UrlEncode(address))
'Load the XML into an XElement object (whee, LINQ to
XML!)
Dim results = XElement.Load(url)
'Check the status
Dim status = results.Element("status").Value
If status <> "OK" AndAlso status <> "ZERO_RESULTS"
Then
'Whoops, something else was wrong with the request...
Throw New ApplicationException("There was an error
with Google's Geocoding Service: " & status)
End If
Return results
End Function
End Class
bbyopen/App_Data/StoreLocations.mdf
bbyopen/App_Data/StoreLocations_log.LDF
bbyopen/Bin/Microsoft.Web.GeneratedImage.dll
bbyopen/Default.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content runat="server" ID="myHeadContent"
ContentPlaceHolderID="head">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script
>
<script type="text/javascript">
</script>
<script type="text/javascript">
function init_map(map_canvas_id, lat, lng, zoomLevel)
{
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas =
document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
var marker=new google.maps.Marker({
position:myLatLng,
});
marker.setMap(map);
}
</script>
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Welcome!</h2>
<p>
This demo shows how to use the <a
href="http://code.google.com/apis/maps/">Google Maps
API</a> to build a simple store locator
web application.
</p>
<p>
This demo site is powered by the
<code>StoreLocations.mdf</code> database in the
<code>App_Data</code> folder, which contains a single
table, <code>Stores</code>. This table has one record for
each store, specifying the StoreId, address, city, , zip code,
phone, hours,
and latitude and longitude coordinates. From the <a
href="FindAStore.aspx">Find a Store</a> page you can search
this
database by entering the ZIP code.
<a href="FindAStore.aspx">Give it a try!</a>
</p>
<h2>Best Buy Headquarters</h2>
<div id="my_map"
style="width:500px;height:400px;border:solid 1px
#333"></div>
<script type="text/javascript">
init_map('my_map', 44.863731,-93.306751, 16);
</script>
</asp:Content>
bbyopen/Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
End Class
bbyopen/FindAStore.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="FindAStore.aspx.vb" Inherits="FindAStore" %>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Find a Store Near You!</h2>
<p>
Enter your address, city, or postal code to find stores near
you!
</p>
<asp:UpdatePanel ID="upSearchUI" runat="server">
<ContentTemplate>
<asp:Panel runat="server" DefaultButton="btnSearch">
<b>Enter Zip Code:</b> <asp:TextBox
ID="txtSearch" Width="10%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqSearch"
ControlToValidate="txtSearch" runat="server"
ErrorMessage="[Required]"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:Button ID="btnSearch" runat="server"
Text="Search!" />
<b>Select Your Distance Radius:</b>
<asp:DropDownList ID="distanceDropDown"
runat="server">
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<asp:Label runat="server" ID="lblNoResults"
Visible="false" ForeColor="Red" Font-Italic="true">The
address you entered is not known or understood. Try
simplifying the address, or enter just a city, region, or postal
code...</asp:Label>
<asp:ListView ID="lvDidYouMean" runat="server">
<LayoutTemplate>
<div style="padding-left: 25px; margin-top:
10px;">
<b>Did you mean...</b>
<ol>
<asp:PlaceHolder runat="server"
ID="itemPlaceholder"></asp:PlaceHolder>
</ol>
</div>
</LayoutTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkSelectDYM"
runat="server"
NavigateUrl='<%#
string.Format("ShowStoreLocations.aspx?Address={0}",
Server.UrlEncode(Container.DataItem.ToString())) %>'
Text='<%# Container.DataItem %>'
/>
</li>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
bbyopen/FindAStore.aspx.vb
Imports System.Linq
Imports System.Xml.Linq
Partial Class FindAStore
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.Load
txtSearch.Focus()
End Sub
Protected Sub btnSearch_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles btnSearch.Click
Dim results =
GoogleMapsAPIHelpers.GetGeocodingSearchResults(txtSearch.
Text.Trim())
Dim resultCount = results.Elements("result").Count()
lvDidYouMean.Visible = False
lblNoResults.Visible = False
'How many results did we get back?
If resultCount = 0 Then
'Eep, no results!
lblNoResults.Visible = True
ElseIf resultCount = 1 Then
'Got back just one result, show the stores that match the
address search
ShowResults(results)
Else
'Got back multiple results - We need to ask the user
which address they mean to use...
Dim matches = From result In
results.Elements("result") _
Let formatted_address =
result.Element("formatted_address").Value _
Select formatted_address
lvDidYouMean.DataSource = matches
lvDidYouMean.DataBind()
lvDidYouMean.Visible = True
End If
End Sub
Protected Sub ShowResults(ByVal results As XElement)
Response.Redirect("ShowStoreLocations.aspx?Address="
&
Server.UrlEncode(results.Element("result").Element("formatted
_address").Value))
End Sub
End Class
bbyopen/Images/NumberToImageHandler.ashx
<%@ WebHandler Language="VB"
Class="NumberToImageHandler" %>
Imports System
Imports System.Web
Imports Microsoft.Web
Imports System.Drawing
'For more information on dynamically generating images see:
'
' Dynamically Generating and Caching Images in ASP.NET
with the GeneratedImage Control
' http://www.4guysfromrolla.com/articles/042209-1.aspx
'
Public Class NumberToImageHandler : Inherits ImageHandler
Public Sub New()
MyBase.ContentType = Imaging.ImageFormat.Png
MyBase.EnableClientCache = True
End Sub
Public Overrides Function GenerateImage(ByVal parameters
As System.Collections.Specialized.NameValueCollection) As
Microsoft.Web.ImageInfo
Dim sz As SizeF = Nothing
Dim numberFont As New Font("Verdana", 12,
FontStyle.Bold)
Using dummyBitmap As New Bitmap(1, 1)
Dim dummyGraphics As Graphics =
Graphics.FromImage(dummyBitmap)
sz =
dummyGraphics.MeasureString(parameters("number"),
numberFont)
End Using
Dim realWidth = sz.Width + 6
Dim realHeight = sz.Height + 4
Dim realBitmap As New
Bitmap(Convert.ToInt32(realWidth),
Convert.ToInt32(realHeight))
Dim realGraphics As Graphics =
Graphics.FromImage(realBitmap)
realGraphics.Clear(Color.Transparent)
realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth,
realHeight)
realGraphics.DrawString(parameters("number"),
numberFont, New SolidBrush(Color.White), 3, 2)
Return New ImageInfo(realBitmap)
End Function
End Class
bbyopen/Images/NumberToImageHandlerCS.ashx
<%@ WebHandler Language="C#"
Class="NumberToImageHandlerCS" %>
using System;
using System.Web;
using Microsoft.Web;
using System.Drawing;
using System.Drawing.Imaging;
//For more information on dynamically generating images see:
//
// Dynamically Generating and Caching Images in ASP.NET
with the GeneratedImage Control
// http://www.4guysfromrolla.com/articles/042209-1.aspx
//
public class NumberToImageHandlerCS : ImageHandler
{
public NumberToImageHandlerCS()
{
base.ContentType = ImageFormat.Png;
base.EnableClientCache = true;
}
public override ImageInfo
GenerateImage(System.Collections.Specialized.NameValueColl
ection parameters)
{
SizeF sz;
var numberFont = new Font("Verdana", 12,
FontStyle.Bold);
using (var dummyBitmap = new Bitmap(1, 1)) {
var dummyGraphics =
Graphics.FromImage(dummyBitmap);
sz =
dummyGraphics.MeasureString(parameters["number"],
numberFont);
}
var realWidth = sz.Width + 6;
var realHeight = sz.Height + 4;
var realBitmap = new Bitmap(Convert.ToInt32(realWidth),
Convert.ToInt32(realHeight));
var realGraphics = Graphics.FromImage(realBitmap);
realGraphics.Clear(Color.Transparent);
realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth,
realHeight);
realGraphics.DrawString(parameters["number"],
numberFont, new SolidBrush(Color.White), 3, 2);
return new ImageInfo(realBitmap);
}
}
bbyopen/Scripts/GoogleMapHelpers.js
var currentlyOpenedInfoWindow = null;
function init_map(map_canvas_id, lat, lng, zoom, markers,
infoWindowContents) {
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoom,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas =
document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
if (markers && markers.length > 0) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker(markers[i]);
marker.setMap(map);
bounds.extend(marker.getPosition());
if (infoWindowContents &&
infoWindowContents.length > i)
createInfoWindow(map, marker,
infoWindowContents[i]);
}
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
}
}
function createInfoWindow(map, marker,
infoWindowProperties) {
var info = new
google.maps.InfoWindow(infoWindowProperties);
google.maps.event.addListener(marker, 'click', function() {
if (currentlyOpenedInfoWindow != null)
currentlyOpenedInfoWindow.close();
info.open(map, marker);
currentlyOpenedInfoWindow = info;
});
}
bbyopen/ShowStoreLocations.aspx
<%@ Page Title="" Language="VB"
MasterPageFile="~/Site.master" AutoEventWireup="false"
CodeFile="ShowStoreLocations.aspx.vb"
Inherits="ShowStoreLocations" %>
<asp:Content runat="server" ID="headContent"
ContentPlaceHolderID="head">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script
>
<script type="text/javascript"
src="Scripts/GoogleMapHelpers.js"></script>
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>Store Locations Near <asp:Label ID="lblAddress"
runat="server"></asp:Label></h2>
<p>
<a href="FindAStore.aspx">&lt;&lt; Enter a new
search...</a>
</p>
<div id="map_canvas" class="map-area"></div>
<asp:UpdatePanel ID="upSearchResults"
UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ListView ID="lvSearchResults" runat="server"
DataSourceID="dsSearchResults">
<EmptyDataTemplate>
<div id="noResults">
<p>
There are no branches within 15 miles of the
address you entered. Please try again...
</p>
<p>
<b>Hint:</b> Try entering a zip code like
77037
</p>
</div>
</EmptyDataTemplate>
<LayoutTemplate>
<table cellspacing="0" cellpadding="5"
rules="all" class="searchResults">
<tr>
<th>
<asp:LinkButton runat="server"
ID="lbSortStoreId" CommandName="Sort"
CommandArgument="StoreNumber">Store #</asp:LinkButton>
</th>
<th>
<asp:LinkButton runat="server"
ID="lbSortDistance" CommandName="Sort"
CommandArgument="DistanceFromAddress">Distance</asp:Li
nkButton>
</th>
<th>Address</th>
</tr>
<asp:PlaceHolder runat="server"
ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("StoreId")%></td>
<td><%# Eval("DistanceFromAddress",
"{0:0.00}")%> miles</td>
<td>
<table>
<tr>
<td>
<asp:Image runat="server"
ID="imgIcon"
ImageUrl='<%#
string.Format("~/Images/NumberToImageHandler.ashx?number
={0}", Container.DisplayIndex + 1) %>' />
</td>
<td>
<%# Eval("Address")%><br />
<%# Eval("City")%>, <%#
Eval("postalCode")%><br />
<%# Eval("phone")%> <%#
Eval("hours")%>
</td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="dsSearchResults"
runat="server"
ConnectionString="<%$
ConnectionStrings:StoreLocationsConnectionString %>"
SelectCommand="SELECT StoreId, Address, City,
postalCode, phone, hours, lat, lng, SQRT(POWER(lat - @lat, 2)
+ POWER(lng - @lng, 2)) * 62.1371192 AS
DistanceFromAddress FROM Stores WHERE (ABS(lat - @lat)
&lt; 0.25) AND (ABS(lng - @lng) &lt; 0.25) ORDER BY
DistanceFromAddress">
<SelectParameters>
<asp:Parameter Name="lat" />
<asp:Parameter Name="lng" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
bbyopen/ShowStoreLocations.aspx.vb
Imports System.Collections.Generic
Imports System.Data
Partial Class ShowStoreLocations
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim address = Request.QueryString("Address")
If String.IsNullOrEmpty(address) Then
Response.Redirect("FindAStore.aspx")
End If
'Get the lat/long info about the address
Dim results =
GoogleMapsAPIHelpers.GetGeocodingSearchResults(address)
lblAddress.Text = address
'Set the latitude and longtitude parameters based on the
address being searched on
Dim lat =
results.Element("result").Element("geometry").Element("locatio
n").Element("lat").Value
Dim lng =
results.Element("result").Element("geometry").Element("locatio
n").Element("lng").Value
dsSearchResults.SelectParameters("lat").DefaultValue =
lat
dsSearchResults.SelectParameters("lng").DefaultValue
= lng
lvSearchResults.DataBind()
'Loop through each nearby location and build up the
JavaScript to place the markers
Dim locations As New List(Of String)
Dim overlayContents As New List(Of String)
Dim nearbyLocations =
CType(dsSearchResults.Select(DataSourceSelectArguments.Em
pty), DataView)
Dim count = 1
For Each location As DataRowView In nearbyLocations
locations.Add(String.Format("{{ title: ""Store
#{0}"", position: new google.maps.LatLng({1}, {2}), icon:
""Images/NumberToImageHandler.ashx?number={3}"" }}",
location("StoreId"), location("lat"), location("lng"), count))
overlayContents.Add(String.Format("{{ content:
""<div class=""infoWindow""><b>Store #{0}</b><br
/>{1}<br />{2}, {3} {4}</div>"" }}", location("StoreId"),
location("Address"), location("City"), location("postalCode"),
location("phone")))
count += 1
Next
Dim locationsJson = "[" & String.Join(",",
locations.ToArray()) & "]"
Dim overlayContentsJson = "[" & String.Join(",",
overlayContents.ToArray()) & "]"
' Inject the Google Maps script
ClientScript.RegisterStartupScript(Me.GetType(),
"Google Maps Initialization", _
String.Format("init_map('map_canvas', {0}, {1}, 13, {2},
{3});", lat, lng, locationsJson, overlayContentsJson), True)
End If
End Sub
End Class
bbyopen/Site.master
Unit 4 Assignment 1 Best Buy Store Locator
Alex Benavides
HomeFind a Store
ASP.NET application designed by Alex Benavides.
IT4795 Unit 4 Assignment 1
bbyopen/Site.master.vb
Partial Class Site
Inherits System.Web.UI.MasterPage
End Class
bbyopen/Styles/CustomStyles.css
.skm_BookReviewContainer
{
text-align: center;
}
.skm_BookReview
{
}
.skm_BookReviewByline
{
font-size: 85%;
}
.skm_EditRow
{
background-color: #DDD;
}
.skm_RowLabel
{
font-weight: bold;
text-align: right;
}
pre b
{
color: Red;
}
table.searchResults {
width: 95%;
border: 1px solid black;
}
table.searchResults th {
background-color: #fee;
}
#noResults {
padding-left: 25px;
color: Red;
}
.map-area {
width: 95%;
height: 400px;
margin-bottom: 15px;
border: solid 1px #333;
}
.infoWindow {
line-height: normal;
}
bbyopen/Styles/LICENCE.txt
*****************************************************
*********************
* *
* The Sinorcaish Stylesheet *
* Copyright (C) 2004-07, John Zaitseff *
* *
*****************************************************
*********************
You may freely redistribute and/or modify the Sinorcaish
stylesheet files
"sinorcaish-screen.css" and "sinorcaish-print.css" on the
condition that
the original copyright notice is preserved. The same condition
applies to
the overview document "index.html", to the sample document
"sample.html"
and to the logo image instructions "logo.html". You may
redistribute and/
or modify the template file "template.html" without ANY such
restriction.
You may freely redistribute unmodified versions of the
complete Sinorcaish
stylesheet archives.
These conditions may be waived; write to John Zaitseff for
details:
Postal: John Zaitseff,
The ZAP Group,
Unit 6, 116 Woodburn Road,
Berala, NSW, 2141,
Australia
E-mail: [email protected]
bbyopen/Styles/sinorcaish-screen.css
/****************************************************
********************
* *
* Sinorcaish Screen-based Style Sheet *
* Copyright (C) 2004-07, John Zaitseff *
* *
*****************************************************
*******************/
/* Author: John Zaitseff <[email protected]>
Version: 1.3
$Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $
This file provides the Sinorcaish style sheet for screen-based
user
agents (ie, for ordinary Web browsers). This file conforms to
the
Cascading Style Sheets 2.1 specification.
The design of Sinorcaish is influenced by Sinorca (available
from the
Open Source Web Design site, http://www.oswd.org/), which
in turn was
based on the Acronis company web site
(http://www.acronis.com/). You
can find more information about this design from its home
page on the
ZAP Group web site,
http://www.zap.org.au/documents/styles/sinorcaish/.
This file may be redistributed and/or modified on the
condition that
the original copyright notice is retained.
*/
/********** Global Styles **********/
/* The global font size is set to 90% as */
/* most browsers' normal font size is too */
/* large, at least when using Verdana */
body {
font-family: Verdana, "DejaVu Sans", "Bitstream Vera
Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 90%; /* Allow IE/Win to resize the
document */
color: black;
background: White;
margin: 0;
padding: 0;
border: none;
}
.hidden { /* Used for content that should be
displayed */
/* by non-stylesheet-aware browsers
*/
display: none !important;
}
.notprinted { /* Used for content that should not be
*/
} /* printed to paper */
/* Headings */
h1, /* Headings (H1-H6) should only be used
in */
h2, /* the main content area */
h3 {
font-weight: bold;
text-align: left;
margin: 0.5em 0 0 0;
padding: 0;
}
h4,
h5,
h6 {
font-weight: bold;
text-align: left;
margin: 1.25em 0 0 0;
padding: 0;
}
h1 { font-size: 175% }
h2 { font-size: 145% }
h3 { font-size: 120% }
h4 { font-size: 105% }
h5 { font-size: 80% }
h6 { font-size: 65% }
/* Anchors */
a:link {
text-decoration: none;
color: #0066CC;
background: transparent;
}
a:visited {
text-decoration: none;
color: #003399;
background: transparent;
}
a:hover,
a:active {
text-decoration: underline;
}
/* Inline elements and classes */
/* This style sheet assumes B, BIG, EM, I,
*/
/* SMALL, STRONG, SUB and SUP are
defined */
/* by the browser as per the HTML4 sample
*/
/* style sheet. */
code,
kbd,
samp,
tt {
font-family: "Courier New", Courier, monospace;
font-size: 115%; /* Courier tends to be a little too
small */
line-height: 1.0; /* Otherwise lines tend to spread out
*/
}
kbd,
code.markup, /* HTML/CSS markup */
span.markup, /* Alternative form for HTML/CSS
markup */
.title { /* Title in floating boxes / left sidebar */
font-weight: bolder;
}
abbr,
acronym {
font: inherit; /* Don't use small-caps, etc. */
}
.tooltip {
cursor: help;
border-bottom: 1px dotted #CCCCCC;
}
abbr[title],
acronym[title] {
cursor: help;
border-bottom: 1px dotted #CCCCCC;
}
cite,
dfn,
var,
.fn, /* Filename */
.url, /* Uniform Resource Locator */
.email { /* E-mail address */
font-style: italic;
}
.program, /* Command-line name of a computer
program */
.window, /* Window or dialog box name */
.menu, /* Menu item in a computer program
*/
.gui, /* Generic GUI element in a computer
program */
.key { /* Keypress in a computer program */
font-weight: bolder;
}
.clearboxes { /* Clear navboxes and floatboxes */
clear: right;
}
.unicode {
font-family: "Arial Unicode MS", "Lucida Sans Unicode",
Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans",
Arial, Helvetica, sans-serif;
}
/* Block-inline elements and classes */
img {
vertical-align: baseline;
margin: 0;
padding: 0;
border: none;
}
img.icon16 { /* For 16x16 file-type icons */
vertical-align: -2px;
}
del,
del * { /* Required for Mozilla */
text-decoration: line-through;
}
ins,
ins * { /* Required for Mozilla */
text-decoration: underline;
}
.floatleft { /* Left-floating images and spans */
margin: 0.5em 1.5em 0.5em 0;
float: left;
}
.floatright { /* Right-floating images and spans */
margin: 0.5em 0 0.5em 1.5em;
float: right;
}
.nowrap {
white-space: nowrap;
}
/* Block elements */
p {
margin: 1em 0;
padding: 0;
}
blockquote { /* Should only be used in main
content area, */
/* floating boxes or left sidebar. */
margin: 1em 2.5em;
padding: 0;
}
pre { /* Should only be used in main content area
*/
/* and floating boxes. */
font-family: "Courier New", Courier, monospace;
font-size: 95%; /* Courier tends to be a little too
small */
line-height: 1.2;
margin: 1em 2.5em;
padding: 0;
}
pre code,
pre kbd,
pre samp,
pre tt {
font-size: 100%; /* PRE is already enlarged above */
line-height: 1.2; /* Use same value as for PRE above */
}
hr {
color: #999999;
background: transparent;
height: 1px; /* Required for IE/Win */
margin: 0;
padding: 0;
border-color: #999999;
border-width: 1px;
border-style: none none solid none;
}
hr.lighter { /* Warning: not printed out on paper
*/
color: #F0F0F0;
background: transparent;
border-color: #F0F0F0;
}
/* Lists */
ol {
list-style: decimal outside;
margin: 1em 0;
padding: 0 0 0 2.5em;
}
ol.alpha {
list-style-type: lower-alpha;
}
ol.number {
list-style-type: decimal;
}
ul {
list-style: square outside;
margin: 1em 0;
padding: 0 0 0 2.5em;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin-top: 0;
margin-bottom: 0;
}
ol ul, /* Override possible browser styles */
ol ol ul,
ol ul ul,
ul ul,
ul ol ul,
ul ul ul {
list-style: square outside;
}
li {
margin: 0;
padding: 0;
}
dl {
margin: 1em 0;
padding: 0;
}
dt {
font: inherit; /* Don't make the text bold by default
*/
margin: 1em 0 0.25em 0;
padding: 0;
}
dd {
margin: 0 0 1em 2.5em;
padding: 0;
}
/* Tables */
/* Tables should never be used for visual */
/* formatting: that is the role of CSS! */
table.simple {
color: inherit;
background: inherit; /* Don't make tables transparent
*/
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin: 0.5em 2.5em;
padding: 0;
border: 1px solid #999999;
}
table.simple caption {
text-align: center;
caption-side: top;
margin: 0 2.5em 0.75em;
padding: 0;
border: none;
}
table.simple td,
table.simple th {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0.25em 0.5em;
border: 1px solid #999999;
}
table.simple th,
table.simple td.highlight,
table.simple th.highlight {
font-weight: bold;
color: inherit;
background: #F0F0F0;
}
table.simple td.lighter,
table.simple th.lighter {
color: inherit;
background: #F8F8F8;
}
table.simple td.left,
table.simple th.left {
text-align: left;
}
table.simple td.center,
table.simple th.center {
text-align: center;
}
table.simple td.right,
table.simple th.right {
text-align: right;
}
/* Forms */
form {
margin: 1em 0;
padding: 0;
border: none;
}
input,
button,
select,
fieldset,
legend {
font-family: Verdana, "DejaVu Sans", "Bitstream Vera
Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 95%;
color: black;
background: inherit;
vertical-align: middle;
}
textarea {
font-family: "Courier New", Courier, monospace;
font-size: 100%;
color: black;
background: inherit;
vertical-align: middle;
}
fieldset {
font-size: 100%;
margin: 1em 0;
border: 1px solid #999999;
}
legend {
font-size: 100%;
margin: 0 0.5em;
padding: 0 0.25em;
border: none;
}
table.formtable {
color: inherit;
background: inherit;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin: 0;
padding: 0;
border: none;
}
table.formtable td,
table.formtable th {
text-align: justify;
vertical-align: middle;
margin: 0;
padding: 0.25em 0.5em;
border: none;
}
table.formtable th {
text-align: center;
font-weight: bold;
}
table.formtable td.label,
table.formtable th.label {
text-align: right;
vertical-align: top;
}
table.formtable td.vertspace,
table.formtable th.vertspace {
empty-cells: show;
margin: 0;
padding: 0.5em 0;
height: 1em; /* Required for IE/Win */
}
table.formtable fieldset {
margin: 0;
}
table.formtable fieldset td,
table.formtable fieldset th {
margin: 0.25em 0.5em;
}
.reqfield {
color: red;
background: transparent;
font-weight: bolder;
}
.info {
color: gray;
background: transparent;
font-size: 90%;
}
/* The following HTML elements should NOT be used in
documents using this
style sheet:
address - use the #footer style instead
q - use &ldquo; and &rdquo; instead
*/
/********** Styles for Main Content **********/
#main {
text-align: justify;
line-height: 1.5;
color: black;
background: white;
margin: 0 0 0 12.5em;
padding: 0.1em 1.5em 0.5em 1em;
border-left: 1px solid #999999;
}
#main h1 { /* Should be used once, following
navhead */
color: #999999;
background: transparent;
margin: 0 0 0.5em 0;
}
#main .highlight { /* Highlight box (for warnings, etc) */
color: inherit;
background: #F0F0F0;
margin: 1em 0;
padding: 1em 2.5em;
border: 1px solid #999999;
}
#main .totop { /* For "Top ^" lines in FAQs, etc */
font-size: 90%;
text-align: right;
margin: -0.75em 0 1em 0;
padding: 0 0 0.25em 0;
border-bottom: 1px solid #F0F0F0;
}
#main table.simple td.highlight, /* Else "#main .highlight" will
override */
#main table.simple th.highlight {
margin: 0;
padding: 0.25em 0.5em;
}
/* Other styles related to the main content */
#mainlink { /* "Skip to main content" link */
display: none !important;
}
#navhead { /* "Path to this page" information */
/* Warning: not printed out on paper */
font-size: 90%;
}
#navhead hr {
display: none;
}
#endmain {
visibility: hidden;
clear: both; /* Doesn't always work under IE/Win */
}
/********** Styles for Floating Boxes **********/
/* "navbox" is used to provide intra/inter-
*/
/* page links; it is NOT printed out on */
/* paper. "floatbox" is used to provide */
/* floating boxes that may appear anywhere
*/
/* in the main content; they ARE printed.
*/
.floatbox,
.navbox {
overflow: visible;
font-size: 95%;
line-height: 1.25;
margin: 0 0 0.75em 1.5em;
padding: 0.5em 1em;
border: 1px solid #999999;
float: right;
clear: right;
}
.floatbox {
color: black;
background: #F0F0F0;
width: 35%;
}
.navbox {
text-align: left;
color: black;
background: white;
width: 12.5em;
}
.floatbox hr, /* Used for non-stylesheet-aware
browsers */
.navbox hr {
display: none !important;
}
.floatbox p,
.navbox p {
margin: 0.75em 0;
padding: 0;
}
.floatbox ol,
.floatbox ul {
margin: 0.75em 0;
padding: 0 0 0 1.5em;
}
.navbox ol,
.navbox ul {
margin: 0.5em 0;
padding: 0 0 0 1.5em;
}
.floatbox blockquote {
margin: 0.75em 1.5em;
padding: 0;
}
.floatbox pre {
font-size: 95%;
margin: 0.75em 1.5em;
padding: 0;
}
.floatbox dt {
margin: 0.75em 0;
padding: 0;
}
.floatbox dt {
margin: 0.75em 0 0.25em 0;
padding: 0;
}
.floatbox dd {
margin: 0 0 0.75em 1.5em;
padding: 0;
}
#main .floatbox .highlight {
color: inherit;
background: white;
margin: 0.75em 0;
padding: 0.75em 1.5em;
}
#main .floatbox table.simple {
margin: 0.75em 0;
}
#main .floatbox table.simple th,
#main .floatbox table.simple td.highlight,
#main .floatbox table.simple th.highlight {
color: inherit;
background: white;
margin: 0;
padding: 0.25em 0.5em;
}
/********** Styles for Header **********/
/* In this style sheet, headers are composed
*/
/* of three parts: left, right and subheader
*/
/* Left part is ideally an image. */
#header { /* Warning: not printed out on paper */
color: #003399;
background: #8CA8E6;
}
#header a:link,
#header a:visited {
color: #003399;
background: transparent;
}
#header .highlight,
#header a.highlight:link,
#header a.highlight:visited {
color: white;
background: transparent;
}
/* Left part of header (ideally an image but may be a link) */
#header div.left {
float: left;
clear: left;
margin: 0;
padding: 0;
}
#header div.left img {
display: block; /* Otherwise IMG is an inline, causing
gaps */
}
#header div.left,
#header div.left a:link,
#header div.left a:visited {
font-size: 200%;
font-weight: bold;
text-decoration: none;
color: white;
background: transparent;
}
#header div.left p {
margin: 0 0 0 0.25em;
padding: 0;
}
#header div.left .alt {
color: #FF9800;
background: transparent;
}
/* Right part of header is for external/global links, search, etc
*/
#header div.right {
font-size: 90%;
text-align: right;
margin: 0;
padding: 0.5em 1.17em 0 1em;
float: right;
clear: right;
}
#header div.right a:link,
#header div.right a:visited {
margin: 0;
padding: 0 0.5em;
}
#header div.right form {
margin: 0;
padding: 0.25em 0.5em 0 0;
}
#header div.right form input {
font-size: 95%;
vertical-align: middle;
}
/* Subheader for global links */
#header div.subheader {
color: white;
background: #003399;
margin: 0;
padding: 0;
border: 1px solid #003399; /* Required for IE/Win */
clear: both;
}
#header div.subheader p { /* To overcome an IE/Win
unwanted padding */
/* bug, still present in IE7. */
margin: 0;
padding: 0.5em;
}
#header div.subheader a:link,
#header div.subheader a:visited {
font-weight: bolder;
color: white;
background: transparent;
margin: 0;
padding: 0 0.5em;
}
#header div.subheader .highlight,
#header div.subheader a.highlight:link,
#header div.subheader a.highlight:visited {
color: #FDA05E;
background: transparent;
}
/********** Styles for Left Sidebar **********/
#sidebar { /* Warning: not printed out on paper */
width: 12.5em;
border-right: 1px solid #999999;
float: left;
background-color:#F0F0F0;
clear: both;
}
#sidebar div {
font-size: 95%;
margin: 0;
padding: 0.25em 0.25em;
}
#sidebar div.lighter {
color: inherit;
background: white;
}
#sidebar p {
margin: 0.5em 0;
}
#sidebar .title a:link,
#sidebar .title a:visited {
color: black;
background: transparent;
}
#sidebar ul {
list-style: none outside;
margin: 0.5em 0;
padding: 0;
}
#sidebar ul li {
margin: 0;
padding: 0.125em 0;
}
#sidebar ul li.highlight {
color: inherit;
background: white;
margin-left: -1em;
margin-right: -1em;
padding-left: 1em;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
#sidebar ul li.highlight a:link,
#sidebar ul li.highlight a:visited {
color: black;
background: transparent;
}
/********** Styles for Footer **********/
#footer {
font-size: 90%;
text-align: left;
color: white;
background: #6381DC;
margin: 0;
padding: 0.5em 1.67em 0.5em 15.25em;
clear: both;
}
#footer a:link,
#footer a:visited {
text-decoration: underline;
color: white;
background: transparent;
}
#footer hr {
display: none !important;
}
/* End of the Sinorcaish style sheet */
bbyopen/web.config

More Related Content

PPTX
SharePoint Conference 2018 - APIs, APIs everywhere!
PPTX
PPTX
Kotlin Mullets
PPTX
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
PPTX
APIs, APIs Everywhere!
PDF
Node.js: scalability tips - Azure Dev Community Vijayawada
PPTX
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
PDF
NoSQL meets Microservices
SharePoint Conference 2018 - APIs, APIs everywhere!
Kotlin Mullets
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
APIs, APIs Everywhere!
Node.js: scalability tips - Azure Dev Community Vijayawada
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
NoSQL meets Microservices

Similar to bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx (20)

PDF
Michael Hackstein - NoSQL meets Microservices - NoSQL matters Dublin 2015
PPTX
Google Chart Tools
PDF
Micro app-framework - NodeLive Boston
PDF
Micro app-framework
PDF
NoSQL meets Microservices - Michael Hackstein
DOCX
Structured Graphics in dhtml and active controls.docx
DOCX
please code in c#- please note that im a complete beginner- northwind.docx
PDF
mobl presentation @ IHomer
PPTX
What's New in Android
DOC
14922 java script built (1)
PDF
mobl
PDF
The Browser Environment - A Systems Programmer's Perspective [sinatra edition]
PPTX
Big Data for each one of us
PDF
Is HTML5 Ready? (workshop)
PDF
Is html5-ready-workshop-110727181512-phpapp02
PPTX
How data rules the world: Telemetry in Battlefield Heroes
PDF
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
PDF
HTML5 New and Improved
PPTX
Implementation of GUI Framework part3
PPTX
JavaScript Objects and OOP Programming with JavaScript
Michael Hackstein - NoSQL meets Microservices - NoSQL matters Dublin 2015
Google Chart Tools
Micro app-framework - NodeLive Boston
Micro app-framework
NoSQL meets Microservices - Michael Hackstein
Structured Graphics in dhtml and active controls.docx
please code in c#- please note that im a complete beginner- northwind.docx
mobl presentation @ IHomer
What's New in Android
14922 java script built (1)
mobl
The Browser Environment - A Systems Programmer's Perspective [sinatra edition]
Big Data for each one of us
Is HTML5 Ready? (workshop)
Is html5-ready-workshop-110727181512-phpapp02
How data rules the world: Telemetry in Battlefield Heroes
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
HTML5 New and Improved
Implementation of GUI Framework part3
JavaScript Objects and OOP Programming with JavaScript

More from ikirkton (20)

DOCX
Analyze MVPIThe motives, values, and preferences inventory (MV.docx
DOCX
Analyze and interpret the following quotation The confrontation of.docx
DOCX
Analyze and prepare a critique of the following situationMary h.docx
DOCX
Analyze the anthropological film Jero A Balinese Trance Seance made.docx
DOCX
analyze and synthesize the financial reports of an organization of t.docx
DOCX
Analyze financial statements using financial ratios.• .docx
DOCX
Analyze and prepare a critique of the following situationMary has.docx
DOCX
Analyze Alternative Exchange Rate RegimesThere are several argum.docx
DOCX
Analyze and evaluate the different leadership theories and behavior .docx
DOCX
Analytical essay report about polio 1ِ- An introductory paragraph .docx
DOCX
Analysis Essay 1DUE Feb 23, 2014 1155 PMGrade DetailsGrade.docx
DOCX
AnalogíasComplete the analogies. Follow the model.Modelomuer.docx
DOCX
ANA Buenos días, señor González. ¿Cómo (1) (2) SR. GONZÁLEZ .docx
DOCX
Analyze symbolism in Jane Eyre from a Feminist point of view.  Exa.docx
DOCX
An important part of research is finding sources that can be trusted.docx
DOCX
An investment has an installed cost of $673,658. The cash flows ov.docx
DOCX
An incomplete Punnett square There are three possible phenotypes fo.docx
DOCX
An expanded version of the accounting equation could be A + .docx
DOCX
An Evolving IndustryHow are the Internet and other technologies cu.docx
DOCX
An essay addressing the definition or resemblance concerning categor.docx
Analyze MVPIThe motives, values, and preferences inventory (MV.docx
Analyze and interpret the following quotation The confrontation of.docx
Analyze and prepare a critique of the following situationMary h.docx
Analyze the anthropological film Jero A Balinese Trance Seance made.docx
analyze and synthesize the financial reports of an organization of t.docx
Analyze financial statements using financial ratios.• .docx
Analyze and prepare a critique of the following situationMary has.docx
Analyze Alternative Exchange Rate RegimesThere are several argum.docx
Analyze and evaluate the different leadership theories and behavior .docx
Analytical essay report about polio 1ِ- An introductory paragraph .docx
Analysis Essay 1DUE Feb 23, 2014 1155 PMGrade DetailsGrade.docx
AnalogíasComplete the analogies. Follow the model.Modelomuer.docx
ANA Buenos días, señor González. ¿Cómo (1) (2) SR. GONZÁLEZ .docx
Analyze symbolism in Jane Eyre from a Feminist point of view.  Exa.docx
An important part of research is finding sources that can be trusted.docx
An investment has an installed cost of $673,658. The cash flows ov.docx
An incomplete Punnett square There are three possible phenotypes fo.docx
An expanded version of the accounting equation could be A + .docx
An Evolving IndustryHow are the Internet and other technologies cu.docx
An essay addressing the definition or resemblance concerning categor.docx

Recently uploaded (20)

PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PPTX
master seminar digital applications in india
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
Pre independence Education in Inndia.pdf
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PPTX
Lesson notes of climatology university.
PDF
01-Introduction-to-Information-Management.pdf
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
2.FourierTransform-ShortQuestionswithAnswers.pdf
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
O7-L3 Supply Chain Operations - ICLT Program
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
master seminar digital applications in india
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Pre independence Education in Inndia.pdf
human mycosis Human fungal infections are called human mycosis..pptx
Final Presentation General Medicine 03-08-2024.pptx
Microbial disease of the cardiovascular and lymphatic systems
FourierSeries-QuestionsWithAnswers(Part-A).pdf
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
STATICS OF THE RIGID BODIES Hibbelers.pdf
Lesson notes of climatology university.
01-Introduction-to-Information-Management.pdf
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx

bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx

  • 1. bbyopen/App_Code/.DS_Store bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb Imports Microsoft.VisualBasic Imports System.Xml.Linq Public Class GoogleMapsAPIHelpers Public Shared Function GetGeocodingSearchResults(ByVal address As String) As XElement 'Use the Google Geocoding service to get information about the user-entered address 'See http://code.google.com/apis/maps/documentation/geocoding/ind ex.html for more info... Dim url = String.Format("http://maps.google.com/maps/api/geocode/xml?a ddress={0}&sensor=false", HttpContext.Current.Server.UrlEncode(address)) 'Load the XML into an XElement object (whee, LINQ to XML!) Dim results = XElement.Load(url)
  • 2. 'Check the status Dim status = results.Element("status").Value If status <> "OK" AndAlso status <> "ZERO_RESULTS" Then 'Whoops, something else was wrong with the request... Throw New ApplicationException("There was an error with Google's Geocoding Service: " & status) End If Return results End Function End Class bbyopen/App_Data/StoreLocations.mdf bbyopen/App_Data/StoreLocations_log.LDF bbyopen/Bin/Microsoft.Web.GeneratedImage.dll bbyopen/Default.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
  • 3. <asp:Content runat="server" ID="myHeadContent" ContentPlaceHolderID="head"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script > <script type="text/javascript"> </script> <script type="text/javascript"> function init_map(map_canvas_id, lat, lng, zoomLevel) { var myLatLng = new google.maps.LatLng(lat, lng); var options = { zoom: zoomLevel, center: myLatLng,
  • 4. mapTypeId: google.maps.MapTypeId.HYBRID }; var map_canvas = document.getElementById(map_canvas_id); var map = new google.maps.Map(map_canvas, options); var marker=new google.maps.Marker({ position:myLatLng, }); marker.setMap(map); } </script> </asp:Content>
  • 5. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Welcome!</h2> <p> This demo shows how to use the <a href="http://code.google.com/apis/maps/">Google Maps API</a> to build a simple store locator web application. </p> <p> This demo site is powered by the <code>StoreLocations.mdf</code> database in the <code>App_Data</code> folder, which contains a single table, <code>Stores</code>. This table has one record for each store, specifying the StoreId, address, city, , zip code, phone, hours, and latitude and longitude coordinates. From the <a href="FindAStore.aspx">Find a Store</a> page you can search this database by entering the ZIP code. <a href="FindAStore.aspx">Give it a try!</a>
  • 6. </p> <h2>Best Buy Headquarters</h2> <div id="my_map" style="width:500px;height:400px;border:solid 1px #333"></div> <script type="text/javascript"> init_map('my_map', 44.863731,-93.306751, 16); </script> </asp:Content> bbyopen/Default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page End Class
  • 7. bbyopen/FindAStore.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="FindAStore.aspx.vb" Inherits="FindAStore" %> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Find a Store Near You!</h2> <p> Enter your address, city, or postal code to find stores near you! </p> <asp:UpdatePanel ID="upSearchUI" runat="server"> <ContentTemplate> <asp:Panel runat="server" DefaultButton="btnSearch"> <b>Enter Zip Code:</b> <asp:TextBox ID="txtSearch" Width="10%" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqSearch" ControlToValidate="txtSearch" runat="server"
  • 8. ErrorMessage="[Required]" Display="Dynamic"></asp:RequiredFieldValidator> <asp:Button ID="btnSearch" runat="server" Text="Search!" /> <b>Select Your Distance Radius:</b> <asp:DropDownList ID="distanceDropDown" runat="server"> <asp:ListItem>5</asp:ListItem> <asp:ListItem>10</asp:ListItem> <asp:ListItem>50</asp:ListItem> </asp:DropDownList> </asp:Panel> <asp:Label runat="server" ID="lblNoResults" Visible="false" ForeColor="Red" Font-Italic="true">The address you entered is not known or understood. Try simplifying the address, or enter just a city, region, or postal code...</asp:Label> <asp:ListView ID="lvDidYouMean" runat="server"> <LayoutTemplate> <div style="padding-left: 25px; margin-top: 10px;">
  • 9. <b>Did you mean...</b> <ol> <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder> </ol> </div> </LayoutTemplate> <ItemTemplate> <li> <asp:HyperLink ID="lnkSelectDYM" runat="server" NavigateUrl='<%# string.Format("ShowStoreLocations.aspx?Address={0}", Server.UrlEncode(Container.DataItem.ToString())) %>' Text='<%# Container.DataItem %>' /> </li> </ItemTemplate> </asp:ListView> </ContentTemplate>
  • 10. </asp:UpdatePanel> </asp:Content> bbyopen/FindAStore.aspx.vb Imports System.Linq Imports System.Xml.Linq Partial Class FindAStore Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load txtSearch.Focus() End Sub Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click Dim results = GoogleMapsAPIHelpers.GetGeocodingSearchResults(txtSearch.
  • 11. Text.Trim()) Dim resultCount = results.Elements("result").Count() lvDidYouMean.Visible = False lblNoResults.Visible = False 'How many results did we get back? If resultCount = 0 Then 'Eep, no results! lblNoResults.Visible = True ElseIf resultCount = 1 Then 'Got back just one result, show the stores that match the address search ShowResults(results) Else 'Got back multiple results - We need to ask the user
  • 12. which address they mean to use... Dim matches = From result In results.Elements("result") _ Let formatted_address = result.Element("formatted_address").Value _ Select formatted_address lvDidYouMean.DataSource = matches lvDidYouMean.DataBind() lvDidYouMean.Visible = True End If End Sub Protected Sub ShowResults(ByVal results As XElement) Response.Redirect("ShowStoreLocations.aspx?Address=" & Server.UrlEncode(results.Element("result").Element("formatted _address").Value)) End Sub End Class
  • 13. bbyopen/Images/NumberToImageHandler.ashx <%@ WebHandler Language="VB" Class="NumberToImageHandler" %> Imports System Imports System.Web Imports Microsoft.Web Imports System.Drawing 'For more information on dynamically generating images see: ' ' Dynamically Generating and Caching Images in ASP.NET with the GeneratedImage Control ' http://www.4guysfromrolla.com/articles/042209-1.aspx ' Public Class NumberToImageHandler : Inherits ImageHandler Public Sub New()
  • 14. MyBase.ContentType = Imaging.ImageFormat.Png MyBase.EnableClientCache = True End Sub Public Overrides Function GenerateImage(ByVal parameters As System.Collections.Specialized.NameValueCollection) As Microsoft.Web.ImageInfo Dim sz As SizeF = Nothing Dim numberFont As New Font("Verdana", 12, FontStyle.Bold) Using dummyBitmap As New Bitmap(1, 1) Dim dummyGraphics As Graphics = Graphics.FromImage(dummyBitmap) sz = dummyGraphics.MeasureString(parameters("number"), numberFont) End Using
  • 15. Dim realWidth = sz.Width + 6 Dim realHeight = sz.Height + 4 Dim realBitmap As New Bitmap(Convert.ToInt32(realWidth), Convert.ToInt32(realHeight)) Dim realGraphics As Graphics = Graphics.FromImage(realBitmap) realGraphics.Clear(Color.Transparent) realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth, realHeight) realGraphics.DrawString(parameters("number"), numberFont, New SolidBrush(Color.White), 3, 2) Return New ImageInfo(realBitmap) End Function End Class bbyopen/Images/NumberToImageHandlerCS.ashx <%@ WebHandler Language="C#" Class="NumberToImageHandlerCS" %> using System;
  • 16. using System.Web; using Microsoft.Web; using System.Drawing; using System.Drawing.Imaging; //For more information on dynamically generating images see: // // Dynamically Generating and Caching Images in ASP.NET with the GeneratedImage Control // http://www.4guysfromrolla.com/articles/042209-1.aspx // public class NumberToImageHandlerCS : ImageHandler { public NumberToImageHandlerCS() { base.ContentType = ImageFormat.Png;
  • 17. base.EnableClientCache = true; } public override ImageInfo GenerateImage(System.Collections.Specialized.NameValueColl ection parameters) { SizeF sz; var numberFont = new Font("Verdana", 12, FontStyle.Bold); using (var dummyBitmap = new Bitmap(1, 1)) { var dummyGraphics = Graphics.FromImage(dummyBitmap); sz = dummyGraphics.MeasureString(parameters["number"], numberFont); } var realWidth = sz.Width + 6;
  • 18. var realHeight = sz.Height + 4; var realBitmap = new Bitmap(Convert.ToInt32(realWidth), Convert.ToInt32(realHeight)); var realGraphics = Graphics.FromImage(realBitmap); realGraphics.Clear(Color.Transparent); realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth, realHeight); realGraphics.DrawString(parameters["number"], numberFont, new SolidBrush(Color.White), 3, 2); return new ImageInfo(realBitmap); } } bbyopen/Scripts/GoogleMapHelpers.js var currentlyOpenedInfoWindow = null; function init_map(map_canvas_id, lat, lng, zoom, markers, infoWindowContents) { var myLatLng = new google.maps.LatLng(lat, lng);
  • 19. var options = { zoom: zoom, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID }; var map_canvas = document.getElementById(map_canvas_id); var map = new google.maps.Map(map_canvas, options); if (markers && markers.length > 0) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { var marker = new google.maps.Marker(markers[i]); marker.setMap(map);
  • 20. bounds.extend(marker.getPosition()); if (infoWindowContents && infoWindowContents.length > i) createInfoWindow(map, marker, infoWindowContents[i]); } map.fitBounds(bounds); map.setCenter(bounds.getCenter()); } } function createInfoWindow(map, marker, infoWindowProperties) { var info = new google.maps.InfoWindow(infoWindowProperties); google.maps.event.addListener(marker, 'click', function() { if (currentlyOpenedInfoWindow != null)
  • 21. currentlyOpenedInfoWindow.close(); info.open(map, marker); currentlyOpenedInfoWindow = info; }); } bbyopen/ShowStoreLocations.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="ShowStoreLocations.aspx.vb" Inherits="ShowStoreLocations" %> <asp:Content runat="server" ID="headContent" ContentPlaceHolderID="head"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script > <script type="text/javascript" src="Scripts/GoogleMapHelpers.js"></script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
  • 22. Runat="Server"> <h2>Store Locations Near <asp:Label ID="lblAddress" runat="server"></asp:Label></h2> <p> <a href="FindAStore.aspx">&lt;&lt; Enter a new search...</a> </p> <div id="map_canvas" class="map-area"></div> <asp:UpdatePanel ID="upSearchResults" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:ListView ID="lvSearchResults" runat="server" DataSourceID="dsSearchResults"> <EmptyDataTemplate> <div id="noResults"> <p> There are no branches within 15 miles of the address you entered. Please try again... </p>
  • 23. <p> <b>Hint:</b> Try entering a zip code like 77037 </p> </div> </EmptyDataTemplate> <LayoutTemplate> <table cellspacing="0" cellpadding="5" rules="all" class="searchResults"> <tr> <th> <asp:LinkButton runat="server" ID="lbSortStoreId" CommandName="Sort" CommandArgument="StoreNumber">Store #</asp:LinkButton> </th> <th> <asp:LinkButton runat="server" ID="lbSortDistance" CommandName="Sort" CommandArgument="DistanceFromAddress">Distance</asp:Li nkButton>
  • 24. </th> <th>Address</th> </tr> <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval("StoreId")%></td> <td><%# Eval("DistanceFromAddress", "{0:0.00}")%> miles</td> <td> <table> <tr> <td> <asp:Image runat="server" ID="imgIcon" ImageUrl='<%#
  • 25. string.Format("~/Images/NumberToImageHandler.ashx?number ={0}", Container.DisplayIndex + 1) %>' /> </td> <td> <%# Eval("Address")%><br /> <%# Eval("City")%>, <%# Eval("postalCode")%><br /> <%# Eval("phone")%> <%# Eval("hours")%> </td> </tr> </table> </td> </tr> </ItemTemplate> </asp:ListView> <asp:SqlDataSource ID="dsSearchResults" runat="server" ConnectionString="<%$ ConnectionStrings:StoreLocationsConnectionString %>"
  • 26. SelectCommand="SELECT StoreId, Address, City, postalCode, phone, hours, lat, lng, SQRT(POWER(lat - @lat, 2) + POWER(lng - @lng, 2)) * 62.1371192 AS DistanceFromAddress FROM Stores WHERE (ABS(lat - @lat) &lt; 0.25) AND (ABS(lng - @lng) &lt; 0.25) ORDER BY DistanceFromAddress"> <SelectParameters> <asp:Parameter Name="lat" /> <asp:Parameter Name="lng" /> </SelectParameters> </asp:SqlDataSource> </ContentTemplate> </asp:UpdatePanel> </asp:Content> bbyopen/ShowStoreLocations.aspx.vb Imports System.Collections.Generic Imports System.Data
  • 27. Partial Class ShowStoreLocations Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim address = Request.QueryString("Address") If String.IsNullOrEmpty(address) Then Response.Redirect("FindAStore.aspx") End If 'Get the lat/long info about the address Dim results = GoogleMapsAPIHelpers.GetGeocodingSearchResults(address) lblAddress.Text = address 'Set the latitude and longtitude parameters based on the address being searched on
  • 28. Dim lat = results.Element("result").Element("geometry").Element("locatio n").Element("lat").Value Dim lng = results.Element("result").Element("geometry").Element("locatio n").Element("lng").Value dsSearchResults.SelectParameters("lat").DefaultValue = lat dsSearchResults.SelectParameters("lng").DefaultValue = lng lvSearchResults.DataBind() 'Loop through each nearby location and build up the JavaScript to place the markers Dim locations As New List(Of String) Dim overlayContents As New List(Of String) Dim nearbyLocations = CType(dsSearchResults.Select(DataSourceSelectArguments.Em pty), DataView)
  • 29. Dim count = 1 For Each location As DataRowView In nearbyLocations locations.Add(String.Format("{{ title: ""Store #{0}"", position: new google.maps.LatLng({1}, {2}), icon: ""Images/NumberToImageHandler.ashx?number={3}"" }}", location("StoreId"), location("lat"), location("lng"), count)) overlayContents.Add(String.Format("{{ content: ""<div class=""infoWindow""><b>Store #{0}</b><br />{1}<br />{2}, {3} {4}</div>"" }}", location("StoreId"), location("Address"), location("City"), location("postalCode"), location("phone"))) count += 1 Next Dim locationsJson = "[" & String.Join(",", locations.ToArray()) & "]" Dim overlayContentsJson = "[" & String.Join(",", overlayContents.ToArray()) & "]"
  • 30. ' Inject the Google Maps script ClientScript.RegisterStartupScript(Me.GetType(), "Google Maps Initialization", _ String.Format("init_map('map_canvas', {0}, {1}, 13, {2}, {3});", lat, lng, locationsJson, overlayContentsJson), True) End If End Sub End Class bbyopen/Site.master Unit 4 Assignment 1 Best Buy Store Locator Alex Benavides
  • 31. HomeFind a Store ASP.NET application designed by Alex Benavides. IT4795 Unit 4 Assignment 1
  • 32. bbyopen/Site.master.vb Partial Class Site Inherits System.Web.UI.MasterPage End Class bbyopen/Styles/CustomStyles.css .skm_BookReviewContainer { text-align: center; } .skm_BookReview { } .skm_BookReviewByline {
  • 34. table.searchResults { width: 95%; border: 1px solid black; } table.searchResults th { background-color: #fee; } #noResults { padding-left: 25px; color: Red; } .map-area { width: 95%; height: 400px;
  • 35. margin-bottom: 15px; border: solid 1px #333; } .infoWindow { line-height: normal; } bbyopen/Styles/LICENCE.txt ***************************************************** ********************* * * * The Sinorcaish Stylesheet * * Copyright (C) 2004-07, John Zaitseff * * * ***************************************************** ********************* You may freely redistribute and/or modify the Sinorcaish stylesheet files "sinorcaish-screen.css" and "sinorcaish-print.css" on the condition that
  • 36. the original copyright notice is preserved. The same condition applies to the overview document "index.html", to the sample document "sample.html" and to the logo image instructions "logo.html". You may redistribute and/ or modify the template file "template.html" without ANY such restriction. You may freely redistribute unmodified versions of the complete Sinorcaish stylesheet archives. These conditions may be waived; write to John Zaitseff for details: Postal: John Zaitseff, The ZAP Group, Unit 6, 116 Woodburn Road, Berala, NSW, 2141, Australia
  • 37. E-mail: [email protected] bbyopen/Styles/sinorcaish-screen.css /**************************************************** ******************** * * * Sinorcaish Screen-based Style Sheet * * Copyright (C) 2004-07, John Zaitseff * * * ***************************************************** *******************/ /* Author: John Zaitseff <[email protected]> Version: 1.3 $Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $ This file provides the Sinorcaish style sheet for screen-based user agents (ie, for ordinary Web browsers). This file conforms to
  • 38. the Cascading Style Sheets 2.1 specification. The design of Sinorcaish is influenced by Sinorca (available from the Open Source Web Design site, http://www.oswd.org/), which in turn was based on the Acronis company web site (http://www.acronis.com/). You can find more information about this design from its home page on the ZAP Group web site, http://www.zap.org.au/documents/styles/sinorcaish/. This file may be redistributed and/or modified on the condition that the original copyright notice is retained. */ /********** Global Styles **********/
  • 39. /* The global font size is set to 90% as */ /* most browsers' normal font size is too */ /* large, at least when using Verdana */ body { font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 90%; /* Allow IE/Win to resize the document */ color: black; background: White; margin: 0; padding: 0; border: none; } .hidden { /* Used for content that should be displayed */ /* by non-stylesheet-aware browsers
  • 40. */ display: none !important; } .notprinted { /* Used for content that should not be */ } /* printed to paper */ /* Headings */ h1, /* Headings (H1-H6) should only be used in */ h2, /* the main content area */ h3 { font-weight: bold; text-align: left; margin: 0.5em 0 0 0; padding: 0;
  • 41. } h4, h5, h6 { font-weight: bold; text-align: left; margin: 1.25em 0 0 0; padding: 0; } h1 { font-size: 175% } h2 { font-size: 145% } h3 { font-size: 120% } h4 { font-size: 105% } h5 { font-size: 80% } h6 { font-size: 65% }
  • 42. /* Anchors */ a:link { text-decoration: none; color: #0066CC; background: transparent; } a:visited { text-decoration: none; color: #003399; background: transparent; } a:hover, a:active { text-decoration: underline;
  • 43. } /* Inline elements and classes */ /* This style sheet assumes B, BIG, EM, I, */ /* SMALL, STRONG, SUB and SUP are defined */ /* by the browser as per the HTML4 sample */ /* style sheet. */ code, kbd, samp, tt { font-family: "Courier New", Courier, monospace; font-size: 115%; /* Courier tends to be a little too small */ line-height: 1.0; /* Otherwise lines tend to spread out */
  • 44. } kbd, code.markup, /* HTML/CSS markup */ span.markup, /* Alternative form for HTML/CSS markup */ .title { /* Title in floating boxes / left sidebar */ font-weight: bolder; } abbr, acronym { font: inherit; /* Don't use small-caps, etc. */ } .tooltip { cursor: help; border-bottom: 1px dotted #CCCCCC;
  • 45. } abbr[title], acronym[title] { cursor: help; border-bottom: 1px dotted #CCCCCC; } cite, dfn, var, .fn, /* Filename */ .url, /* Uniform Resource Locator */ .email { /* E-mail address */ font-style: italic; } .program, /* Command-line name of a computer program */
  • 46. .window, /* Window or dialog box name */ .menu, /* Menu item in a computer program */ .gui, /* Generic GUI element in a computer program */ .key { /* Keypress in a computer program */ font-weight: bolder; } .clearboxes { /* Clear navboxes and floatboxes */ clear: right; } .unicode { font-family: "Arial Unicode MS", "Lucida Sans Unicode", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; }
  • 47. /* Block-inline elements and classes */ img { vertical-align: baseline; margin: 0; padding: 0; border: none; } img.icon16 { /* For 16x16 file-type icons */ vertical-align: -2px; } del, del * { /* Required for Mozilla */ text-decoration: line-through; }
  • 48. ins, ins * { /* Required for Mozilla */ text-decoration: underline; } .floatleft { /* Left-floating images and spans */ margin: 0.5em 1.5em 0.5em 0; float: left; } .floatright { /* Right-floating images and spans */ margin: 0.5em 0 0.5em 1.5em; float: right; } .nowrap { white-space: nowrap; }
  • 49. /* Block elements */ p { margin: 1em 0; padding: 0; } blockquote { /* Should only be used in main content area, */ /* floating boxes or left sidebar. */ margin: 1em 2.5em; padding: 0; } pre { /* Should only be used in main content area */ /* and floating boxes. */
  • 50. font-family: "Courier New", Courier, monospace; font-size: 95%; /* Courier tends to be a little too small */ line-height: 1.2; margin: 1em 2.5em; padding: 0; } pre code, pre kbd, pre samp, pre tt { font-size: 100%; /* PRE is already enlarged above */ line-height: 1.2; /* Use same value as for PRE above */ } hr { color: #999999;
  • 51. background: transparent; height: 1px; /* Required for IE/Win */ margin: 0; padding: 0; border-color: #999999; border-width: 1px; border-style: none none solid none; } hr.lighter { /* Warning: not printed out on paper */ color: #F0F0F0; background: transparent; border-color: #F0F0F0; } /* Lists */
  • 52. ol { list-style: decimal outside; margin: 1em 0; padding: 0 0 0 2.5em; } ol.alpha { list-style-type: lower-alpha; } ol.number { list-style-type: decimal; } ul { list-style: square outside; margin: 1em 0; padding: 0 0 0 2.5em;
  • 53. } ol ol, ol ul, ul ol, ul ul { margin-top: 0; margin-bottom: 0; } ol ul, /* Override possible browser styles */ ol ol ul, ol ul ul, ul ul, ul ol ul, ul ul ul { list-style: square outside; }
  • 54. li { margin: 0; padding: 0; } dl { margin: 1em 0; padding: 0; } dt { font: inherit; /* Don't make the text bold by default */ margin: 1em 0 0.25em 0; padding: 0; }
  • 55. dd { margin: 0 0 1em 2.5em; padding: 0; } /* Tables */ /* Tables should never be used for visual */ /* formatting: that is the role of CSS! */ table.simple { color: inherit; background: inherit; /* Don't make tables transparent */ border-collapse: collapse; border-spacing: 0; empty-cells: show; margin: 0.5em 2.5em; padding: 0;
  • 56. border: 1px solid #999999; } table.simple caption { text-align: center; caption-side: top; margin: 0 2.5em 0.75em; padding: 0; border: none; } table.simple td, table.simple th { text-align: center; vertical-align: middle; margin: 0; padding: 0.25em 0.5em; border: 1px solid #999999;
  • 57. } table.simple th, table.simple td.highlight, table.simple th.highlight { font-weight: bold; color: inherit; background: #F0F0F0; } table.simple td.lighter, table.simple th.lighter { color: inherit; background: #F8F8F8; } table.simple td.left, table.simple th.left {
  • 58. text-align: left; } table.simple td.center, table.simple th.center { text-align: center; } table.simple td.right, table.simple th.right { text-align: right; } /* Forms */ form { margin: 1em 0;
  • 59. padding: 0; border: none; } input, button, select, fieldset, legend { font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 95%; color: black; background: inherit; vertical-align: middle; } textarea {
  • 60. font-family: "Courier New", Courier, monospace; font-size: 100%; color: black; background: inherit; vertical-align: middle; } fieldset { font-size: 100%; margin: 1em 0; border: 1px solid #999999; } legend { font-size: 100%; margin: 0 0.5em; padding: 0 0.25em; border: none;
  • 61. } table.formtable { color: inherit; background: inherit; border-collapse: collapse; border-spacing: 0; empty-cells: show; margin: 0; padding: 0; border: none; } table.formtable td, table.formtable th { text-align: justify; vertical-align: middle; margin: 0;
  • 62. padding: 0.25em 0.5em; border: none; } table.formtable th { text-align: center; font-weight: bold; } table.formtable td.label, table.formtable th.label { text-align: right; vertical-align: top; } table.formtable td.vertspace, table.formtable th.vertspace { empty-cells: show;
  • 63. margin: 0; padding: 0.5em 0; height: 1em; /* Required for IE/Win */ } table.formtable fieldset { margin: 0; } table.formtable fieldset td, table.formtable fieldset th { margin: 0.25em 0.5em; } .reqfield { color: red; background: transparent; font-weight: bolder;
  • 64. } .info { color: gray; background: transparent; font-size: 90%; } /* The following HTML elements should NOT be used in documents using this style sheet: address - use the #footer style instead q - use &ldquo; and &rdquo; instead */ /********** Styles for Main Content **********/
  • 65. #main { text-align: justify; line-height: 1.5; color: black; background: white; margin: 0 0 0 12.5em; padding: 0.1em 1.5em 0.5em 1em; border-left: 1px solid #999999; } #main h1 { /* Should be used once, following navhead */ color: #999999; background: transparent; margin: 0 0 0.5em 0; }
  • 66. #main .highlight { /* Highlight box (for warnings, etc) */ color: inherit; background: #F0F0F0; margin: 1em 0; padding: 1em 2.5em; border: 1px solid #999999; } #main .totop { /* For "Top ^" lines in FAQs, etc */ font-size: 90%; text-align: right; margin: -0.75em 0 1em 0; padding: 0 0 0.25em 0; border-bottom: 1px solid #F0F0F0; } #main table.simple td.highlight, /* Else "#main .highlight" will override */ #main table.simple th.highlight {
  • 67. margin: 0; padding: 0.25em 0.5em; } /* Other styles related to the main content */ #mainlink { /* "Skip to main content" link */ display: none !important; } #navhead { /* "Path to this page" information */ /* Warning: not printed out on paper */ font-size: 90%; } #navhead hr { display: none;
  • 68. } #endmain { visibility: hidden; clear: both; /* Doesn't always work under IE/Win */ } /********** Styles for Floating Boxes **********/ /* "navbox" is used to provide intra/inter- */ /* page links; it is NOT printed out on */ /* paper. "floatbox" is used to provide */ /* floating boxes that may appear anywhere */ /* in the main content; they ARE printed. */ .floatbox,
  • 69. .navbox { overflow: visible; font-size: 95%; line-height: 1.25; margin: 0 0 0.75em 1.5em; padding: 0.5em 1em; border: 1px solid #999999; float: right; clear: right; } .floatbox { color: black; background: #F0F0F0; width: 35%; } .navbox {
  • 70. text-align: left; color: black; background: white; width: 12.5em; } .floatbox hr, /* Used for non-stylesheet-aware browsers */ .navbox hr { display: none !important; } .floatbox p, .navbox p { margin: 0.75em 0; padding: 0; } .floatbox ol,
  • 71. .floatbox ul { margin: 0.75em 0; padding: 0 0 0 1.5em; } .navbox ol, .navbox ul { margin: 0.5em 0; padding: 0 0 0 1.5em; } .floatbox blockquote { margin: 0.75em 1.5em; padding: 0; } .floatbox pre { font-size: 95%;
  • 72. margin: 0.75em 1.5em; padding: 0; } .floatbox dt { margin: 0.75em 0; padding: 0; } .floatbox dt { margin: 0.75em 0 0.25em 0; padding: 0; } .floatbox dd { margin: 0 0 0.75em 1.5em; padding: 0; }
  • 73. #main .floatbox .highlight { color: inherit; background: white; margin: 0.75em 0; padding: 0.75em 1.5em; } #main .floatbox table.simple { margin: 0.75em 0; } #main .floatbox table.simple th, #main .floatbox table.simple td.highlight, #main .floatbox table.simple th.highlight { color: inherit; background: white; margin: 0;
  • 74. padding: 0.25em 0.5em; } /********** Styles for Header **********/ /* In this style sheet, headers are composed */ /* of three parts: left, right and subheader */ /* Left part is ideally an image. */ #header { /* Warning: not printed out on paper */ color: #003399; background: #8CA8E6; } #header a:link, #header a:visited {
  • 75. color: #003399; background: transparent; } #header .highlight, #header a.highlight:link, #header a.highlight:visited { color: white; background: transparent; } /* Left part of header (ideally an image but may be a link) */ #header div.left { float: left; clear: left; margin: 0; padding: 0;
  • 76. } #header div.left img { display: block; /* Otherwise IMG is an inline, causing gaps */ } #header div.left, #header div.left a:link, #header div.left a:visited { font-size: 200%; font-weight: bold; text-decoration: none; color: white; background: transparent; } #header div.left p {
  • 77. margin: 0 0 0 0.25em; padding: 0; } #header div.left .alt { color: #FF9800; background: transparent; } /* Right part of header is for external/global links, search, etc */ #header div.right { font-size: 90%; text-align: right; margin: 0; padding: 0.5em 1.17em 0 1em; float: right; clear: right;
  • 78. } #header div.right a:link, #header div.right a:visited { margin: 0; padding: 0 0.5em; } #header div.right form { margin: 0; padding: 0.25em 0.5em 0 0; } #header div.right form input { font-size: 95%; vertical-align: middle; }
  • 79. /* Subheader for global links */ #header div.subheader { color: white; background: #003399; margin: 0; padding: 0; border: 1px solid #003399; /* Required for IE/Win */ clear: both; } #header div.subheader p { /* To overcome an IE/Win unwanted padding */ /* bug, still present in IE7. */ margin: 0; padding: 0.5em; }
  • 80. #header div.subheader a:link, #header div.subheader a:visited { font-weight: bolder; color: white; background: transparent; margin: 0; padding: 0 0.5em; } #header div.subheader .highlight, #header div.subheader a.highlight:link, #header div.subheader a.highlight:visited { color: #FDA05E; background: transparent; } /********** Styles for Left Sidebar **********/
  • 81. #sidebar { /* Warning: not printed out on paper */ width: 12.5em; border-right: 1px solid #999999; float: left; background-color:#F0F0F0; clear: both; } #sidebar div { font-size: 95%; margin: 0; padding: 0.25em 0.25em; } #sidebar div.lighter { color: inherit; background: white;
  • 82. } #sidebar p { margin: 0.5em 0; } #sidebar .title a:link, #sidebar .title a:visited { color: black; background: transparent; } #sidebar ul { list-style: none outside; margin: 0.5em 0; padding: 0; }
  • 83. #sidebar ul li { margin: 0; padding: 0.125em 0; } #sidebar ul li.highlight { color: inherit; background: white; margin-left: -1em; margin-right: -1em; padding-left: 1em; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } #sidebar ul li.highlight a:link, #sidebar ul li.highlight a:visited { color: black;
  • 84. background: transparent; } /********** Styles for Footer **********/ #footer { font-size: 90%; text-align: left; color: white; background: #6381DC; margin: 0; padding: 0.5em 1.67em 0.5em 15.25em; clear: both; } #footer a:link, #footer a:visited {
  • 85. text-decoration: underline; color: white; background: transparent; } #footer hr { display: none !important; } /* End of the Sinorcaish style sheet */ bbyopen/web.config bbyopen/App_Code/.DS_Store bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb Imports Microsoft.VisualBasic Imports System.Xml.Linq Public Class GoogleMapsAPIHelpers
  • 86. Public Shared Function GetGeocodingSearchResults(ByVal address As String) As XElement 'Use the Google Geocoding service to get information about the user-entered address 'See http://code.google.com/apis/maps/documentation/geocoding/ind ex.html for more info... Dim url = String.Format("http://maps.google.com/maps/api/geocode/xml?a ddress={0}&sensor=false", HttpContext.Current.Server.UrlEncode(address)) 'Load the XML into an XElement object (whee, LINQ to XML!) Dim results = XElement.Load(url) 'Check the status Dim status = results.Element("status").Value If status <> "OK" AndAlso status <> "ZERO_RESULTS" Then 'Whoops, something else was wrong with the request... Throw New ApplicationException("There was an error with Google's Geocoding Service: " & status)
  • 87. End If Return results End Function End Class bbyopen/App_Data/StoreLocations.mdf bbyopen/App_Data/StoreLocations_log.LDF bbyopen/Bin/Microsoft.Web.GeneratedImage.dll bbyopen/Default.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <asp:Content runat="server" ID="myHeadContent" ContentPlaceHolderID="head"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script > <script type="text/javascript">
  • 88. </script> <script type="text/javascript"> function init_map(map_canvas_id, lat, lng, zoomLevel) { var myLatLng = new google.maps.LatLng(lat, lng); var options = { zoom: zoomLevel, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID }; var map_canvas = document.getElementById(map_canvas_id); var map = new google.maps.Map(map_canvas, options);
  • 89. var marker=new google.maps.Marker({ position:myLatLng, }); marker.setMap(map); } </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Welcome!</h2> <p> This demo shows how to use the <a href="http://code.google.com/apis/maps/">Google Maps API</a> to build a simple store locator
  • 90. web application. </p> <p> This demo site is powered by the <code>StoreLocations.mdf</code> database in the <code>App_Data</code> folder, which contains a single table, <code>Stores</code>. This table has one record for each store, specifying the StoreId, address, city, , zip code, phone, hours, and latitude and longitude coordinates. From the <a href="FindAStore.aspx">Find a Store</a> page you can search this database by entering the ZIP code. <a href="FindAStore.aspx">Give it a try!</a> </p> <h2>Best Buy Headquarters</h2> <div id="my_map" style="width:500px;height:400px;border:solid 1px #333"></div>
  • 91. <script type="text/javascript"> init_map('my_map', 44.863731,-93.306751, 16); </script> </asp:Content> bbyopen/Default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page End Class bbyopen/FindAStore.aspx <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="FindAStore.aspx.vb" Inherits="FindAStore" %> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  • 92. <h2>Find a Store Near You!</h2> <p> Enter your address, city, or postal code to find stores near you! </p> <asp:UpdatePanel ID="upSearchUI" runat="server"> <ContentTemplate> <asp:Panel runat="server" DefaultButton="btnSearch"> <b>Enter Zip Code:</b> <asp:TextBox ID="txtSearch" Width="10%" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqSearch" ControlToValidate="txtSearch" runat="server" ErrorMessage="[Required]" Display="Dynamic"></asp:RequiredFieldValidator> <asp:Button ID="btnSearch" runat="server" Text="Search!" /> <b>Select Your Distance Radius:</b> <asp:DropDownList ID="distanceDropDown" runat="server"> <asp:ListItem>5</asp:ListItem>
  • 93. <asp:ListItem>10</asp:ListItem> <asp:ListItem>50</asp:ListItem> </asp:DropDownList> </asp:Panel> <asp:Label runat="server" ID="lblNoResults" Visible="false" ForeColor="Red" Font-Italic="true">The address you entered is not known or understood. Try simplifying the address, or enter just a city, region, or postal code...</asp:Label> <asp:ListView ID="lvDidYouMean" runat="server"> <LayoutTemplate> <div style="padding-left: 25px; margin-top: 10px;"> <b>Did you mean...</b> <ol> <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder> </ol> </div> </LayoutTemplate>
  • 94. <ItemTemplate> <li> <asp:HyperLink ID="lnkSelectDYM" runat="server" NavigateUrl='<%# string.Format("ShowStoreLocations.aspx?Address={0}", Server.UrlEncode(Container.DataItem.ToString())) %>' Text='<%# Container.DataItem %>' /> </li> </ItemTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel> </asp:Content> bbyopen/FindAStore.aspx.vb Imports System.Linq Imports System.Xml.Linq
  • 95. Partial Class FindAStore Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load txtSearch.Focus() End Sub Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click Dim results = GoogleMapsAPIHelpers.GetGeocodingSearchResults(txtSearch. Text.Trim()) Dim resultCount = results.Elements("result").Count() lvDidYouMean.Visible = False lblNoResults.Visible = False
  • 96. 'How many results did we get back? If resultCount = 0 Then 'Eep, no results! lblNoResults.Visible = True ElseIf resultCount = 1 Then 'Got back just one result, show the stores that match the address search ShowResults(results) Else 'Got back multiple results - We need to ask the user which address they mean to use... Dim matches = From result In results.Elements("result") _ Let formatted_address = result.Element("formatted_address").Value _ Select formatted_address lvDidYouMean.DataSource = matches
  • 97. lvDidYouMean.DataBind() lvDidYouMean.Visible = True End If End Sub Protected Sub ShowResults(ByVal results As XElement) Response.Redirect("ShowStoreLocations.aspx?Address=" & Server.UrlEncode(results.Element("result").Element("formatted _address").Value)) End Sub End Class bbyopen/Images/NumberToImageHandler.ashx <%@ WebHandler Language="VB" Class="NumberToImageHandler" %> Imports System Imports System.Web Imports Microsoft.Web
  • 98. Imports System.Drawing 'For more information on dynamically generating images see: ' ' Dynamically Generating and Caching Images in ASP.NET with the GeneratedImage Control ' http://www.4guysfromrolla.com/articles/042209-1.aspx ' Public Class NumberToImageHandler : Inherits ImageHandler Public Sub New() MyBase.ContentType = Imaging.ImageFormat.Png MyBase.EnableClientCache = True End Sub Public Overrides Function GenerateImage(ByVal parameters As System.Collections.Specialized.NameValueCollection) As Microsoft.Web.ImageInfo
  • 99. Dim sz As SizeF = Nothing Dim numberFont As New Font("Verdana", 12, FontStyle.Bold) Using dummyBitmap As New Bitmap(1, 1) Dim dummyGraphics As Graphics = Graphics.FromImage(dummyBitmap) sz = dummyGraphics.MeasureString(parameters("number"), numberFont) End Using Dim realWidth = sz.Width + 6 Dim realHeight = sz.Height + 4 Dim realBitmap As New Bitmap(Convert.ToInt32(realWidth), Convert.ToInt32(realHeight)) Dim realGraphics As Graphics = Graphics.FromImage(realBitmap)
  • 100. realGraphics.Clear(Color.Transparent) realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth, realHeight) realGraphics.DrawString(parameters("number"), numberFont, New SolidBrush(Color.White), 3, 2) Return New ImageInfo(realBitmap) End Function End Class bbyopen/Images/NumberToImageHandlerCS.ashx <%@ WebHandler Language="C#" Class="NumberToImageHandlerCS" %> using System; using System.Web; using Microsoft.Web; using System.Drawing; using System.Drawing.Imaging; //For more information on dynamically generating images see:
  • 101. // // Dynamically Generating and Caching Images in ASP.NET with the GeneratedImage Control // http://www.4guysfromrolla.com/articles/042209-1.aspx // public class NumberToImageHandlerCS : ImageHandler { public NumberToImageHandlerCS() { base.ContentType = ImageFormat.Png; base.EnableClientCache = true; } public override ImageInfo GenerateImage(System.Collections.Specialized.NameValueColl ection parameters) { SizeF sz;
  • 102. var numberFont = new Font("Verdana", 12, FontStyle.Bold); using (var dummyBitmap = new Bitmap(1, 1)) { var dummyGraphics = Graphics.FromImage(dummyBitmap); sz = dummyGraphics.MeasureString(parameters["number"], numberFont); } var realWidth = sz.Width + 6; var realHeight = sz.Height + 4; var realBitmap = new Bitmap(Convert.ToInt32(realWidth), Convert.ToInt32(realHeight)); var realGraphics = Graphics.FromImage(realBitmap); realGraphics.Clear(Color.Transparent); realGraphics.FillEllipse(Brushes.Navy, 0, 0, realWidth, realHeight);
  • 103. realGraphics.DrawString(parameters["number"], numberFont, new SolidBrush(Color.White), 3, 2); return new ImageInfo(realBitmap); } } bbyopen/Scripts/GoogleMapHelpers.js var currentlyOpenedInfoWindow = null; function init_map(map_canvas_id, lat, lng, zoom, markers, infoWindowContents) { var myLatLng = new google.maps.LatLng(lat, lng); var options = { zoom: zoom, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID };
  • 104. var map_canvas = document.getElementById(map_canvas_id); var map = new google.maps.Map(map_canvas, options); if (markers && markers.length > 0) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { var marker = new google.maps.Marker(markers[i]); marker.setMap(map); bounds.extend(marker.getPosition()); if (infoWindowContents && infoWindowContents.length > i) createInfoWindow(map, marker, infoWindowContents[i]); }
  • 105. map.fitBounds(bounds); map.setCenter(bounds.getCenter()); } } function createInfoWindow(map, marker, infoWindowProperties) { var info = new google.maps.InfoWindow(infoWindowProperties); google.maps.event.addListener(marker, 'click', function() { if (currentlyOpenedInfoWindow != null) currentlyOpenedInfoWindow.close(); info.open(map, marker); currentlyOpenedInfoWindow = info; }); } bbyopen/ShowStoreLocations.aspx
  • 106. <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="ShowStoreLocations.aspx.vb" Inherits="ShowStoreLocations" %> <asp:Content runat="server" ID="headContent" ContentPlaceHolderID="head"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script > <script type="text/javascript" src="Scripts/GoogleMapHelpers.js"></script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Store Locations Near <asp:Label ID="lblAddress" runat="server"></asp:Label></h2> <p> <a href="FindAStore.aspx">&lt;&lt; Enter a new search...</a> </p>
  • 107. <div id="map_canvas" class="map-area"></div> <asp:UpdatePanel ID="upSearchResults" UpdateMode="Conditional" runat="server"> <ContentTemplate> <asp:ListView ID="lvSearchResults" runat="server" DataSourceID="dsSearchResults"> <EmptyDataTemplate> <div id="noResults"> <p> There are no branches within 15 miles of the address you entered. Please try again... </p> <p> <b>Hint:</b> Try entering a zip code like 77037 </p> </div> </EmptyDataTemplate>
  • 108. <LayoutTemplate> <table cellspacing="0" cellpadding="5" rules="all" class="searchResults"> <tr> <th> <asp:LinkButton runat="server" ID="lbSortStoreId" CommandName="Sort" CommandArgument="StoreNumber">Store #</asp:LinkButton> </th> <th> <asp:LinkButton runat="server" ID="lbSortDistance" CommandName="Sort" CommandArgument="DistanceFromAddress">Distance</asp:Li nkButton> </th> <th>Address</th> </tr> <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder> </table> </LayoutTemplate>
  • 109. <ItemTemplate> <tr> <td><%# Eval("StoreId")%></td> <td><%# Eval("DistanceFromAddress", "{0:0.00}")%> miles</td> <td> <table> <tr> <td> <asp:Image runat="server" ID="imgIcon" ImageUrl='<%# string.Format("~/Images/NumberToImageHandler.ashx?number ={0}", Container.DisplayIndex + 1) %>' /> </td> <td> <%# Eval("Address")%><br /> <%# Eval("City")%>, <%# Eval("postalCode")%><br /> <%# Eval("phone")%> <%#
  • 110. Eval("hours")%> </td> </tr> </table> </td> </tr> </ItemTemplate> </asp:ListView> <asp:SqlDataSource ID="dsSearchResults" runat="server" ConnectionString="<%$ ConnectionStrings:StoreLocationsConnectionString %>" SelectCommand="SELECT StoreId, Address, City, postalCode, phone, hours, lat, lng, SQRT(POWER(lat - @lat, 2) + POWER(lng - @lng, 2)) * 62.1371192 AS DistanceFromAddress FROM Stores WHERE (ABS(lat - @lat) &lt; 0.25) AND (ABS(lng - @lng) &lt; 0.25) ORDER BY DistanceFromAddress"> <SelectParameters> <asp:Parameter Name="lat" />
  • 111. <asp:Parameter Name="lng" /> </SelectParameters> </asp:SqlDataSource> </ContentTemplate> </asp:UpdatePanel> </asp:Content> bbyopen/ShowStoreLocations.aspx.vb Imports System.Collections.Generic Imports System.Data Partial Class ShowStoreLocations Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim address = Request.QueryString("Address")
  • 112. If String.IsNullOrEmpty(address) Then Response.Redirect("FindAStore.aspx") End If 'Get the lat/long info about the address Dim results = GoogleMapsAPIHelpers.GetGeocodingSearchResults(address) lblAddress.Text = address 'Set the latitude and longtitude parameters based on the address being searched on Dim lat = results.Element("result").Element("geometry").Element("locatio n").Element("lat").Value Dim lng = results.Element("result").Element("geometry").Element("locatio n").Element("lng").Value dsSearchResults.SelectParameters("lat").DefaultValue = lat
  • 113. dsSearchResults.SelectParameters("lng").DefaultValue = lng lvSearchResults.DataBind() 'Loop through each nearby location and build up the JavaScript to place the markers Dim locations As New List(Of String) Dim overlayContents As New List(Of String) Dim nearbyLocations = CType(dsSearchResults.Select(DataSourceSelectArguments.Em pty), DataView) Dim count = 1 For Each location As DataRowView In nearbyLocations locations.Add(String.Format("{{ title: ""Store #{0}"", position: new google.maps.LatLng({1}, {2}), icon: ""Images/NumberToImageHandler.ashx?number={3}"" }}", location("StoreId"), location("lat"), location("lng"), count))
  • 114. overlayContents.Add(String.Format("{{ content: ""<div class=""infoWindow""><b>Store #{0}</b><br />{1}<br />{2}, {3} {4}</div>"" }}", location("StoreId"), location("Address"), location("City"), location("postalCode"), location("phone"))) count += 1 Next Dim locationsJson = "[" & String.Join(",", locations.ToArray()) & "]" Dim overlayContentsJson = "[" & String.Join(",", overlayContents.ToArray()) & "]" ' Inject the Google Maps script ClientScript.RegisterStartupScript(Me.GetType(), "Google Maps Initialization", _ String.Format("init_map('map_canvas', {0}, {1}, 13, {2}, {3});", lat, lng, locationsJson, overlayContentsJson), True) End If End Sub
  • 115. End Class bbyopen/Site.master Unit 4 Assignment 1 Best Buy Store Locator Alex Benavides HomeFind a Store
  • 116. ASP.NET application designed by Alex Benavides. IT4795 Unit 4 Assignment 1 bbyopen/Site.master.vb Partial Class Site Inherits System.Web.UI.MasterPage End Class
  • 118. .skm_RowLabel { font-weight: bold; text-align: right; } pre b { color: Red; } table.searchResults { width: 95%; border: 1px solid black; } table.searchResults th {
  • 119. background-color: #fee; } #noResults { padding-left: 25px; color: Red; } .map-area { width: 95%; height: 400px; margin-bottom: 15px; border: solid 1px #333; } .infoWindow { line-height: normal; }
  • 120. bbyopen/Styles/LICENCE.txt ***************************************************** ********************* * * * The Sinorcaish Stylesheet * * Copyright (C) 2004-07, John Zaitseff * * * ***************************************************** ********************* You may freely redistribute and/or modify the Sinorcaish stylesheet files "sinorcaish-screen.css" and "sinorcaish-print.css" on the condition that the original copyright notice is preserved. The same condition applies to the overview document "index.html", to the sample document "sample.html" and to the logo image instructions "logo.html". You may redistribute and/ or modify the template file "template.html" without ANY such restriction.
  • 121. You may freely redistribute unmodified versions of the complete Sinorcaish stylesheet archives. These conditions may be waived; write to John Zaitseff for details: Postal: John Zaitseff, The ZAP Group, Unit 6, 116 Woodburn Road, Berala, NSW, 2141, Australia E-mail: [email protected] bbyopen/Styles/sinorcaish-screen.css /**************************************************** ******************** * * * Sinorcaish Screen-based Style Sheet *
  • 122. * Copyright (C) 2004-07, John Zaitseff * * * ***************************************************** *******************/ /* Author: John Zaitseff <[email protected]> Version: 1.3 $Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $ This file provides the Sinorcaish style sheet for screen-based user agents (ie, for ordinary Web browsers). This file conforms to the Cascading Style Sheets 2.1 specification. The design of Sinorcaish is influenced by Sinorca (available from the Open Source Web Design site, http://www.oswd.org/), which in turn was based on the Acronis company web site
  • 123. (http://www.acronis.com/). You can find more information about this design from its home page on the ZAP Group web site, http://www.zap.org.au/documents/styles/sinorcaish/. This file may be redistributed and/or modified on the condition that the original copyright notice is retained. */ /********** Global Styles **********/ /* The global font size is set to 90% as */ /* most browsers' normal font size is too */ /* large, at least when using Verdana */ body { font-family: Verdana, "DejaVu Sans", "Bitstream Vera
  • 124. Sans", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 90%; /* Allow IE/Win to resize the document */ color: black; background: White; margin: 0; padding: 0; border: none; } .hidden { /* Used for content that should be displayed */ /* by non-stylesheet-aware browsers */ display: none !important; } .notprinted { /* Used for content that should not be */ } /* printed to paper */
  • 125. /* Headings */ h1, /* Headings (H1-H6) should only be used in */ h2, /* the main content area */ h3 { font-weight: bold; text-align: left; margin: 0.5em 0 0 0; padding: 0; } h4, h5, h6 { font-weight: bold; text-align: left;
  • 126. margin: 1.25em 0 0 0; padding: 0; } h1 { font-size: 175% } h2 { font-size: 145% } h3 { font-size: 120% } h4 { font-size: 105% } h5 { font-size: 80% } h6 { font-size: 65% } /* Anchors */ a:link { text-decoration: none; color: #0066CC; background: transparent;
  • 127. } a:visited { text-decoration: none; color: #003399; background: transparent; } a:hover, a:active { text-decoration: underline; } /* Inline elements and classes */ /* This style sheet assumes B, BIG, EM, I, */
  • 128. /* SMALL, STRONG, SUB and SUP are defined */ /* by the browser as per the HTML4 sample */ /* style sheet. */ code, kbd, samp, tt { font-family: "Courier New", Courier, monospace; font-size: 115%; /* Courier tends to be a little too small */ line-height: 1.0; /* Otherwise lines tend to spread out */ } kbd, code.markup, /* HTML/CSS markup */ span.markup, /* Alternative form for HTML/CSS markup */ .title { /* Title in floating boxes / left sidebar */
  • 129. font-weight: bolder; } abbr, acronym { font: inherit; /* Don't use small-caps, etc. */ } .tooltip { cursor: help; border-bottom: 1px dotted #CCCCCC; } abbr[title], acronym[title] { cursor: help; border-bottom: 1px dotted #CCCCCC; }
  • 130. cite, dfn, var, .fn, /* Filename */ .url, /* Uniform Resource Locator */ .email { /* E-mail address */ font-style: italic; } .program, /* Command-line name of a computer program */ .window, /* Window or dialog box name */ .menu, /* Menu item in a computer program */ .gui, /* Generic GUI element in a computer program */ .key { /* Keypress in a computer program */ font-weight: bolder;
  • 131. } .clearboxes { /* Clear navboxes and floatboxes */ clear: right; } .unicode { font-family: "Arial Unicode MS", "Lucida Sans Unicode", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; } /* Block-inline elements and classes */ img { vertical-align: baseline; margin: 0; padding: 0;
  • 132. border: none; } img.icon16 { /* For 16x16 file-type icons */ vertical-align: -2px; } del, del * { /* Required for Mozilla */ text-decoration: line-through; } ins, ins * { /* Required for Mozilla */ text-decoration: underline; } .floatleft { /* Left-floating images and spans */
  • 133. margin: 0.5em 1.5em 0.5em 0; float: left; } .floatright { /* Right-floating images and spans */ margin: 0.5em 0 0.5em 1.5em; float: right; } .nowrap { white-space: nowrap; } /* Block elements */ p { margin: 1em 0;
  • 134. padding: 0; } blockquote { /* Should only be used in main content area, */ /* floating boxes or left sidebar. */ margin: 1em 2.5em; padding: 0; } pre { /* Should only be used in main content area */ /* and floating boxes. */ font-family: "Courier New", Courier, monospace; font-size: 95%; /* Courier tends to be a little too small */ line-height: 1.2; margin: 1em 2.5em; padding: 0; }
  • 135. pre code, pre kbd, pre samp, pre tt { font-size: 100%; /* PRE is already enlarged above */ line-height: 1.2; /* Use same value as for PRE above */ } hr { color: #999999; background: transparent; height: 1px; /* Required for IE/Win */ margin: 0; padding: 0; border-color: #999999; border-width: 1px; border-style: none none solid none;
  • 136. } hr.lighter { /* Warning: not printed out on paper */ color: #F0F0F0; background: transparent; border-color: #F0F0F0; } /* Lists */ ol { list-style: decimal outside; margin: 1em 0; padding: 0 0 0 2.5em; }
  • 137. ol.alpha { list-style-type: lower-alpha; } ol.number { list-style-type: decimal; } ul { list-style: square outside; margin: 1em 0; padding: 0 0 0 2.5em; } ol ol, ol ul, ul ol, ul ul {
  • 138. margin-top: 0; margin-bottom: 0; } ol ul, /* Override possible browser styles */ ol ol ul, ol ul ul, ul ul, ul ol ul, ul ul ul { list-style: square outside; } li { margin: 0; padding: 0; }
  • 139. dl { margin: 1em 0; padding: 0; } dt { font: inherit; /* Don't make the text bold by default */ margin: 1em 0 0.25em 0; padding: 0; } dd { margin: 0 0 1em 2.5em; padding: 0; } /* Tables */
  • 140. /* Tables should never be used for visual */ /* formatting: that is the role of CSS! */ table.simple { color: inherit; background: inherit; /* Don't make tables transparent */ border-collapse: collapse; border-spacing: 0; empty-cells: show; margin: 0.5em 2.5em; padding: 0; border: 1px solid #999999; } table.simple caption { text-align: center; caption-side: top;
  • 141. margin: 0 2.5em 0.75em; padding: 0; border: none; } table.simple td, table.simple th { text-align: center; vertical-align: middle; margin: 0; padding: 0.25em 0.5em; border: 1px solid #999999; } table.simple th, table.simple td.highlight, table.simple th.highlight { font-weight: bold;
  • 142. color: inherit; background: #F0F0F0; } table.simple td.lighter, table.simple th.lighter { color: inherit; background: #F8F8F8; } table.simple td.left, table.simple th.left { text-align: left; } table.simple td.center, table.simple th.center { text-align: center;
  • 143. } table.simple td.right, table.simple th.right { text-align: right; } /* Forms */ form { margin: 1em 0; padding: 0; border: none; } input, button,
  • 144. select, fieldset, legend { font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 95%; color: black; background: inherit; vertical-align: middle; } textarea { font-family: "Courier New", Courier, monospace; font-size: 100%; color: black; background: inherit; vertical-align: middle; }
  • 145. fieldset { font-size: 100%; margin: 1em 0; border: 1px solid #999999; } legend { font-size: 100%; margin: 0 0.5em; padding: 0 0.25em; border: none; } table.formtable { color: inherit; background: inherit; border-collapse: collapse; border-spacing: 0;
  • 146. empty-cells: show; margin: 0; padding: 0; border: none; } table.formtable td, table.formtable th { text-align: justify; vertical-align: middle; margin: 0; padding: 0.25em 0.5em; border: none; } table.formtable th { text-align: center; font-weight: bold;
  • 147. } table.formtable td.label, table.formtable th.label { text-align: right; vertical-align: top; } table.formtable td.vertspace, table.formtable th.vertspace { empty-cells: show; margin: 0; padding: 0.5em 0; height: 1em; /* Required for IE/Win */ } table.formtable fieldset { margin: 0;
  • 148. } table.formtable fieldset td, table.formtable fieldset th { margin: 0.25em 0.5em; } .reqfield { color: red; background: transparent; font-weight: bolder; } .info { color: gray; background: transparent; font-size: 90%; }
  • 149. /* The following HTML elements should NOT be used in documents using this style sheet: address - use the #footer style instead q - use &ldquo; and &rdquo; instead */ /********** Styles for Main Content **********/ #main { text-align: justify; line-height: 1.5; color: black; background: white;
  • 150. margin: 0 0 0 12.5em; padding: 0.1em 1.5em 0.5em 1em; border-left: 1px solid #999999; } #main h1 { /* Should be used once, following navhead */ color: #999999; background: transparent; margin: 0 0 0.5em 0; } #main .highlight { /* Highlight box (for warnings, etc) */ color: inherit; background: #F0F0F0; margin: 1em 0; padding: 1em 2.5em; border: 1px solid #999999; }
  • 151. #main .totop { /* For "Top ^" lines in FAQs, etc */ font-size: 90%; text-align: right; margin: -0.75em 0 1em 0; padding: 0 0 0.25em 0; border-bottom: 1px solid #F0F0F0; } #main table.simple td.highlight, /* Else "#main .highlight" will override */ #main table.simple th.highlight { margin: 0; padding: 0.25em 0.5em; } /* Other styles related to the main content */
  • 152. #mainlink { /* "Skip to main content" link */ display: none !important; } #navhead { /* "Path to this page" information */ /* Warning: not printed out on paper */ font-size: 90%; } #navhead hr { display: none; } #endmain { visibility: hidden; clear: both; /* Doesn't always work under IE/Win */ }
  • 153. /********** Styles for Floating Boxes **********/ /* "navbox" is used to provide intra/inter- */ /* page links; it is NOT printed out on */ /* paper. "floatbox" is used to provide */ /* floating boxes that may appear anywhere */ /* in the main content; they ARE printed. */ .floatbox, .navbox { overflow: visible; font-size: 95%; line-height: 1.25; margin: 0 0 0.75em 1.5em; padding: 0.5em 1em; border: 1px solid #999999;
  • 154. float: right; clear: right; } .floatbox { color: black; background: #F0F0F0; width: 35%; } .navbox { text-align: left; color: black; background: white; width: 12.5em; } .floatbox hr, /* Used for non-stylesheet-aware
  • 155. browsers */ .navbox hr { display: none !important; } .floatbox p, .navbox p { margin: 0.75em 0; padding: 0; } .floatbox ol, .floatbox ul { margin: 0.75em 0; padding: 0 0 0 1.5em; } .navbox ol,
  • 156. .navbox ul { margin: 0.5em 0; padding: 0 0 0 1.5em; } .floatbox blockquote { margin: 0.75em 1.5em; padding: 0; } .floatbox pre { font-size: 95%; margin: 0.75em 1.5em; padding: 0; } .floatbox dt { margin: 0.75em 0;
  • 157. padding: 0; } .floatbox dt { margin: 0.75em 0 0.25em 0; padding: 0; } .floatbox dd { margin: 0 0 0.75em 1.5em; padding: 0; } #main .floatbox .highlight { color: inherit; background: white; margin: 0.75em 0; padding: 0.75em 1.5em;
  • 158. } #main .floatbox table.simple { margin: 0.75em 0; } #main .floatbox table.simple th, #main .floatbox table.simple td.highlight, #main .floatbox table.simple th.highlight { color: inherit; background: white; margin: 0; padding: 0.25em 0.5em; } /********** Styles for Header **********/
  • 159. /* In this style sheet, headers are composed */ /* of three parts: left, right and subheader */ /* Left part is ideally an image. */ #header { /* Warning: not printed out on paper */ color: #003399; background: #8CA8E6; } #header a:link, #header a:visited { color: #003399; background: transparent; } #header .highlight, #header a.highlight:link,
  • 160. #header a.highlight:visited { color: white; background: transparent; } /* Left part of header (ideally an image but may be a link) */ #header div.left { float: left; clear: left; margin: 0; padding: 0; } #header div.left img { display: block; /* Otherwise IMG is an inline, causing gaps */ }
  • 161. #header div.left, #header div.left a:link, #header div.left a:visited { font-size: 200%; font-weight: bold; text-decoration: none; color: white; background: transparent; } #header div.left p { margin: 0 0 0 0.25em; padding: 0; } #header div.left .alt { color: #FF9800; background: transparent;
  • 162. } /* Right part of header is for external/global links, search, etc */ #header div.right { font-size: 90%; text-align: right; margin: 0; padding: 0.5em 1.17em 0 1em; float: right; clear: right; } #header div.right a:link, #header div.right a:visited { margin: 0; padding: 0 0.5em;
  • 163. } #header div.right form { margin: 0; padding: 0.25em 0.5em 0 0; } #header div.right form input { font-size: 95%; vertical-align: middle; } /* Subheader for global links */ #header div.subheader { color: white; background: #003399; margin: 0;
  • 164. padding: 0; border: 1px solid #003399; /* Required for IE/Win */ clear: both; } #header div.subheader p { /* To overcome an IE/Win unwanted padding */ /* bug, still present in IE7. */ margin: 0; padding: 0.5em; } #header div.subheader a:link, #header div.subheader a:visited { font-weight: bolder; color: white; background: transparent; margin: 0; padding: 0 0.5em;
  • 165. } #header div.subheader .highlight, #header div.subheader a.highlight:link, #header div.subheader a.highlight:visited { color: #FDA05E; background: transparent; } /********** Styles for Left Sidebar **********/ #sidebar { /* Warning: not printed out on paper */ width: 12.5em; border-right: 1px solid #999999; float: left; background-color:#F0F0F0; clear: both;
  • 166. } #sidebar div { font-size: 95%; margin: 0; padding: 0.25em 0.25em; } #sidebar div.lighter { color: inherit; background: white; } #sidebar p { margin: 0.5em 0; } #sidebar .title a:link,
  • 167. #sidebar .title a:visited { color: black; background: transparent; } #sidebar ul { list-style: none outside; margin: 0.5em 0; padding: 0; } #sidebar ul li { margin: 0; padding: 0.125em 0; } #sidebar ul li.highlight { color: inherit;
  • 168. background: white; margin-left: -1em; margin-right: -1em; padding-left: 1em; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } #sidebar ul li.highlight a:link, #sidebar ul li.highlight a:visited { color: black; background: transparent; } /********** Styles for Footer **********/ #footer {
  • 169. font-size: 90%; text-align: left; color: white; background: #6381DC; margin: 0; padding: 0.5em 1.67em 0.5em 15.25em; clear: both; } #footer a:link, #footer a:visited { text-decoration: underline; color: white; background: transparent; } #footer hr { display: none !important;
  • 170. } /* End of the Sinorcaish style sheet */ bbyopen/web.config