esri / esri-leaflet-vector Goto Github PK
View Code? Open in Web Editor NEWDisplay ArcGIS Online vector basemaps w/ Esri Leaflet
Display ArcGIS Online vector basemaps w/ Esri Leaflet
I am getting an error when trying to Install dependencies with npm install. I've attached the npm-debug log (npm-debug.txt) and screen output of npm install command (npm-install-log.txt)
At zoom level >12
get https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1495/2202.pbf
{"error":{"code":404,"message":"The requested URL was not found.","details":[]}}
At the moment there's no way to set the token.
The following doesn't work as expected.
L.esri.Vector.layer('1d', {token: 's0m3+0k3n'})
Google Chrome Version 75.0.3770.100 (Official Build) (64-bit)
I could reproduce this error on the ESRI Leaflet demo site.
https://esri.github.io/esri-leaflet/examples/vector-basemap.html
Please note this issue is intermittent.
Steps to reproduce the error:
Example:
The code within the utils.js function loadStyleFromItem, line 59 looks for the source named 'esri', but does not look for any other services (unless error is true). The World Contours service, id 51ca3ce6a16d4080ad955dacd6dd2fe2, only has the source name 'contours', and thus cannot be added as a vector tile layer by id.
Hi,
I am trying to load ArcGis light gray base map (with out label - vector) and the reference layer (labels -vector). when i add initially it loads fine. as i move on the map the labels disappear.
below it the code i am using. kindly help
var map = L.map('map').setView([0, 0], 2);
var baselayer = L.esri.Vector.layer('291da5eab3a0412593b66d384379f89f');
var referencelayer = L.esri.Vector.layer('1768e8369a214dfab4e2167d5c5f2454');
map.addLayer(baselayer);
map.addLayer(referencelayer);
Trying out the esri maps with leaftlet in a hobby project at the moment.
Using the normal esri-leaflet works fine like this;
import Leaflet from 'leaflet';
import EsriLeaflet from 'esri-leaflet';
const map = Leaflet.map('map').setView([59.6587675, 12.5904671], 18);
EsriLeaflet.basemapLayer('Streets').addTo(map);
But adding importing esri-leaflet-vector doesn't add it as property to EsriLeaflet (which docs lead you to believe it does; "L.esri.Vector
").
Also, importing it like this;
import EsriLeafletVector from 'esri-leaflet-vector';
and trying using it like this;
EsriLeafletVector.basemap('Spring').addTo(map);
doesn't work either.
How if this intended to be used via the NPM packages?
Logging the imported esri-leaflet-vector, the EsriLeafletVector
variable above, gives;
I'm trying to determine if this is something happening locally on my machine or if it's more widespread.
Using the example for switching a vector basemap (http://esri.github.io/esri-leaflet/examples/vector-basemap.html) if I pan the map and immediately switch to another basemap, the layer does not reset back to the correct position. It's stuck when I panned to or the new layer doesn't appear. The layer will only correct itself after I pan or zoom again.
My workaround right now is to use map.panBy([1,1]) after the switch to nudge the map to get the layer to appear correctly.
Are there any plans to update this plugin to support the Esri V2 basemaps? We were able to get this plugin to render some of the maps but the ones with images/overlays won't render properly currently.
Most of the item IDs listed are in "mature support". Example for Dark Gray Canvas. But updating to the "v2" versions may cause some slight changes to current functionality - for example dark gray basemap v2 does not have labels:
From: Esri/esri-leaflet#1163 (comment)
This issue should be resolved by some new features in Vector Tile Services that were just released in 7.3. A more formal blog post/announcement is coming soon but Vector Tile Services will now dynamically generate tiles that are not in the index. So a previously 404'ing request to
tiles/12/25/74.pbf
that would normally be handled by the index will now return a proper tile to clients.You can see proof of concepts in:
- https://codepen.io/patrickarlt/pen/YzKpjbW - Latest MapBox GL JS w/ Streets Night
- https://codepen.io/patrickarlt/pen/wvwoKmr - Latest MapBox GL JS w/ OSM in Leaflet
In the next few weeks I'm going to formally deprecate https://github.com/Esri/esri-leaflet-vector and replace it with 2 new plugins:
- Esri Leaflet Vector Basemap Layer (For using basemaps from the Living Atlas. Replacement for L.Esri.BasemapLayer)
- Esri Leaflet Vector Tile Layer (For custom vector tile services published from ArcGIS Pro)
I'll keep everyone updated on my progress but this means we finally have full vector tile support in Esri Leaflet!
I was moving from "L.esri.basemapLayer" to "L.esri.Vector.vectorBasemapLayer" and I'm getting the error in the title (attached console output)
I can't seem to find any of these properties in the documentation or seen anyone raise any issues about this. Could anyone point out what I'm missing?
I'm using leaflet.js 1.7.1, esri-leaflet.js 2.5.0, and esri-leaflet-vector 3.0.0
On this demo app: https://esri-leaflet-svelte-demo.gavinr.com (code)
If you load the page, then click "refresh" on a Chromium-powered browser (Chrome, Edge, etc), you will often get something that looks like this:
It looks like the div
that has the class leaflet-gl-layer
is getting a style height set incorrectly. I think that happens here:
esri-leaflet-vector/src/MapBoxGLLayer.js
Line 125 in 55af704
I cannot replicate this issue on the vanilla example page, so maybe it's an issue with Svelte?
We're using the new esri-leaflet and esri-leaflet-vector plugins (v3) and trying to use vector basemaps.
We have an API key generated but when using it from behind our organization's firewall we receive an invalid token error. {code: 498, message: "Invalid token.", details: []}
The same code and API key work fine when not going through the firewall.
str: http://coolmaps.esri.com/Verizon/VectorTiles/test.html
i think we just need to _glMap.addSource
instead of instantiating another glMap
I'm using https://esri.github.io/esri-leaflet/api-reference/layers/vector-layer.html to call a NOAA.gov vector tile map but the map is not loading. It's also calling the URL twice. First it calls the URL direct and gets a response, the 2nd time it calls it with "https://www.arcgis.com/sharing/rest/content/items/" prefixed to the URL
Call the URL once and don't prefix "https://www.arcgis.com/sharing/rest/content/items/"
In my code, I'm calling the vector tile as such
node.data.layer =
L.esri.Vector.layer('https://.....NOAA.GOV/server/rest/services/Hosted/Acoustics_Survey2012/VectorTileServer');
node.data.layer = L.esri.Vector.layer('https://[IP address here]/server/rest/services/Hosted/Acoustics_Survey2012/VectorTileServer');
map.addLayer(node.data.layer);
Calls to the URL
Please share the steps to reproduce the behavior.
If applicable, add screenshots to help explain your problem.
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-measure.min.js"></script>
| <script src="https://cdnjs.cloudflare.com/ajax/libs/esri-leaflet/2.1.2/esri-leaflet.js"></script>
| <script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"
| integrity="sha512-keaVwrBxpBNq1XF5XEUvQ8NtoBbGPs/gKJJ3tp1qiudO3mTk9YEa6/uPpxX/G2HIjFrquj/xGg+p/c7nDp0wUg=="
| crossorigin=""></script>
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster-src.js"></script>
| <script src="vendor/leaflet/leaflet.extra-markers.min.js"></script>
| <script src="https://unpkg.com/[email protected]/src/easy-button.js"></script>
Chrome
Macbook
Sometimes my base map will not be in sync with the other layers on it. A combination of zooming in, and clicking on an icon's popup then clicking a home button to get back to the Continental US will make it out of sync. If I click and move the map slightly it snaps back to the correct location. I have put in some JavaScript to move the map a fraction of a latitude and that doesn't fix it, only a slight map move with an input device works (finger or mouse). I have attached an image with an example. What would cause this and/or what would resolve it? Thanks
Hi,
Facing issues with a custom map (styled it using your style editor).
Tested on Chrome, Firefox on Windows 10 + OSX Sierra. The pic below is from Chrome + Win10
The issues include:
Any idea what the issue could be? Feels like Pt 2 + 3 are the same issue...
Item id is 9ab879103c6d4fb8a63b39429fa1c4a9
Code I'm using is
L.esri.Vector.layer('9ab879103c6d4fb8a63b39429fa1c4a9').addTo(map)
I'd like to update our web maps to use the v2 vector basemaps. When I attempt to plugin the ID's for the v2 maps, the feature layers draw in the wrong location. It appears they are drawing on the southern hemisphere of the map, instead of the northern hemisphere.
Existing map using the old Newspaper basemap.
Code: var map_layer = new L.esri.Vector.basemap('Newspaper');
Now using a v2 basemap
Code: var map_layer = new L.esri.Vector.layer('41597245552743d5910de614d47e748c');
I tried adding the v2 map to the styles in the esri-leaflet.js file and got the same results. Any ideas on how to remedy this? I'm new to using ESRI Leaflet so any suggestions appreciated.
Currently this plugin requires the option apiKey
to be in camel case, but the rest of esri-leaflet's ecosystem relies on all lowercase apikey
.
We should change this plugin to allow for either apiKey
(to avoid introducing breaking changes) or apikey
usage, while also encouraging the use of the all lowercase style in this repo's README and related documentation at https://github.com/Esri/esri-leaflet-doc/ and https://developers.arcgis.com/esri-leaflet/.
I think at bare minimum the following source code files would be affected:
I created a vector tile service on my ArcGIS Enterprise 10.7.1 and added it to Esri Leaflet. However, it is not showing any data. It is showing an error on every request with empty JSON.
Uploading the same vectortile package published to ArcGIS Online as service. This service works in Esri-Leaflet.
Can you find what the problem is, and fix it?
Thanks!
Hi-
When testing the code referenced here : esri-leaflet-vector/examples/custom-vtl.html in both jsfiddle and VSCode I'm getting the following errors:
Failed to load resource: the server responded with a status of 404 (Not Found) - esri-leaflet-vector-debug.js:1
Uncaught TypeError: Cannot read property 'vectorTileLayer' of undefined - test.html:43
Any thoughts on why this is happening would be really appreciated.
Cheers.
I couldn't find any way to add a url to a custom basemap resource. Is this possible, or are only the default esri basemaps supported?
Hi , I can help you , please
I have this import ( import {OpenStreetMapProvider} )from 'leaflet-geosearch' in my webpack app file. When it exits the Geocoding amount it stops working, when I comment the import it recognizes it.
how can i use this library and use reverse geocoding at the same time?
===================Below my code===========================
import { OpenStreetMapProvider} from 'leaflet-geosearch'
const lat=-0.22985;
const lng=-78.5249481;
let marker;
const map = L.map('mapa').setView([lat, lng], 13);
document.addEventListener('DOMContentLoaded',()=>{
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
//para el buscador
const buscador= document.querySelector('#formbuscador')
buscador.addEventListener('input',buscarDireccion)
})
function buscarDireccion(e){
//see esri
console.log("Enfocate aqui=======================");
console.log(L.esri);
console.log("Enfocate aqui=======================");
if(e.target.value.length>7){
//si existe un pin anterior limpiarlo
//usar el geocode
var geocodeService = L.esri.geocodeService();
//utilizar el provider
const provider = new OpenStreetMapProvider();
console.log(provider);
//la propiedad de buscar
provider.search({query: e.target.value}).then((resultado)=>{
//resultados
console.log(resultado);
//mostrar el mapa donde lo hayamos buscaod
map.setView(resultado[0].bounds[0],15)
//mostrar el pin
marker= new L.marker(resultado[0].bounds[0],{
//para mover
draggable:true,
//mover el mapa con respecto al marcador
autoPan:true
})
.addTo(map)
.bindPopup(resultado[0].label)
.openPopup()
}
)
}
}
===========================================================
I'm trying to display a Leaflet map in a Bootstrap modal. Everything works great, except if I try to reset the map extent via map.fitBounds(LatLngBounds)
once the map has already been created. After calling the map.fitBounds(LatLngBounds)
the map does not refresh the surrounding tiles when panning as expected. This only happens when I'm using layers from the esri-leaflet-vector plugin. Wondering if the Leaflet fitBounds()
is not triggering an event the esri-leaflet-vector plugin is expecting to render the tiles? I have an example here.
Leaflet v.1.0.3
esri Leaflet v.2.0.8 (master)
Steps to reproduce the error:
When adding an ArcGIS Online Item for an alternate style created for an ArcGIS Vector Tile layer to the map, the root.json file of the basic style attached to the tile service is used, instead of alternate styles attached to the ArcGIS Online/Portal item.
The built-in basemap Vector Tiles added using L.esri.Vector.basemap properly fetch their alternate root.json files from "https://www.arcgis.com/sharing/rest/content/items/" + AGOL ID + "/resources/styles/root.json", while layers added using L.esri.Vector.layer will default to the default style of the cache referenced by the alternate style (Typically something like http://tiles.arcgis.com/tiles/XXX/arcgis/rest/services/XXX/VectorTileServer/resources/styles/root.json
Hopefully this is enough info; I can structure a working example if required.
http://wave.webaim.org/report#/https://hamhands.github.io/webmap-play/boston-polls.html#
i think we just need to make sure vector tiles have alt=""
set, or figure out what the equivalent is in WebGL.
The mapbox-gl dependency in packages.json is defined as:
"mapbox-gl": "git+https://github.com/Esri/mapbox-gl-js.git#indexed-vector-sources",
This causes issues in enterprise environments which use npm proxies to install dependencies.
As mapbox-gl has a properly published npm module can we please change the dependency to:
"mapbox-gl": "^1.6.1",
Using CDN...
<script src="https://unpkg.com/[email protected]"></script>
vector tile service:
L.esri.Vector.layer('c09b3bdbf3f741128e13a1817052e32c').addTo(map);
resolved by #70
Hi,
Trying to do
L.esri.Vector.layer('2f030643ec154495b25256784f5e7d24').addTo(this.mapView)
I get these console errors (network issues) below, and the tile layer does not display, with or without a basemap layer (basemap layer loads fine e.g newspaper.
http://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/sprites/[email protected] 403 (Forbidden)
http://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/sprites/[email protected] 403 (Forbidden)
http://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/fonts/Arial%20Regular/0-255.pbf 403 (Forbidden)
http://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/fonts/Palatino%20Linotype%20Regular/0-255.pbf 403 (Forbidden)
http://www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/fonts/Arial%20Italic/0-255.pbf 403 (Forbidden)
The item is publicly shared, and I also tried with token (testing token).
Update
The tile layer is loading now, but some issues - the 403s above are still happening. And unless I use zoom level 1 for L.map(), the visible area shows up as grey, and the tiles show up only when I zoom out. Plus, when I pan the map I end up with weird issues with my markers (sometimes only the tiles move, not the markers)
Sample code
<html>
<head>
<meta charset=utf-8 />
<title>Esri Vector Basemap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load libraries from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]"></script>
<!-- Esri Leaflet and Esri Leaflet Vector -->
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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([59.358353, 17.907425], 14);
L.esri.Vector.layer('2f030643ec154495b25256784f5e7d24').addTo(map);
// L.esri.Vector.basemap('Newspaper').addTo(map);
</script>
</body>
</html>
@cegoddard can i ask you to:
please? 🍰
Looks like the item ID referenced here in basemap.js (763884983d3544c0a418a97992881fce
) is named Spring
but is actually pointing to the Mid-Century
basemap
. And then same thing but in reverse for what we have labelled as MidCentury
.
I have an app built in React 17, and I've recently updated both esri-leaflet and esri-leaflet-vector to version 3. Both the vectorTileLayer and vectorBasemapLayer load fine, but they are blurry. The maps are very clear when using the old version. In the map component of my app, I load mapbox-gl.js (v1), and the latest version of the esri-leaflet and esri-leaflet-vector plugin. On load, I add the vector layer to the map:
L.esri.Vector.vectorTileLayer('ITEM_ID').addTo(map1);
Looks great using the old version, blurry using v3. Any ideas?
Thanks!
http://www.arcgis.com/home/item.html?id=bd505ce3efff479bb4e87b182f180159
currently displays generic world streetmap cartography
When using a esri leaflet basemaplayer with the vector service, layer order is not always preserved. When the map initially loads the layers are drawn in the correct order with the basemap at the bottom and vectors on top. Panning the map causes the basemap to be on top of the vector tile service. Oddly, zooming does not cause the issue. Issue exists with Esri vector services and custom vector services. See fiddle.
Tried using leaflet map panes and setting a zIndex, with no affect.
Starting from version 2.0 mapbox-gl-js is no longer open source , live examples that link to the latest version of mapbox-gl-js are not working anymore http://esri.github.io/esri-leaflet/examples/vector-basemap.html
We report about MapLibre GL, a community led fork derived from mapbox-gl-js
https://github.com/maplibre/maplibre-gl-js
When to fixed StreetsNight basemap
featureLayer
L.esri.Vector.basemap('Streets').addTo(map);
L.esri.featureLayer({
url: 'http://services5.arcgis.com/7nsPwEMP38bSkCjy/arcgis/rest/services/LA_City_Receptacles2/FeatureServer/0';
}).addTo(map);
the problem occurs way down in mapbox-gl-leaflet.
because L.DomUtil.TRANSITION_END
isn't fired after the zoom, further calls to _update()
return prematurely.
featureLayer
that loads a polygon feature service, all is wellmapboxGL.options.updateInterval
has no effect¯_(ツ)_/¯
// raster source
{
"type": "raster",
"tileSize": 256,
"tiles": [ "https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}" ]
};
example here: http://jsbin.com/hiluli/1/edit?html,output
http://www.arcgis.com/home/item.html?id=961371bf763245eb8e828ab6a7225045
This tile layer has been updated to have significantly fewer lines of code in the style file (i.e. root.JSON file) than in other Esri Vector Basemaps styles (World Street, World Topo, Navigation, etc.). With this update, we have consolidated like features together in single layers to reduce the effort in customizing the code.
currently throws:
mapbox-gl.js:166 Error: layers[228]: duplicate layer id "Road/label/Shield white black", previously used at line NaN(…)onError @ mapbox-gl.js:166
mapbox-gl.js:166 Error: layers[229]: duplicate layer id "Road/label/Shield white black (Alt)", previously used at line NaN(…)onError @ mapbox-gl.js:166
mapbox-gl.js:166 Error: layers[305]: duplicate layer id "Road tunnel/label/Shield white black", previously used at line NaN(…)onError @ mapbox-gl.js:166
mapbox-gl.js:166 Error: layers[306]: duplicate layer id "Road tunnel/label/Shield white black (Alt)", previously used at line NaN(…)onError @ mapbox-gl.js:166
I've got an issue in my react wrapper for this plugin. I think the issue is that for any project using this plugin with esri-leaflet v3, esri-leaflet-vector is expecting to find the peerDependency esri-leaflet ^2.3.0 in the parent project. Now that esri-leaflet is up to v3, shouldn't we change the peerDependency of this package from ^2.3.0
to >2.3.0
(the difference is subtle, but material - npm smvr ranges), so any version greater than 2.3.0, including ^3.x.x versions, will be able to be resolved? Has anyone else run into this trying to use esri-leaflet 3 with this plugin?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.