npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

esri-leaflet-vector

v4.2.5

Published

Esri vector basemap and vector tile layer plugin for Leaflet.

Downloads

64,868

Readme

Esri Leaflet Vector Tile Plugin

npm version apache licensed

A plugin for Esri Leaflet to visualize Vector tiles from ArcGIS Online.

Example

Take a look at the live demo.

Example Image

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Vector Basemap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Esri Leaflet and Esri Leaflet Vector -->
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@4/dist/esri-leaflet-vector.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var map = L.map("map").setView([40.706, -73.926], 14);

      L.esri.Vector.vectorBasemapLayer("ArcGIS:Streets", {
        apikey: "< YOUR VALID API KEY HERE >"
      }).addTo(map);
    </script>
  </body>

</html>

API Reference

L.esri.Vector.vectorBasemapLayer

For rendering basemap layers which use the Esri Basemap Styles API internally. Extends L.Layer.

// example using an Esri Basemap Styles API name
L.esri.Vector.vectorBasemapLayer("ArcGIS:Streets", {
  // provide either `apikey` or `token`
  apikey: "...",
  token: "..."
}).addTo(map);
// example using an ITEM_ID
L.esri.Vector.vectorBasemapLayer("ITEM_ID", {
  // provide either `apikey` or `token`
  apikey: "...",
  token: "..."
}).addTo(map);

Basemap Names

Please see the documentation for a list of basemap names you can use (ArcGIS:Streets, ArcGIS:DarkGray, ArcGIS:Imagery:Standard, OSM:Standard, etc).

L.esri.Vector.vectorTileLayer

For custom vector tiles layers published from user data. Extends L.Layer.

:warning: This only supports services using the Web Mercator projection because it relies directly upon maplibre-gl-js. Otherwise, the layer is not guaranteed to display properly. More information is available at Maplibre custom coordinate system.

// example using an ITEM_ID
L.esri.Vector.vectorTileLayer("ITEM_ID", {
  // optional: provide either `apikey` or `token` if not public
  apikey: "...",
  token: "...",

  // optional: if your layer is not hosted on ArcGIS Online,
  // change `portalUrl` to the ArcGIS Enterprise base url
  // (this is necessary when specifying an ITEM_ID)
  portalUrl: "https://www.arcgis.com", // default value
  
  // optional: customize the style with a function that gets the default style from the service
  // and returns the new style to be used
  style: (style) => {
    return newStyle;
  }
}).addTo(map);
// example using a VectorTileServer SERVICE_URL
L.esri.Vector.vectorTileLayer("SERVICE_URL", {
  // optional: provide either `apikey` or `token` if not public
  apikey: "...",
  token: "...",

  // optional: if your layer is not hosted on ArcGIS Online,
  // change `portalUrl` to the ArcGIS Enterprise base url
  // (this may not be necessary when specifying a SERVICE_URL)
  portalUrl: "https://www.arcgis.com", // default value
  
  // optional: set by default to `false` for performance reasons
  // set to `true` to resolve WebGL printing issues in Firefox
  preserveDrawingBuffer: false, // default value
  
  // optional: customize the style with a function that gets the default style from the service
  // and returns the new style to be used
  style: (style) => {
    return newStyle;
  }
}).addTo(map);

Development Instructions

Quickstart Development Instructions

  1. Fork and clone this repo.
  2. cd into the esri-leaflet-vector folder.
  3. Install the dependencies with npm install.
  4. Run npm run dev to compile the raw source inside a newly created dist folder and start up a development web server.
    • Alternatively, run npm run start to compile raw source code into both "debug" and "production" versions. This process will take longer to compile when saving your local changes to source code. Recommended only when building for production.
  5. Open examples/quickstart-dev.html to see local changes in action.

Advanced Development Instructions

  1. Fork and clone this repo.
  2. cd into the esri-leaflet-vector folder.
  3. Install the dependencies with npm install.
  4. Run npm run build to compile the raw source inside a newly created dist folder.
  5. Run npm test from the command line to execute tests.
  6. Open examples/quickstart-dev.html or examples/quickstart-prod.html to see local changes in action.
  7. Create a pull request if you'd like to share your work.

Dependencies

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Please take a look at previous issues on Esri Leaflet and Esri Leaflet Vector that resolve common problems.

You can also post issues on the GIS Stack Exchange an/or the Esri Leaflet place on GeoNet.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Terms

Licensing

Copyright © 2016-2020 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.