Mapspace API Reference

Namespace: html

Mapspace. html

This namespace contains objects and function helpers to ease HTML modifications and SVG icon creation.

Source:: mapspace/bu.jsdoc

Methods

<static> addRemoveClasses(element, addList, removeList)

Adds and removes classes from a DOM element at the same time.

Parameters:

Name	Type	Description
`element`	HTMLElement	The DOM element.
`addList`	Array.<string> \| undefined	List of classes to add.
`removeList`	Array.<string> \| undefined	List of classes to remove.

Source:: mapspace/html.js

<static> composeCanvases(context, canvases, positions, height)

Composes several canvases inside another one.

Parameters:

Name	Type	Description
`context`	CanvasRenderingContext2D	Output canvas.
`canvases`	Array.<HTMLCanvasElement>	Array of canvases to compose on top of the output canvas.
`positions`	Array.<Array>	Array of positions, where each positions is an array with three values: dx, dy, and a 'bottom' modifier.
`height`	number	Height in pixels.

Source:: mapspace/html.js

<static> createElement(parent, elName, attNames, attValues, html)

Creates and returns a HTML element and populates its attributes. Optionally it appends result to a given node.

Parameters:

Name	Type	Description
`parent`	HTMLElement \| undefined	Parent to append to if any.
`elName`	string	Element name.
`attNames`	string \| Array.<string> \| undefined	Attribute names. It can be only one (then attValues must be only one or no attributes will be added), or an array (then attValues length must match or no attributes will be added). If undefined or attValues undefined then no attributes will be added.
`attValues`	string \| Array.<string> \| undefined	Attribute values.
`html`	string \| undefined	HTML content if any.

Source:: mapspace/html.js

Returns:

Type: HTMLElement

<static> escape(str)

Escapes special html chars.

Parameters:

Name	Type	Description
`str`	string	String to escape.

Source:: mapspace/html.js

Returns:

Type: string

<static> fixElementSize(element, size, isIcon, classSmall, classLarge)

Fixes the classes of a DOM element to reflect the given size style.

Parameters:

Name	Type	Description
`element`	HTMLElement	The DOM element.
`size`	Mapspace.control.SizeStyle	Size style.
`isIcon`	boolean	If the classes are for an icon or not. If isIcon is true and classSmall and classLarge are undefined then the fix is done for Material Design icons (classes 'mdi-sm' and 'mdi-lg') and for FontAwesome (classes 'fa-sm' and 'fa-lg').
`classSmall`	string \| undefined	The only class name that should be present if the size is `Mapspace.control.SizeStyle.SMALL`.
`classLarge`	string	The only class name that should be present if the size is `Mapspace.control.SizeStyle.LARGE`.

Source:: mapspace/html.js

<static> format(html, obj)

Formats an HTML string with object values and escapes HTML chars. Each key in object can be referenced in the template using {key_name}. Example: format('{street}', {street: 'Main St.'}) returns: '<span>Main St.</span>'

Parameters:

Name	Type	Description
`html`	string	Template to use.
`obj`	Object	Object wih data.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatArea(area, units)

Returns a HTML fragment for a given area measurement.

Parameters:

Name	Type	Argument	Description
`area`	number		The area in squared meters.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatArea3D(area, units)

Returns a HTML fragment for a given area measurement (3D viewers).

Parameters:

Name	Type	Argument	Description
`area`	number		The area.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatBearing(bearing)

Returns a HTML fragment for a given bearing measurement.

Parameters:

Name	Type	Description
`bearing`	number	The bearing.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatCopyright(companyName, date, href)

Return a HTML fragment with the copyright for the given company name.

Parameters:

Name	Type	Argument	Description
`companyName`	string		The company name.
`date`	string	<nullable>	An optional date.
`href`	string	<nullable>	An optional link to company website. Not needed for Blom or Terratec.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatElevation(elevation, units)

Returns a HTML fragment for a given elevation measurement.

Parameters:

Name	Type	Argument	Description
`elevation`	number		The elevation.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatElevation3D(elevation, units)

Returns a HTML fragment for a given elevation measurement (3D viewers).

Parameters:

Name	Type	Argument	Description
`elevation`	number		The elevation in meters.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatFeature(feature)

Returns an HTML fragment with the properties of a feature.

Parameters:

Name	Type	Description
`feature`	ol.Feature	Feature.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatField(field, value)

