<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 constantTS_MAP_APIKEY
-
lat
,lng
, required unlessnorth
,south
,west
,east
are provided -
north
,south
,west
,east
, required unlesslat
,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.
web-dev-server
Local Demo with -
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