karto
Define your maps once and render to:
Usage
npm install karto
Define the map
const map = karto` <map> <polygon geometry= fill="blue" stroke="lightblue" /> <line geometry= stroke="red" strokeWidth= strokeDasharray= /> </map>`
karto
is a tagged template. Use an xml-like syntax to describe your map.
Elements
<map>
<map>
must be the parent element.
Attributes
projection
is ad3-geo
GeoProjection
. Defaults to ageoMercator
projection that fits all geometrieswidth
is anumber
. Defaults to1000
height
is anumber
. Defaults to500
backgroundColor
is an HTML color. Defaults toundefined
<polygon>
Attributes
geometry
is a GeoJSON geometry of typePolygon
orMultiPolygon
. REQUIRED- all stroke attributes
- all fill attributes
<line>
Attributes
geometry
is a GeoJSON geometry of typeLineString
orMultiLineString
. REQUIRED- all stroke attributes
<marker>
geometry
is a GeoJSON geometry of typePoint
orMultiPoint
. REQUIRED- all stroke attributes
- all fill attributes
<circle>
geometry
is a GeoJSON geometry of typePoint
orMultiPoint
. REQUIREDr
is anumber
. It is the radius of the circle. REQUIRED- all stroke attributes
- all fill attributes
<label>
geometry
is a GeoJSON geometry of typePoint
orMultiPoint
. REQUIREDtext
is astring
. The content of the label. REQUIREDtranslate
is an array of twonumber
s.- all stroke attributes
- all fill attributes
- all text attributes
<tiles>
url
is astring
, the url to the tile server. REQUIREDattribution
is astring
, the copyright for the tiles. REQUIREDext
is astring
, the file extension if applicablesubdomains
is astring
, the server subdomains if applicable
Look at Leaflet providers for an idea of how this works.
Style attributes
All elements have an opacity
attribute. It is a number
between 0 and 1.
Fill attributes
fill
is an HTML color. Defaults toblack
fillOpacity
is anumber
between 0 and 1
Stroke attributes
stroke
is an HTML color. Defaults toundefined
strokeWidth
is anumber
. Defaults to1
strokeLinejoin
is astring
. Options:arcs
|bevel
|miter
|miter-clip
|round
strokeDasharray
is an array ofnumber
sstrokeDashoffset
is anumber
strokeLinecap
is astring
. Options:butt
|round
|square
strokeOpacity
is anumber
between 0 and 1
Text attributes
fontFamily
is astring
fontSize
is anumber
textAnchor
is astring
. Options:start
|middle
|end
Render the map
renderSvgString
Takes one argument, the map definition.
const map = karto` // your map definition`
renderToCanvas
Takes two arguments:
- The
id
of an existing<div>
to which the canvas will be added - The map definition
const map = karto` // your map definition`
renderToLeaflet
Takes two arguments:
- The
id
of an existing<div>
to which the map will be added - The map definition
const map = karto` // your map definition`