Returns a HTML fragment for a given field and value.

Parameters:

Name	Type	Description
`field`	string	The field.
`value`	string	The value.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatLength(lenght, units)

Returns a HTML fragment for a given length measurement.

Parameters:

Name	Type	Argument	Description
`lenght`	number		The length.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatLength3D(lenght, units)

Returns a HTML fragment for a given length measurement (3D viewers).

Parameters:

Name	Type	Argument	Description
`lenght`	number		The length.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatLocation(lonlat, projected, projection)

Formats a geocoding location in HTML.

Parameters:

Name	Type	Description
`lonlat`	Mapspace.Coordinate \| undefined	Geocoding location in EPSG:4326.
`projected`	Mapspace.Coordinate \| undefined	Geocoding location in other projection.
`projection`	string \| undefined	EPSG projection code for the projected coordinates.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatPoint(point [, projectionUnits])

Returns an HTML fragment for the label in 2D viewers of a given point.

Parameters:

Name	Type	Argument	Description
`point`	Mapspace.Coordinate		Point coordinates.
`projectionUnits`	ol.proj.Units	<optional>	Optional projection units. Default is degrees.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatPoint3D(point [, projectionUnits])

Returns an HTML fragment for the label in 3D viewers of a given point.

Parameters:

Name	Type	Argument	Description
`point`	Mapspace.Coordinate		Point coordinates.
`projectionUnits`	ol.proj.Units	<optional>	Optional projection units. Default is degrees.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatPointStreet(point [, projectionUnits])

Returns an HTML fragment for the label in Street viewers of a given point.

Parameters:

Name	Type	Argument	Description
`point`	Mapspace.Coordinate		Point coordinates.
`projectionUnits`	ol.proj.Units	<optional>	Optional projection units. Default is degrees.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatProfileName(viewer)

Formats an HTML string with the name of a Profile in a Profile3D viewer.

Parameters:

Name	Type	Description
`viewer`	Mapspace.profile3d.Viewer	Profile3D viewer.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatSegmentLength(lenght, dhorz, dvert, units)

Returns a HTML fragment for a given segment length measurement.

Parameters:

Name	Type	Argument	Description
`lenght`	number		The length.
`dhorz`	number		The horizontal length.
`dvert`	number		THe vertical length.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> formatSegmentLength3D(lenght, dhorz, dvert, units)

Returns a HTML fragment for a given segment length measurement (3D viewers).

Parameters:

Name	Type	Argument	Description
`lenght`	number		The length.
`dhorz`	number		The horizontal length.
`dvert`	number		THe vertical length.
`units`	ol.proj.Units	<nullable>	Optional units. By default is meters.

Source:: mapspace/html.js

Returns:

Type: string

<static> getFeatureStyleIcon(layer, feature)

Returns the SVG string to show as icon for the style of the given feature.

Parameters:

Name	Type	Description
`layer`	Mapspace.layer.Vector	The layer that the feature belongs to.
`feature`	ol.Feature	The feature.

Source:: mapspace/html.js

Returns:

Type: string

<static> getGeometryIcon(geometry)

Returns the SVG string to show as icon for the geometry.

Parameters:

Name	Type	Description
`geometry`	ol.geom.Geometry	The geometry.

Source:: mapspace/html.js

Returns:

Type: string

<static> getIcon(iconName, fill, stroke, strokeWidth)

Returns the HTML string fragment with an SVG icon.

Parameters:

Name	Type	Argument	Description
`iconName`	string		Icon name (case insensitive). Valid names are always any name available as a key in `Mapspace.html.icons` enum. Names are case insensitive.For example, for an Add icon use 'ADD', 'add', or any other case.
`fill`	string	<nullable>	An optional color for a fill property.
`stroke`	string	<nullable>	An optional color for a stroke property.
`strokeWidth`	number	<nullable>	An optional width for stroke. Requires a stroke color.

Source:: mapspace/html.js

Returns:

The HTML string or an empty string if the icon name was not found.

Type: string

<static> getLayerIcon(layer)

Returns the SVG string to show as icon for a layer.

Parameters:

Name	Type	Description
`layer`	ol.layer.Base	Layer.

Source:: mapspace/html.js

Returns:

Type: string

<static> getRuleIcon(style [, usePointStyle])

Returns the SVG string to show as icon for a style rule.

