Mi sono cimentato nella realizzazione di una Sezione per MWPSK che mi permettesse di realizzare la funzionalità "Dove siamo"/"Where we are" presente nella maggior parte siti in modo più dinamico tramite una mappa di Virtual Earth.
La scelta è caduta su una Section perchè rispetto agli Easy Control permettono di avere dei dati di configurazione che possono essere poi salvati anche se l'implementazione di una Section è maggiormente complessa rispetto a quella di un Easy Control. In questo modo però è posiibile dare all'utente la possibilità di configurare la mappa consentendo la possibiltà di inserire latitudine e longitudine del centro mappa, di definire l'altezza della sezione e opzionalmente di definire zoom, rendere fissa la mappa, inserire un Pushpin, impostare la metrica e visualizzare la MiniMap.
Inoltre in questo modo sarà possibile inserire più mappe nel sito e ciò può tornare utile nel caso ad esempio di piccole attività commerciale con più punti vendita.
Gli Easy Control sono da intersi invece come funzionatà generali senza necessità di configurazione o di persistenza di dati o come funzionalità specifiche del sito, il vantaggio è che la loro implementazione è meno complessa.
Per approfondire le linee guida per implementare Section e Easy Control si faccia riferimento ai seguenti link:
http://www.codeplex.com/MyWebPagesStarterKit/Project/FileDownload.aspx?DownloadId=6942
http://www.codeplex.com/MyWebPagesStarterKit/Project/FileDownload.aspx?DownloadId=15508
http://www.codeplex.com/MyWebPagesStarterKit/Wiki/View.aspx?title=Additional%20components%20and%20examples
Implementare una Section VirtualEarth significa di fatto realizzare un controllo che erediata dalla classe del MWPSK MyWebPagesStarterKit.Controls.SectionControlBaseClass la quale a sua volta eredita da System.Web.UI.UserControl e scrivere una classe che si occuperà gestire i dati di configurazione ereditata dalla classe MyWebPagesStarterKit.Section.
Per inserire una mappa Virtual Earth all'interno di uno UserControl occorre:
- Aggiungere un div nello UserControl all'interno del quale verrà visualizzata la mappa.
Per poter modificare l'altezza della mappa il div sarà a sua volta contenuto all'interno di un panel:
<asp:View ID="readonlyView" runat="server">
<asp:Panel ID="panReadonly" runat="server" Height="300px" Width="100%">
<div style="position: relative; width: 100%; height: 100%" id="divMap">
</div>
</asp:Panel>
</asp:View>
- Aggiungere il meta <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> nel tag head.
Ciò consente la corretta visualizzazione di tutte le mappe, ad esempio, nel caso di una mappa del Giappone i caratteri giapponesi sarranno visualizati correttamente.
Per aggiungere il tag è possibile utilizzare le seguenti istruzioni:
System.Web.UI.HtmlControls.HtmlMeta meta = new System.Web.UI.HtmlControls.HtmlMeta();
meta.HttpEquiv = "Content-Type";
meta.Content = "text/html; charset=utf-8";
this.Page.Header.Controls.Add(meta);
- Aggiungere il tag script per l'inclusione delle Api di Virtual Earth:
<script src="http://dev.virtualearth.net/mapcontrol/v5/mapcontrol.js" type="text/javascript"></script>
Per aggiungere il tag script include è possibile utilizzare le seguenti istruzioni:
if (!this.Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(),"mapcontrol"))
{
this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "mapcontrol",
"http://dev.virtualearth.net/mapcontrol/v5/mapcontrol.js");
}
- Costruire lo script block contenente la funzione LoadMap che richiama la funzione javascript BuildMap contenuta nel file ascx dello UserControl con i paramentri impostati in sede di configurazione per il redering della mappa all'interno del div.
Per aggiungere lo script block è possibile utilizzare le seguenti istruzioni:
if (!this.Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "loadmap"))
{
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "loadmap",
"function LoadMap()\n" +
"{\n" +
string.Format("BuildMap({0},{1},{2},'{3}',{4},{5},'{6}','{7}');\n",
this._section.Latitude,
this._section.Longitude,
this._section.Zoom,
this._section.Unit,
this._section.Fixed.ToString().ToLower(),
this._section.ShowMiniMap.ToString().ToLower(),
this._section.PushpinTitle,
this._section.PushpinDescription) +
"}",
true);
}
- Invocare la funzione javascript LoadMap nell'evento onload del body.
Occorre chiamare il metodo LoadMap dopo aver completato il caricamento della pagina poiché il caricamento della mappa va a modificare il DOM e può causare errori nel browser (in particolare con IE7) se le modifiche avvengono prima che tutto il DOM sia stato caricato.
Per aggiungere lo startup script è possibile utilizzare le seguenti istruzioni:
if (!this.Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "onload"))
{
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "onload",
"AddOnloadEvent(LoadMap);",
true);
}
La funzione javascript AddOnloadEvent si occupa di aggiungere un event handler all'evento onload del body della pagina che ospita lo UserControl ed è contenuta nel file ascx dello stesso:
function AddOnloadEvent(fnc)
{
if ( typeof window.addEventListener != "undefined" )
// Mozilla
window.addEventListener( "load", fnc, false );
else if ( typeof window.attachEvent != "undefined" ) {
// IE
window.attachEvent( "onload", fnc );
}
else {
// Others
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}
La Section è disponibile per il download al seguente link:
http://www.codeplex.com/MyWebPagesStarterKit/WorkItem/View.aspx?WorkItemId=12747
Ovviamente può ancora essere migliorata in quanto al momento non è localizzata, ma l'interfaccia di configurazione è solo in lingua inglese e non ho scritto l'help ma ho solo gestito il link ad una sezione #virtualearth-content nel file quick_guide.html.
Un'estensione interessante potrebbe essere quella di poter aggiungere più pushpin sulla mappa.