0.3.1 • Public • Published



<script type="importmap">
    "imports": {
      "ts-map": "https://unpkg.com/@topsail/ts-map"
<script type="module">
  import 'ts-map';
<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>

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.


  • 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.


  • 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.


  • 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:

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


npm i @topsail/ts-map

DownloadsWeekly Downloads






Unpacked Size

2.11 MB

Total Files


Last publish


  • topsail