I’ve recently had a chance to write a Google Maps control for EPiServer, it’s still somewhat buggy and I’m still considering how to release it since it still contains some java script that is potentially GPL infected and I would not like to contaminate someone’s code with it. I may end up rewriting it to some extent or make it more server side so that it’s completely ASP based.

Anyway…

We’ve started working on the rewrite of our site internally in a few CMS’es basically creating an internal competition on which of the engines/teams can do the best the easiest and the fastest site. I can say honestly, EPiServer has been a blast! Virtually any control we’ve decided to place there was almost completely effortless. The controls that are delivered (with sample usage on the demo site) just seem to cover everything. Well, almost everything. There is no map creation component as far as I can tell.

I’ve been wanting to write this control for quite a while and since I deployed a wiki for my family and started filling it in. I had a really nice experience with this Google Map extension to the MediaWiki. I wanted us to have the same on our site. And in the mean time we’ve started running into some limitations that required us to write some plugins for the editor’s site of the CMS. Striking two birds with one stone, here comes the Google Maps for EpiServer.

Anyone familiar with EpiServer knows that the CMS allows you to define the content on any given page through a set of properties defined for its page type. There is a handful of those, and each of them comes with a specific editor. Some of them even come with so called DOPE (Dynamic-on-page-editing). This feature is really so cool that by itself it’s probably one of the driving selling factor. I wanted it all!

To deliver it you need to inherit a property, (in my case I decided to go with a LongString as I can easily go over the 255 char limit if the user woudl decide to have more than a couple of flagpoints on his/her map) and define its editors.

I’ve found out that the property can be easily integrated with the CMS (virtually without any user intervention) by means of attributes/reflection. So here we go:

namespace Cognifide.EPiServerControls.GoogleMaps

{

  [global::EPiServer.PlugIn.PageDefinitionTypePlugIn(

    DisplayName = “GoogleMapData”, Description = “Google Map”)]

  public class GoogleMapProperty : EPiServer.Core.PropertyLongString

  {

   …

  }

}

Yay! one line of code and my class is a property and will show up in the system as one of the available data formats. Now how cool is that!?

The cool part of it is that now as it’s a property, it’s even easier to integrate it with the page.

<%@ Page language=”c#” Codebehind=”GoogleMapsPage.aspx.cs”

    AutoEventWireup=”True”

    Inherits=”development.Templates.GoogleMapsPage”

    MasterPageFile=”~/templates/MasterPages/MasterPage.master” %>

 

<%@ Register TagPrefix=”EPiServer”

    Namespace=”EPiServer.WebControls” Assembly=”EPiServer” %>

 

<asp:ContentContentPlaceHolderID=”MainRegion” runat=”server”>

  <EPiServer:Property ID=”MyGoogleMap” runat=”server”

  PropertyName=”GoogleMapData” />

</asp:Content>

That’s it! The CodeFile is practically empty, except for the autogenerated part. The property instance knows by itself that is should pull the data from the page property defined in “PropertyName”!

The control supports all 3 modes:

– View Mode – obviously:

– Edit mode – can’t do without it:

I initially planned to put the dope-like editing there but for some reason EPiServer scripts kept interfering with the JavaScript defined for the control. Didn’t give it too much thought though what I really wanted to work good is…

– DOPE mode – this is probably the coolest thing in the whole deal:

The only problem I still have with the last mode is that most of the code for the DOPE mode I have is a modified version of what comes originally from the MediaWiki Google Map extension. Since JavaScript is not my core competence, I’ve only modified it to the extent that was needed for the code to work and therefore before save, you need to copy the dynamically generated code that’s just below the editing controls and into the edit box. Lame, I know. But I don’t really fancy learning Java Script further right now and it was not the point of this exercise. Perhaps if the control is released someone will be kind enough to fix and extend it so that it’s more streamlined.

The article is based on the knowledge I’ve gathered and work I’ve performed for Cognifide. Cognifide is an official partner EPiServer and the real contributor of the the control.

(No Ratings Yet)

Loading...

This entry (Permalink) was posted on Friday, March 23rd, 2007 at 4:10 pm and is filed under .Net Framework, ASP.NET, C#, EPiServer, Web applications. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.