Custom Layers

It is relatively easy to customize the existing layers or create your own layers with CanvasMap. To customize an existing layer, you simply create a new layer, inherit from the existing layer, and override the desired functions. To create a wholly new layer, you do exactly the same thing except you inherit from the base class class "Layer".

Customizing a Layer

Now that we have that in hand (feel free to just copy an example from one of the existing layer files), let's talk about how to customize an existing layer.

There are really two things you probably want to do:

1. Change how the layer is painted
2. Change how the layer behaves when it is clicked on in the map

The first one is accomplished by simply overriding the Paint() function in the layer.

The second one is accomplished by overriding the MouseDown(), MouseMove(), and/or MouseUp() functions.

Inheritance in JavaScript

Before we go further, we need to describe a little bit about inheritance in JavaScript. If you look on the web, you'll see there is an active debate about whether or not JavaScript supports object-oriented programming and even some new constructs in JavaScript including a "class" keyword which, unfortunately, are not well supported. Regardless, JavaScript has the ability for you to do object-oriented programming as long as you don't mind that it's a little (OK, a lot) unorthodox. There are a variety of methods but the approach I've taken allows you to: inherit from a superclass, override selected functions, and call functions in the super class.

The key to this approach is in recognizing that JavaScript "classes" are really just a list of functions stored in a "prototype". This list can be copied and manipulated in a variety of ways. There is a "this" pointer for the current object, but there is no "super" object pointer but we can get around that.

Classes in JavaScript

First, let's review basic classes in JavaScript. Below is the code to create a new object and then a function to "SetVisible(Flag)".

function CMLayer() 
{
	this.Visible=true; // initialize the flag to false
}

CMLayer.prototype.SetVisible=function(NewVisible)
{
	this.Visible=NewVisible;
	Repaint();
}

If you're not familiar with this, I recommend trying it for your self. A good approach is to create a class that puts up alerts and then change the contents of the alert.

function Animal() {}

Animal.prototype.Alert() { alert("I'm a general animal"); }

To call this we simply:

var TheObject=new Animal();
TheObject.Alert();

OOP In JavaScript

The Constructor

The constructor code below provides the "constructor function" for a "CMLayerGeoJSON" object. Then, we create a new object from the superclass, Layer, and store it in prototype. This actually creates a copy of all the functions in Layer which we can now mess with. Replacing the "constructor" in the "prototype" then replaces the Layer constructor with our own.

function CMLayerGeoJSON() 
{
 this.FeatureStyles=null;
 
 this.HTMLAttribute=null;
}
CMLayerGeoJSON.prototype=new CMLayer(); // inherit prototype functions from the super class

CMLayerGeoJSON.prototype.contructor=CMLayerGeoJSON; // override the constructor to go to ours

Overriding

It's easy (almost too easy) to override a function in a subclass in JavaScript, you simply define the function again.

JavaScript in browsers does not have a documented way of calling the super class function when overriding. However, it is easy to just add the superclasses function to your prototype by changing its name.

// save the old function with a name prefixed by the super classes name

CMLayerGeoJSON.prototype.Layer_SetVisible=CMLayerGeoJSON.prototype.SetVisible; 

// override the super classes function with a new function

CMLayerGeoJSON.prototype.Layer_SetVisible=function(NewValue)
{
	this.Layer_SetVisible(NewValue); // call the original function in the super class

	// add new code as desired
}