OpenLayers OpenLayers

Creating your own third party layer to work with OpenLayers is easy.

With an API

Assuming you have a good API to work with, it generally shouldn't take much more than 30 minutes. If you have a 3rd party API, you should start by looking at EventPane, from which you should inherit. You should take a look at the Google layer to see how it is done.

The easiest way to do this is to make a copy of OpenLayers/Layer/Google.js and go through and modify to your new source.

Below I will deconstruct OpenLayers.Layer.Google, highlighting the important parts:

  Object.extend( new OpenLayers.Layer.EventPane(), 
    Object.extend( new OpenLayers.Layer.FixedZoomLevels(), {

isFixed: true

    /** @type int */
    minZoomLevel: 0,
    
    /** @type int */
    maxZoomLevel: 16,
this.numZoomLevels = this.maxZoomLevel - this.minZoomLevel + 1;
  • load()
  • moveTo()
  • onMapResize()
  • Translation Functions

With a WMS-like service

If you're working with a service like WMS, where your service can take arbitrary bounding boxes, you probably want to subclass from WMS, and override just the 'getURL' function: the getURL function is expected to be passed an OpenLayers.Bounds? object, and return a string which can be put in <img src="" /> to display an image for that bounds.

If you're working with something that is tiled, you can do something similar; UsingCustomTiles has an explanation of that which may help.