Release of Backcountry Secrets' site redesign

by Idaho Web Designer 10. July 2009 10:18

For the past month a lot of effort has gone in to the site redesign of Backcountry Secrets.  I basically rebuilt this web site from the ground up.  Some of the features of the new site design are faster page load times, a more pleasing graphic design, and more intuitive user interface.  We also added the ability for members to share photos through Flickr, upload and download KML files that are displayed on Google Maps, and submit user reviews.  One new feature that will help with Search Engine Optimization and keeping users on the site longer is the display of "Points Nearby".  These will be internal links and keep users on the site longer looking at related points. 

Tags: , ,

MySQL | new site | ASP.NET | KML | Google Maps | SEO | redesign

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)";

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


        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";

            cmd.Parameters.Add("?PointID", MySqlDbType.Int32);
            cmd.Parameters["?PointID"].Value = intPointID;
            strKML = cmd.ExecuteScalar().ToString();

            //Download the KML file to client
            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);

    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"));

                //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
                    //View the KML
                    url_end = "?nocache=" + (new Date()).valueOf(); 
                    var geoxml = new GGeoXml("<%=kmlID %>");


Tags: , , ,

MySQL | ASP.NET | KML | Google Maps