@topsail/ts-map NPM

\

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"}}

\

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"

\

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

\

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

\

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: