Crater Lake National Park

NPMap

Digital maps for the National Park Service

Kml Layer Handler

The Kml layer handler allows you to bring KML layers into an NPMap web map. At this time, this layer handler is only supported in maps utilizing the bing, google, or leaflet base API.

Supported Operations

Adding a Layer To Your Map

Kml layers can be added via the layers property in your NPMap.config object. Here are the properties that can be set on a Kml layer object:

Property Type Required? Description Example
identify {Object} Used to customize the way data returned from an identify operation on this layer are displayed in the InfoBox. See the Customizing what is displayed in the InfoBox section of the NPMap.InfoBox documentation for information on this property.
name {String} X A name for this layer. Every layer added to NPMap via the layers config must have a unique name. name: 'National Heritage Areas'
point {String} Symbology to use for points contained in this Kml layer. Valid values are default or a URL to an image. If nothing is specified here, point symbology from the KML will be used, if specified. If nothing is specified here and no point symbology is specified in the KML file, the base API's default symbology will be used. point: 'default' or point: 'images/point.png'
polygon {String} or {Object} Symbology to use for polygons contained in this Kml layer. Valid values are default {String} or a config {Object} with the following properties: fill, fillOpacity, line, lineOpacity, lineWidth. All of these properties are optional, so you can specify as many or as few as you'd like. If this property isn't specified, the default property for the Base Api will be used. polygon: 'default' or
polygon: {
  // Hex string
  fill: '5e7630',
  // Integer of opacity (0 - 255)
  fillOpacity: 174,
  // Hex string
  line: '5e7630',
  // Integer of opacity (0 - 255)
  lineOpacity: 200,
  // Integer width of line
  lineWidth: 1
}
type {String} X The only valid value for this layer type is Kml. type: 'Kml'
url {String} X The URL path to the .kml file. url: 'data/national-heritage-areas.kml'

And here is a working example:

{
  name: 'National Heritage Areas',
  polygon: {
    fill: '5e7630',
    fillOpacity: 174,
    line: '5e7630',
    lineOpacity: 200,
    lineWidth: 1
  },
  type: 'Kml',
  url: 'data/national-heritage-areas.kml'
}