@jetblack/map

Component Interfaces

• ImageTileProps
• MapProps
• MarkerProps

Context Interfaces

• MapContextProps

Other Interfaces

• Bounds
• Coordinate
• CoordinateBounds
• OverlayLayerProps
• PinProps
• PopupProps
• SVGPinProps
• ScaleInfo
• Size
• TileProvider
• ZoomButtonPops
• useClickProps
• useDragProps
• useZoomProps

Component Variables

• Map

Context Variables

• MapContext

Other Variables

• CLASS_NAMES

Tile Provider Variables

• osmTileProvider

Component Functions

• AttributionLayer
• ImageTile
• Marker
• OverlayLayer
• Pin
• Popup
• SVGPin
• ZoomButton

Other Functions

• calcScaleInfo
• calcWorldBounds
• coordinateToTilePoint
• isCoordinateInWorldBounds
• isInWorldBounds
• limitCoordinate
• recenterScreenPoint
• screenPointToCoordinate
• screenToTilePoint
• tilePointToCoordinate
• useClick
• useDrag
• useZoom

Tile Provider Functions

• stamenTileProviderFactory

Type Aliases

Point

Ƭ Point: Object

A point in the Cartesian coordinate system.

Type declaration

Name	Type	Description
x	number	A point on the horizontal axis.
y	number	A point on the vertical axis

Defined in

types.ts:22

Component Variables

Map

• Const Map: ForwardRefExoticComponent<MapProps & RefAttributes<HTMLDivElement>>

Render a map.

param The props.

returns A map.

Defined in

components/Map.tsx:52

---

Context Variables

MapContext

• Const MapContext: Context<MapContextProps>

The map context.

Defined in

components/MapContext.ts:30

---

Other Variables

CLASS_NAMES

• Const CLASS_NAMES: Object

Type declaration

Name	Type
clickable	string
draggable	string
primary	string
zoomable	string

Defined in

constants.ts:56

---

Tile Provider Variables

osmTileProvider

• Const osmTileProvider: TileProvider

A tile provider for Open Street Map.

Defined in

components/TileProviders.tsx:8

Component Functions

AttributionLayer

▸ AttributionLayer(): Element

Render the attribution layer.

Returns

Element

Defined in

components/AttributionLayer.tsx:15

---

ImageTile

▸ ImageTile(props): Element

Render an image tile.

internal

Parameters

Name	Type	Description
props	ImageTileProps	The props.

Returns

Element

An image tile.

Defined in

components/ImageTile.tsx:41

---

Marker

▸ Marker(props): Element

Render a marker component.

Parameters

Name	Type	Description
props	MarkerProps	The props.

Returns

Element

A map.

Defined in

components/Marker.tsx:37

---

OverlayLayer

▸ OverlayLayer(props): Element

Render an overlay layer.

Parameters

Name	Type	Description
props	OverlayLayerProps	The props.

Returns

Element

A map.

Defined in

components/OverlayLayer.tsx:33

---

Pin

▸ Pin<T>(props): Element

Render a pin.

Type parameters

Name	Type
T	unknown

Parameters

Name	Type	Description
props	PinProps<T>	The props.

Returns

Element

A pin at the point.

Defined in

components/Pin.tsx:49

---

Popup

▸ Popup(props): Element

Render a popup.

The popup will attempt to stay inside the map space by checking if the point is in the left/right and top/bottom of the screen and positioning the containing div appropriately.

Parameters

Name	Type	Description
props	PopupProps	The props.

Returns

Element

A popup near the point.

Defined in

components/Popup.tsx:35

---

SVGPin

▸ SVGPin(props): Element

Render an SVG pin.

Parameters

Name	Type	Description
props	SVGPinProps	The props.

Returns

Element

A map.

Defined in

components/SVGPin.tsx:37

---

ZoomButton

▸ ZoomButton(props): Element

Render a zoom button.

Parameters

Name	Type	Description
props	ZoomButtonPops	The props.

Returns

Element

A map.

Defined in

components/ZoomButton.tsx:43

---

Other Functions

calcScaleInfo

▸ calcScaleInfo(zoom, screenSize): ScaleInfo

Calculate scale factors.

The tiles are provide at discrete zoom levels starting at 0 where a single tile represents the world.

To provide smooth scrolling the width and height of the image tiles can be scaled.

Parameters

Name	Type	Description
zoom	number	The zoom level
screenSize	Size	The screen size

Returns

ScaleInfo

An object containing the rounded zoom, the scale, the scale width and height.

Defined in

tileMath.ts:88

---

calcWorldBounds

▸ calcWorldBounds(center, zoom, bounds, tileSize): CoordinateBounds

Return the bounds of the view area in the world coordinate system.

Parameters

Name	Type	Description
center	Coordinate	The center of the map in world coordinates.
zoom	number	The zoom level.
bounds	Bounds	The bounds of the view area in the screen coordinate system.
tileSize	Size	The size of a tile

Returns

CoordinateBounds

The bounds of the view area in the world coordinate system.

Defined in

tileMath.ts:272

