createLayer()

Information

Implementation version: beta 1.00

Updated in: beta 1.10

Description

Loads on the map a layer of data, both verctor data (points, lines and polygons) and raster data (heatmaps, images).

Carga en el mapa una capa de datos tanto vectoriales (puntos, líneas y polígonos) como ráster (mapas de calor, imágenes).

Invocation

createLayer(
	data,
	featureType,
	geometryType,
	symbologyType,
	symbologyProperties,
	layerVisibility,
	allowPicking,
	allowPopup,
	allowClustering,
	clusteringProperties
)

Input parameters

data

These are the data to be represented on the map. In the case of vector data, it will pick up a JSON object in FeatureCollection format, and in the case of raster data it will take an image.

featureType

It defines the type of element that will make up the layer. A layer can only consist of elements of the same type. This parameter will be specified as a text string, accepting the following options:

  1. entity: to create vector entities using the Cesium Entity API.
  2. primitive: to create vector entities using the Cesium Primitive API.
  3. tile3D: to load massive sets of geospatial data in 3D.
  4. raster: to load images, either heatmaps or images to be geo-referenced.


If you are interested in knowing the differences between the entities API and the primitives API, this post from the Google Group of Cesium explains it a bit.

geometryType

It specifies he type of geometry or raster class of the layer to be created. It also defines it as a text string, which can be one of these five options:

  1. point: for layers of points, either entities or primitives.
  2. lineString: for line layers, either entities or primitives.
  3. polygon: for layers of polygons, either entities or primitives.
  4. heatmap: for heatmap layers (generated from a point-type FeatureCollection).
  5. imagery: for layers of an image.

symbologyType

It defines the type of symbology with which the element will be represented on the map. It collects it as a text string, which will be one of the following options (not all options are valid for all types of elements):

  1. billboard: valid only for entities of type point; the symbology will be through an image in PNG, JPG or SVG format (preferred).
  2. billboardField: valid only for entities of type point; the symbology will be through an image in PNG, JPG or SVG format (preferred), extracted from a property of the FeatureCollection 'properties' object.
  3. color: valid for all vector elements; the symbology will be by a flat color.
  4. colorField: valid for all vector elements; the symbology will be by means of flat color, extracted its configuration of a property of the FeatureCollection 'properties' object '.
  5. model: valid only for point type primitives, and 3D Tiles; the symbology will be a 3D element, or a tileset.json.
  6. modelField: valid only for point-type primitives, and 3D Tiles; the symbology will be a 3D element, or a tileset.json, extracted its configuration from a property of the FeatureCollection 'properties' object.
  7. heatmap: valid only for point type entities as heatmap; a heatmap will be represented by interpolation from the point layer.
  8. heatmapField: valid only for point type entities such as heatmap; it will be represented from the point layer by interpolation, extracted its configuration of a property of the FeatureCollection 'properties' object .
  9. degrees: only for imagery; the image will be added as a layer on the map from a rectangle defined by the coordinates of its extension.

symbologyProperties

List with the layer's symbology properties. Its content will depend on the chose symbology type. Depending on the case, these properties will be:

  1. For billboard: it will take three parameters:
    1. billboardDefault: with the image of the icon to be used.
    2. billboardSelected: with the image of the icon to be used when the element is selected on the map, and selection is enabled. There is the option to automatically generate this icon from the default icon. To do this, enter the text string 'fromDefaultBillboard' in this parameter. This option is only valid if the Onesait SVG symbology scheme is used.
    3. billboardScale: numerical value with the scale of the icon to be used.
  2. For billboardField: it will pick up three parameters:
    1. billboardDefaultField: name of the property of the 'properties' object with the image of the icon to be used. For example, 'billboardDefault' would refer to 'properties.billboardDefault'.
    2. billboardSelectedField: property name of the 'properties' object with the image of the icon to be used when the element is selected on the map, and selection is enabled. For example, 'billboardSelected' would refer to 'properties.billboardSelected'. There is an option to automatically generate this icon from the default icon. To do this, enter the text string 'fromDefaultBillboard' in this parameter. This option is only valid if the Onesait SVG symbology scheme is used.
    3. billboardScaleField: name of the property of the 'properties' object with the numerical value with the scale of the icon to be used. For example, 'billboardScale' would refer to 'properties.billboardScale'.
  3. For point type color and geometry: it will use six parameters:
    1. pixelSize: numerical value with the point radius size.
    2. color: text string with the hexadecimal value of the dot's color, or its color name in CSS format. For example, '# FF0000' or 'red'.
    3. colorAlpha: numerical value of point color transparency, between 0.0 and 1.0.
    4. outlineWidth: optional parameter; if not included, it will use the default value 0. It is the numerical value with of point line perimeter thickness.
    5. outlineColor: optional parameter; text string with the point line perimeter's value of the hexadecimal color, or name of its color in CSS format. For example, '# 00FF00' or 'green'.
    6. outlineColorAlpha: optional parameter; numerical value of point line perimeter transparency, between 0.0 and 1.0.
    7. For line type color and geometry: it will take three parameters:
      1. width: numerical value with the line thickness.
      2. color: text string with the value of the line's hexadecimal color, or name of its color in CSS format. For example, '# FF0000' or 'red'.
      3. colorAlpha: numerical value of line color transparency, between 0.0 and 1.0.
  4. For polygon type color and geometry: it will take four parameters:
    1. color: text string with the value of the polygon's hexadecimal color, or name of its color in CSS format. For example, '# 000000' or 'white'.
    2. colorAlpha: numerical value of polygon's color transparency, between 0.0 and 1.0.
    3. outlineColor: optional parameter; text string with the value of the polygon's perimeter line's hexadecimal color, or name of its color in CSS format. For example, '# 00FF00' or 'green'.
    4. outlineColorAlpha: optional parameter; polygon's perimeter line's numerical transparency value, between 0.0 and 1.0.

      Polygons do not define the thickness of the outside line because this thickness depends on the rendering engine of the browser with which the viewer is displayed. With the exception of Safari, that processes correctly the thickness of the outside line, the rest of the browsers always render it with a size of 1 pixel, so the option to define the thickness of that line is omitted.

  5. For colorField: to be reviewed.
  6. For model: it will contain a single property, with the URL of the 3D model or tileset.json to be used.
  7. For modelField: it would contain a single property, with the name of the property of the 'properties' object containing the 3D model URL (not applicable for the tileset.json to use).
  8. For heatmap: it will have eight configuration parameters:
    1. weightValue: name of the property of the 'properties' object with the numerical value that will serve as weight in the interpolation of values. For example, 'weightValue' refers to 'properties.weightValue'.
    2. minIterationValue: minimum numerical value of weight to consider in interpolation.
    3. maxIterationValue: maximum numerical value of weight to consider in interpolation.
    4. searchRadius: numerical value with the search radius of the heatmap. The more separate the points are, the greater the range must be, and vice versa.
    5. minOpacity: numerical value of the minimum opacity of heatmap colors, between 0.0 and 1.0.
    6. maxOpacity: numerical value of the maximum opacity of heatmap colors, between 0.0 and 1.0.
    7. blur: numerical value of the blur effect of heatmap colors, between 0.0 and 1.0.
    8. gradientProperties: Object with the gradient of heatmap colors, between 0.0 and 1.0.
  9. For heatmapField: it will define the property name of the 'properties' object that would contain the list of previously defined heatmap properties. For example, 'heatmapProperties' refers to 'properties.heatmapProperties'.
  10. For imagery: list with the coordinates of the image rectangle container. The order of the coordinates will be: south, west, north, east.

layerVisibility

Optional parameter; if not included, it will take the default value 'showLayer'. Parameter defining whether the layer will be visible from the beginning, or it will be hidden. It receives a text string, which can be one of these two:

  1. showLayer: to show the layer.
  2. hideLayer: to hide the layer.

allowPicking

Optional parameter; if not included, it will take the default value 'enablePicking'. Parameter defining whether the layer will be selectable or not when clicked on it. It receives a text string, which can be one of two options:

  1. enablePicking: to allow the elements selection.
  2. disablePicking: to not allow the elements selection.

allowPopup

Optional parameter; if not included, it will take the default value 'disablePopup'. Parameter defining whether the layer will have a popup or not. If the option 'enablePicking' is not allowed, then the popup will not be shown even if this option is later enabled. It receives a text string, which can be one of two possibilities:

  1. enablePopup: to enable popup.
  2. disablePopup: to disable popup.

allowClustering

Optional parameter; if not included, it will take the default value 'disableClustering'. It only applies to point layers (whether they are entities or primitives), defining whether the layer will present clustering or not. It receives a text string with these two possibilities:

  1. enableClustering: to enable clustering.
  2. disableClustering: to disable clustering.

clusteringProperties

Optional parameter, required only if the allowClustering option is enabled. This parameter is a list with the clustering options, receiving five in total:

  1. clusterBillboard: image of the icon to be used for clustering.
  2. pixelRange: radius of point clustering generation. The higher the value, the smaller the distance between two points will be needed to be clustered.
  3. minimumClusterSize: number of points required for the clustering to be activated.
  4. clusterLabelLimit: limit number of clustered entities count. From that value, 'n +' will be displayed, where 'n' is the defined limit number.
  5. colorFromPoint:optional parameter; if this parameter is entered, the color of the clustering icon will automatically change to the background color of the icon or point of the clustering layer.

Use examples

Load a layer of entities of type point, with images as symbology, shown at the beginning, allowing to select these points showing another symbology, and with a popup that opens showing the information of the point:

createLayer(
	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_cctv_gray.svg','img/icon_cctv_color.svg', 0.8],
  	'showLayer',
  	'enablePicking',
  	'enablePopup'
)

Load a layer of entities of type point, with images as symbology, which are shown at the beginning, allowing to select these points showing another automatically generated symbology, without popup enabled, and with a generic gray cluster:

createLayer(
  	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_bench.svg','fromDefaultBillboard',0.8],
  	'showLayer',
  	'enablePicking',
  	'disablePopup',
  	'enableClustering',
 	['img/icon_cluster_gray.svg', 12, 2, 20, 'colorFromBillboard']
)

Load a layer of entities of type point, with color points as symbology, shown at the beginning, which allows to select these points showing a color change, with popup enabled, and with a cluster that automatically takes the point's background color.

createLayer(
  	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_bench.svg','fromDefaultBillboard',0.8],
  	'showLayer',
  	'enablePicking',
  	'enablePopup',
  	'enableClustering',
  	['img/icon_cluster_gray.svg', 12, 2, 20, 'colorFromBillboard']
)

Load a layer of line type entities, red in color and 2 pixels wide, visible from the beginning but not selectable (and therefore, without popup).

createLayer(
  multiLineas,
  'entity',
  'lineString',
  'color',
  [2, 'red', 0.8],
  'showLayer',
  'disablePicking'
)

Load a layer of polygon type, blue at 50% opacity, that is displayed at the beginning, is selectable, but does not open any popup.

createLayer(
  	oPolygon,
  	'entity',
  	'polygon',
  	'color',
  	['blue', 0.5],
  	'showLayer',
  	'enablePicking'
)

Load a layer of points as a heatmap, using as weight the value of the 'weightHeatMap' field, with an interpolation range of weights between 0 and 5, with a search radius of 650 pixels, with a transparency range between 0.2 and 0.6, blur effect of 0.99, and with a color ramp starting in pink for low value results, purple for intermediates, and dark blue for high values. Initially the layer will be visible:

createLayer(
  route_01_01_points_heatmap,
  'raster',
  'heatmap',
  'color',
  ['weightHeatMap',
    0,
    5,
    650,
	0.2,
	0.6,
	0.99,
	{
	  '.3': '#ff00ff',
	  '.6': '#6666ff',
	  '.9': '#000099'
	}
  ],
  'showLayer'
)

Load an image layer from a JPG file for defined coordinates:

createLayer(
  'img/imagen.jpg',
  'raster',
  'imagery',
  'degrees',
  ['-6.395277', '39.461247', '-6.360273', '39.488087'],
  'showLayer'
)