karto

Define your maps once and render to:

• an <svg> string - Example
• an HTML <canvas> - Example
• a leaflet map - Example

Usage

npm install karto

Define the map

import karto from 'karto'
import polygonGeometry from './polygon.json'
import lineGeometry from './line.json'
 
const map = karto`
  <map>
    <polygon geometry=${polygonGeometry} fill="blue" stroke="lightblue" />
    <line geometry=${lineGeometry} stroke="red" strokeWidth=${3} strokeDasharray=${[10, 2]} />
  </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 a d3-geo GeoProjection. Defaults to a geoMercator projection that fits all geometries
• width is a number. Defaults to 1000
• height is a number. Defaults to 500
• backgroundColor is an HTML color. Defaults to undefined

<polygon>

Attributes

• geometry is a GeoJSON geometry of type Polygon or MultiPolygon. REQUIRED
• all stroke attributes
• all fill attributes

<line>

Attributes

• geometry is a GeoJSON geometry of type LineString or MultiLineString. REQUIRED
• all stroke attributes

<marker>

• geometry is a GeoJSON geometry of type Point or MultiPoint. REQUIRED
• all stroke attributes
• all fill attributes

<circle>

• geometry is a GeoJSON geometry of type Point or MultiPoint. REQUIRED
• r is a number. It is the radius of the circle. REQUIRED
• all stroke attributes
• all fill attributes

<label>

• geometry is a GeoJSON geometry of type Point or MultiPoint. REQUIRED
• text is a string. The content of the label. REQUIRED
• translate is an array of two numbers.
• all stroke attributes
• all fill attributes
• all text attributes

<tiles>

• url is a string, the url to the tile server. REQUIRED
• attribution is a string, the copyright for the tiles. REQUIRED
• ext is a string, the file extension if applicable
• subdomains is a string, 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 to black
• fillOpacity is a number between 0 and 1

Stroke attributes

• stroke is an HTML color. Defaults to undefined
• strokeWidth is a number. Defaults to 1
• strokeLinejoin is a string. Options: arcs | bevel | miter | miter-clip | round
• strokeDasharray is an array of numbers
• strokeDashoffset is a number
• strokeLinecap is a string. Options: butt | round | square
• strokeOpacity is a number between 0 and 1

Text attributes

• fontFamily is a string
• fontSize is a number
• textAnchor is a string. Options: start | middle | end

Render the map

renderSvgString

Takes one argument, the map definition.

import karto, { renderSvgString } from 'karto'
 
const map = karto`
  // your map definition
`
 
renderSvgString(map)
  .then(console.log)

renderToCanvas

Takes two arguments:

• The id of an existing <div> to which the canvas will be added
• The map definition

import karto from 'karto'
import renderToCanvas from 'karto/dist/renderers/canvas'
 
const map = karto`
  // your map definition
`
 
renderToCanvas('divId', map)

renderToLeaflet

Takes two arguments:

• The id of an existing <div> to which the map will be added
• The map definition

import karto from 'karto'
import renderToLeaflet from 'karto/dist/renderers/leaflet'
 
const map = karto`
  // your map definition
`
 
renderToLeaflet('divId', map)