Displaying Dynamic KML with ASP.NET

by Idaho Web Designer 22. June 2009 20:06

Backcountry Secrets wanted to display KML files for each of their points on their maps.  I didn't want to store all of the KML files on my server, but I wanted to store them in a MySQL database.  The first step was to get the KML file uploaded to the server.  Here's my code I used:

protected void cmdUpload_Click(object sender, EventArgs e)
    {
        MySqlConnection conn = new MySqlConnection(ConfigurationManager.ConnectionStrings["MySQLConnectionString"].ToString());
        MySqlCommand cmd = conn.CreateCommand();

        Stream imageStream = uploadKMLFile.PostedFile.InputStream;
        TextReader t = new StreamReader(imageStream);

        string kmlText = t.ReadToEnd();

        //Insert KML string to the database
        cmd.CommandText = "INSERT INTO kmlfilestable (kmlstring) " +
                            "VALUES (?KML)";
        conn.Open();

        cmd.Parameters.Add("?KML", MySqlDbType.Text);
        cmd.Parameters["?KML"].Value = kmlText;

        cmd.ExecuteNonQuery();
        conn.Close();

        lblUploadSuccess.Text = "Thank you for uploading this KML. We will now review for approval.";

}

After successfully getting the KML string in to the database my next task was to get it to show up on the map for each point.  I built a webhandler (.ashx file) to handle requests for the KML string that dynamically generates the KML file structure. 

<%@ WebHandler Language="C#" Class="displayKml" %>

using System;
using System.IO;
using System.Web;
using System.Text;
using System.Data;
using System.Configuration;
using MySql.Data.MySqlClient;

public class displayKml : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        string intPointID = context.Request.QueryString["pointid"];

        MySqlConnection conn = new MySqlConnection(ConfigurationManager.ConnectionStrings["backcountryMySQL"].ToString());
        MySqlCommand cmd = conn.CreateCommand();
        string strKML = "";

        cmd.CommandText = "SELECT kmlstring FROM kml WHERE fkpointid = ?PointID";

        try
        {
            conn.Open();
            cmd.Parameters.Add("?PointID", MySqlDbType.Int32);
            cmd.Parameters["?PointID"].Value = intPointID;
            strKML = cmd.ExecuteScalar().ToString();
            conn.Close();
            conn.Dispose();

            //*************************************************************************
            //Download the KML file to client
            //*************************************************************************
            context.Response.Clear();
            context.Response.ContentType = "text/xml";
            context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + intPointID + ".kml");
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            byte[] byteArray = Encoding.ASCII.GetBytes(strKML);
            context.Response.BinaryWrite(byteArray);
            context.Response.End();

        }
        catch
        {
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Finally on the page that displays the google map and kml file I included a request to the webhandler to display the file in the initialization of the Google Map.

 <script type="text/javascript">
        function initialize() {
            if (GBrowserIsCompatible()) {
                var strLat = <%=strLat %>;
                var strLon = <%=strLon %>;
               

                var map = new GMap2(document.getElementById("map_canvas"));
                map.setUIToDefault();
                map.addMapType(G_SATELLITE_3D_MAP);

                //Zoom to the point
                var point = new GLatLng(strLat, strLon);
               
                if (<%=strShowMap %> == '0') //User does not have access to the map.
                {
                    var zoomLevel = 1;
                    map.setCenter(point, zoomLevel);
                }
                else //Show the map and KML file
                {
                    map.setCenter(point);
                    //View the KML
                    url_end = "?nocache=" + (new Date()).valueOf(); 
                    var geoxml = new GGeoXml("http://www.backcountrysecrets.com/displayKml.ashx?kmlstring=<%=kmlID %>");
                    map.addOverlay(geoxml);
                    geoxml.gotoDefaultViewport(map);
                }
            }
        }
</script>

 

Tags: , , ,

MySQL | ASP.NET | KML | Google Maps