---

coordinateToTilePoint

▸ coordinateToTilePoint(coordinate, zoom): Point

Convert a latitude and longitude to an x and y point in the tile coordinate system.

Parameters

Name	Type	Description
coordinate	Coordinate	The coordinate from which to calculate a tile point
zoom	number	The zoom level

Returns

Point

The point in the tile coordinate system

Defined in

tileMath.ts:60

---

isCoordinateInWorldBounds

▸ isCoordinateInWorldBounds(coordinate, worldBounds): boolean

Determine if a coordinate is inside the viewable area given in the world coordinate system.

Parameters

Name	Type	Description
coordinate	Coordinate	The coordinate in the world coordinate system.
worldBounds	CoordinateBounds	The bounds of the viewable area in the world coordinate system.

Returns

boolean

True if the coordinate was within the bounds; otherwise false.

Defined in

tileMath.ts:321

---

isInWorldBounds

▸ isInWorldBounds(latitude, longitude, bounds): boolean

Determine if a coordinate is inside the viewable area given in the world coordinate system.

Parameters

Name	Type	Description
latitude	number	The latitude.
longitude	number	The longitude.
bounds	CoordinateBounds	The bounds of the viewable area in the world coordinate system.

Returns

boolean

True if the coordinate was within the bounds; otherwise false.

Defined in

tileMath.ts:300

---

limitCoordinate

▸ limitCoordinate(coordinate, min?, max?): Coordinate

Limit a coordinate in the world coordinate system to be within the bounds of a minimum and maximum coordinate.

Parameters

Name	Type	Default value	Description
coordinate	Coordinate	undefined	The coordinate to limit.
min	Coordinate	LOCATIONS.southWest	The minimum allowed value.
max	Coordinate	LOCATIONS.northEast	The maximum allowed value in the world coordinate system.

Returns

Coordinate

The value, limited by the minimum and maximum values.

Defined in

tileMath.ts:337

---

recenterScreenPoint

▸ recenterScreenPoint(coordinate, center, zoom, screenSize, tileSize): Point

Convert a longitude and latitude to an x and y in the screen coordinate system.

Parameters

Name	Type	Description
coordinate	Coordinate	The longitude and latitude of the point
center	Coordinate	The longitude and latitude of the center of the screen
zoom	number	The zoom level
screenSize	Size	The size of the screen
tileSize	Size	The size of the tiles

Returns

Point

The x and y coordinates of the point in th screen coordinate system

Defined in

tileMath.ts:198

---

screenPointToCoordinate

▸ screenPointToCoordinate(screenPoint, center, zoom, screenSize, tileSize, wrapLongitude?): Coordinate

Convert a screen point to a longitude and latitude.

Parameters

Name	Type	Default value	Description
screenPoint	Point	undefined	The point in the screen coordinate system
center	Coordinate	undefined	The latitude and longitude of the center of the screen
zoom	number	undefined	The zoom level
screenSize	Size	undefined	The size of the screen
tileSize	Size	undefined	The size of the tiles
wrapLongitude	boolean	true	-

Returns

Coordinate

The longitude and latitude of the screen point

Defined in

tileMath.ts:147

---

screenToTilePoint

▸ screenToTilePoint(screenPoint, tileSize): Point

Convert a point in the screen coordinate system to a point in the tile coordinate system.

Parameters

Name	Type	Description
screenPoint	Point	A point in the screen coordinate system.
tileSize	Size	The tile size.

Returns

Point

The point in the tile coordinate system.

Defined in

tileMath.ts:115

---

tilePointToCoordinate

▸ tilePointToCoordinate(tilePoint, zoom): Coordinate

Convert an x and y point to a longitude and latitude coordinate.

Parameters

Name	Type	Description
tilePoint	Point	The x and y point in the tile coordinate system.
zoom	number	The zoom level

Returns

Coordinate

The coordinate as a latitude and longitude

Defined in

tileMath.ts:72

---

useClick

▸ useClick(__namedParameters): void

The useClick hook.

Parameters

Name	Type
__namedParameters	useClickProps

Returns

void

Defined in

hooks/useClick.ts:36

---

useDrag

▸ useDrag(__namedParameters): [Coordinate, (center: Coordinate) => void]

A hook for mouse events.

Parameters

Name	Type
__namedParameters	useDragProps

Returns

[Coordinate, (center: Coordinate) => void]

Defined in

hooks/useDrag.ts:31

---

useZoom

▸ useZoom(__namedParameters): [number, (zoom: number) => void]

A hook to integrate the zoom wheel with a map.

Parameters

Name	Type
__namedParameters	useZoomProps

Returns

[number, (zoom: number) => void]

Defined in

hooks/useZoom.ts:26

---

Tile Provider Functions

stamenTileProviderFactory

▸ stamenTileProviderFactory(map): TileProvider

A tile provider factory for Stamen.

Parameters

Name	Type	Description
map	"toner" | "terrain"	The map to use

Returns

TileProvider

A tile provider for the requested Stamen map

Defined in

components/TileProviders.tsx:43