Parameters:

Name	Type	Argument	Description
`style`	ol.style.Style		Style.
`usePointStyle`	boolean	<optional>	If return an icon using the point icon type or use a default box. By default is false and returns a box.

Source:: mapspace/html.js

Returns:

Type: string

<static> getStyleCollectionIcon(styleCol)

Returns the SVG string to show as icon for a Mapspace.StyleCollection.

Parameters:

Name	Type	Description
`styleCol`	Mapspace.StyleCollection	Style collection.

Source:: mapspace/html.js

Returns:

Type: string

<static> isElement(obj)

Returns true if the element is an HTML element.

Parameters:

Name	Type	Description
`obj`	Object	Object to check.

Source:: mapspace/html.js

Returns:

True if object is an element.

Type: boolean

<static> rampColorToLinearGradient(rampColor)

Returns the CSS linear-gradient representation of the given ramp color, as they are defined in Mapspace.RampColors.

Parameters:

Name	Type	Description
`rampColor`	Object	Ramp color.

Source:: mapspace/html.js

Returns:

Type: string

<static> removeChilds(elements)

Removes elements from DOM.

Parameters:

Name	Type	Description
`elements`	Array.<Element>	Element array.

Source:: mapspace/html.js

<static> removeTags(html)

Removes tags in the HTML string. For example Hello is returned as Hello.

Parameters:

Name	Type	Description
`html`	string	HTML string.

Source:: mapspace/html.js

Returns:

Type: string

<static> toCanvas(html [, font] [, fontSize] [, fontColor] [, backgroundColor] [, outlineColor] [, outlineWidth] [, spacing] [, padding])

Returns a canvas object from a HTML fragment. Current HTML tags supported are only one or several

with text inside and optionally with tags for styling in bold font. Each content inside a

tag will be rendered in a new line.

For example, a valid HTML fragment could be like this:

Date & time: 2020-12-16

Measurement: 123.15 m

Parameters:

Name Type Argument Description

html string
HTML fragment.

font string <optional>

Optional name of the font. Defaults to Arial.

fontSize number <optional>

Optional size of the font in pixels. Defaults to 12.

fontColor string <optional>

Optional color for the font. Defaults to 'rgba(0,0,0,1)'.

backgroundColor boolean | string <optional>

Optional color for a background. If it is false then no background is rendered. If it is a string then it will be the background color. Defaults to 'rgba(255,255,255,1)'.

outlineColor boolean | string <optional>

Optional color for an outline. If it is false then no outline is rendered. If it is a string then it will be the outline color. Defaults to 'rgba(0,0,0,1)'.

outlineWidth number <optional>

Optional outline width. If outlineColor is false this is ignored. If outlineColor is set and this is not provided default value 1 is used.

spacing number <optional>

Optional spacing between lines. Defaults to 2 pixels.

padding number <optional>

Optional padding between outline and text. Defaults to 5 pixels.

Source:

mapspace/html.js

Returns:

Canvas.

Type

HTMLCanvasElement

Name	Type	Argument	Description
`html`	string		HTML fragment.
`font`	string	<optional>	Optional name of the font. Defaults to Arial.
`fontSize`	number	<optional>	Optional size of the font in pixels. Defaults to 12.
`fontColor`	string	<optional>	Optional color for the font. Defaults to 'rgba(0,0,0,1)'.
`backgroundColor`	boolean \| string	<optional>	Optional color for a background. If it is false then no background is rendered. If it is a string then it will be the background color. Defaults to 'rgba(255,255,255,1)'.
`outlineColor`	boolean \| string	<optional>	Optional color for an outline. If it is false then no outline is rendered. If it is a string then it will be the outline color. Defaults to 'rgba(0,0,0,1)'.
`outlineWidth`	number	<optional>	Optional outline width. If outlineColor is false this is ignored. If outlineColor is set and this is not provided default value 1 is used.
`spacing`	number	<optional>	Optional spacing between lines. Defaults to 2 pixels.
`padding`	number	<optional>	Optional padding between outline and text. Defaults to 5 pixels.

<static> toggleClass(element, className, condition)

Toggles className from a DOM element. If condition is true then className is added, if is false then is removed.

Parameters:

Name Type Description

element HTMLElement
The DOM element.

className string
The class name.

condition boolean
The condition.

Source:

mapspace/html.js