Module: svgCoords

Members

(static, constant) namedTransOpts :object

This object contains some named objects that are in the correct format to be used as transOpts arguments to some of the functions in this module. Using one of these may save you generating one of your own. The main bounds element indicates the extent of the main map (in real world coordinates). The bounds of inset objects indicate the extent that is to be offset within the map image. The imageX and imageY values of an inset object indicates the position of the offset portion within the map in pixels. Positve x and y values offset the inset from the left and bottom of the image respecitvely. Negative x and y values offset the inset from the right and top of the image respectively. Each transOpts object also has a property called 'id' which must be set to the value used as a key to the object in the parent object. Each also has a property called 'caption' which has a name which can be displayed if offering users a choice between transformation objects.
  • namedTransOpts.BI1 is a bounding box, in EPSG:27700, for the British Ilses that includes the Channel Islands in their natural position.
  • namedTransOpts.BI2 is a bounding box, in EPSG:27700, for the British Isles, that doesn't extend as far south as the Channel Islands, but with an inset covering the Channel Isles, offset 25 pixels from the bottom left corner of the output.
  • namedTransOpts.BI3 is a bounding box, in EPSG:27700, for the British Isles, that doesn't extend as far north as the Northern Isles. An inset covering the Northern Isles, is offset 25 pixels from the top right corner of the output.
  • namedTransOpts.BI4 is a bounding box, in EPSG:27700, for the British Isles, that doesn't extend as far south as the Channel Islands or as far north as the Northern Isles. An inset covering the Channel Isles, is offset 25 pixels from the bottom left corner of the output. An inset covering the Northern Isles, is offset 25 pixels from the top right corner of the output.
Type:
  • object
Source:

Methods

(static) createTrans(transOpts, outputHeight) → {Object|Object|Array.<Object>|number|number|function|function}

Given a transform options object, describing a bounding rectangle in world coordinates, and a height dimension, this function returns an object that encapsulates the transformation options and provides additional transformation functionality and other information.
Parameters:
Name Type Description
transOpts module:svgCoords~transOpts The transformation options object.
outputHeight number The height, e.g. height in pixels, of an SVG element.
Source:
Returns:
  • transopts - The transformation object.
    Type
    Object
  • transopts.params - The transformation options object.
    Type
    Object
  • transopts.insetDims - An array of objects defining the position and size of insets.
    Type
    Array.<Object>
  • transopts.height - The height, e.g. height in pixels, of the SVG element.
    Type
    number
  • transopts.width - The width, e.g. width in pixels, of the SVG element.
    Type
    number
  • transopts.point - A function that will take a point object describing real world coordinates and return the SVG coordinates.
    Type
    function
  • transopts.d3Path - A function that will take a geoJson path in real world coordinates and return the SVG path.
    Type
    function

(static) getTweenTransOpts(from, to, outputHeight, tween) → {module:svgCoords~transOpts}

Given both 'from' and 'to' transform options objects, an output height and a 'tween' value between 0 and 1, this function returns a transform option object for which the map bounds, the inset bounds and the inset image position are all interpolated between the 'from' and 'to' objects at a position depending on the value of the tween value. Typically this would then be used to help generate a path transformation to use with D3 to animate transitions between different map transformations. Note that this only works with named transformation objects defined in this library.
Parameters:
Name Type Description
from module:svgCoords~transOpts The 'from' transformation options object.
to module:svgCoords~transOpts The 'to' transformation options object.
outputHeight number The height, e.g. height in pixels, of an SVG element.
tween number Between 0 and 1 indicating the interpolation position.
Source:
Returns:
- Intermediate transformation options object.
Type
module:svgCoords~transOpts

(inner) getInsetDims(transOpts, outputHeight) → {Array.<Object>}

Given a transform options object, describing a bounding rectangle in world coordinates, and a height dimension, this function returns an array of objects - one for each inset described in the transform object - that describe a set of rectangles corresponding to each of the insets. Each object has an origin corresponding to the top-left of the rectangle, a width and a height dimension. The dimensions and coordiates are relative to the height argument. A typical use of these metrics would be to draw an SVG rectagle around an inset.
Parameters:
Name Type Description
transOpts module:svgCoords~transOpts The transformation options object.
outputHeight number The height, e.g. height in pixels, of an SVG element.
Source:
Returns:
Type
Array.<Object>

(inner) transformFunction(transOpts, outputHeight) → {function}

Given a transform options object, describing a bounding rectangle in world coordinates, and a height dimension, this function returns a new function that will accept a point argument - normally describing real world coordinates - and returns a point that is transformed to be within the range 0 - outputHeight (for y) and 0 - outputWidth (for x). This function can be used as input to a d3.geoTransform to provide a transformation to d3.geoPath to draw an SVG path from a geojson file. The transOpts argument is an object which can also describe areas which should displaced in the output. This can be used for displaying islands in an inset, e.g. the Channel Islands.
Parameters:
Name Type Description
transOpts module:svgCoords~transOpts The transformation options object.
outputHeight number The height, e.g. height in pixels, of an SVG element.
Source:
Returns:
Type
function

(inner) widthFromHeight(transOpts, outputHeight) → {number}

Given a transform options object, describing a bounding rectangle in world coordinates, and a height dimension, this function returns a width dimension that respects the aspect ratio described by the bounding rectangle.
Parameters:
Name Type Description
transOpts module:svgCoords~transOpts The transformation options object.
outputHeight number The height, e.g. height in pixels, of an SVG element.
Source:
Returns:
Type
number

Type Definitions

transOpts

A 'transformation' options object simply defines the extents of the map, potentially with insets too.
Type:
  • Object
Properties:
Name Type Description
id string this must match the key by which the object is accessed through the parent object.
caption string a human readable name for this transformation options object.
bounds module:svgCoords~transOptsBounds an object defining the extents of the map.
insets Array.<module:svgCoords~transOptsInset> an array of objects defining the inset portions of the map.
Source:

transOptsBounds

an object defining the extents of the map, or portion of a mpa, in the projection system you want to use (either British Nation Gid, Irish National Grid or UTM 30 N for Channel Islands). properties on this element are xmin, ymin, xmax and ymax.
Type:
  • Object
Properties:
Name Type Description
xmin number the x value for the lower left corner.
ymin number the y value for the lower left corner.
xmax number the x value for the top right corner.
ymax number the y value for the top right corner.
Source:

transOptsInset

an object defining an inset for a map, i.e. part of a map which will be displayed in a different location to that in which it is actually found
Type:
  • Object
Properties:
Name Type Description
bounds module:svgCoords~transOptsBounds an object defining the extents of the inset.
imageX number a value defining where the inset will be displayed (displaced) on the SVG. If the number is positive it represents the number of pixels the left boundary of the inset will be positioned from the left margin of the SVG. If it is negative, it represents the number of pixels the right boundary of the inset will be positioned from the right boundary of the SVG.
imageY number a value defining where the inset will be displayed (displaced) on the SVG. If the number is positive it represents the number of pixels the botton boundary of the inset will be positioned from the bottom margin of the SVG. If it is negative, it represents the number of pixels the top boundary of the inset will be positioned from the top boundary of the SVG.
Source:

transOptsSel

Type:
  • Object
Properties:
Name Type Description
key string there must be at least one, but potentially more, properties on this object, each describing a map 'transformation'.
Source: