Skip to content

Define your maps once, render in multiple contexts

Notifications You must be signed in to change notification settings

idris-maps/karto

Repository files navigation

karto

Define your maps once and render to:

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

<line>

Attributes

<marker>

<circle>

<label>

<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)

About

Define your maps once, render in multiple contexts

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published