0.3.1 • Published 3 years ago

@topsail/ts-map v0.3.1

Weekly downloads
-
License
MIT
Repository
bitbucket
Last release
3 years ago

\

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:

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
0.3.1

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.1.0

3 years ago

0.3.0

3 years ago

0.2.1

3 years ago

0.1.2

3 years ago

0.2.0

3 years ago

0.1.1

3 years ago

0.2.2

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago