esri-leaflet-vector
Advanced tools
A plugin for Esri Leaflet to visualize Vector tiles from ArcGIS Online.
Take a look at the live demo.
<!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@3/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>
L.esri.Vector.vectorBasemapLayerFor rendering basemap layers which use the Esri Basemap Styles API internally. Extends L.Layer.
L.esri.Vector.vectorBasemapLayer("ArcGIS:Streets", {
// provide either apikey or token
apikey: "...",
token: "...",
}).addTo(map);
L.esri.Vector.vectorBasemapLayer("ITEM_ID", {
// provide either apikey or token
apikey: "...",
token: "...",
}).addTo(map);
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.vectorTileLayerFor custom vector tiles layers published from user data. Extends L.Layer.
L.esri.Vector.vectorTileLayer("ITEM_ID", {
// provide either apikey or token if not public
apikey: "...",
token: "...",
// optionally 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);
L.esri.Vector.vectorTileLayer("SERVICE_URL", {
// provide either apikey or token if not public
apikey: "...",
token: "...",
// optionally 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);
cd into the esri-leaflet-vector folder.npm install.npm run dev to compile the raw source inside a newly created dist folder and start up a development web server.
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.examples/quickstart-dev.html to see local changes in action.cd into the esri-leaflet-vector folder.npm install.npm run build to compile the raw source inside a newly created dist folder.npm test from the command line to execute tests.examples/quickstart-dev.html or examples/quickstart-prod.html to see local changes in action.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.
Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.
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
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.
[3.0.1] - 2021-06-03
While formatting the style object when loading a new L.esri.Vector.vectorTileLayer, check first if layer layout property exists before accessing. (🙏jag-eagle-technology🙏 #70)
Support style items with non-esri source names. #91
apikey in all lowercase is now supported and encouraged in order to be consistent with the rest of esri-leaflet's ecosystem. Note that camel case apiKey continues to be allowed since [3.0.0]. #89FAQs
Esri vector basemap and vector tile layer plugin for Leaflet.
The npm package esri-leaflet-vector receives a total of 11,632 weekly downloads. As such, esri-leaflet-vector popularity was classified as popular.
We found that esri-leaflet-vector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.