<ts-map>

Usage

<script type="importmap">
  {
    "imports": {
      "ts-map": "https://unpkg.com/@topsail/ts-map"
    }
  }
</script>
<script type="module">
  import 'ts-map';
</script>
<link rel="stylesheet" href="https://unpkg.com/@topsail/ts-map/ts-map.css"/>

<ts-map apikey="YOUR_ESRI_API_KEY" lat="38.8977" lng="-77.0365">
  <ts-map-marker lat="38.8977" lng="-77.0365" title="The White House"></ts-map-marker>
</ts-map>

You can also pin a specific version be specifying @topsail/ts-map@VERSION_NUMBER/ in the imports and stylesheet hrefs.

HTML attributes and Leaflt Options

Many elements pass options from HTML attributes to Leaflet options. We use dashes to map CamelSpelling, and double-dashes to indicate nested properties. For instance the HTML attribute icon--class-name="red" will translate to {icon: {className: "red"}}

<ts-map>

This displays a map and must be the ancestor element of any other <ts-map-*> elements.

Attributes:

• apikey, (required) alternatively you can set JavaScript constant TS_MAP_APIKEY
• lat, lng, required unless north, south, west, east are provided
• north, south, west, east, required unless lat, lng are provided
• zoom, (optional)
• maxzoom, (optional)
• basemapname, (optional) defaults to "OSM:Standard"

<ts-map-marker>

This puts a marker on a map. This DOM element must be a child of <ts-map> or <ts-map-group>. Any inner HTML of <ts-map-marker> will serve as the popup content when clicking on the marker.

Attributes:

• lat, lng
• popup-url, (optional) if present the inner HTML is being ignored and the popup text is retrieved from this url
• icon--*, (optional) if present, how to render the marker icon. Any option for Leaflet DivIcon can be provided

<ts-map-group>

Creates a group of features on the map. All child elements can be shown/hidden together via a checkbox in the map control.

Attributes:

• label, the name to use to identify this group in the control
• selected, if present and not "false", show the grouped features initially; by default don't show them initially

<ts-map-circle>

Draws a circle on the map. It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion). You can style the resulting SVG circle using CSS (e.g. give it a "class-name" attribute and define CSS rules for that). Attributes:

• lat
• lng
• radius (in meters)
• any option described at https://leafletjs.com/reference.

Local Demo with web-dev-server

• add your ESRI API key to demo/index.html line #14

• Run local development server, which will serve demo/index.html

  npm start

Interactive Publishing to NPM

• bump version in package.json

•   npm login
    npm run deploy