How to use esri-leaflet-vector with npm and ES6 imports?

[enjikaka]

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;

[jgravois]

to be honest, i'm not entirely surprised by this because we're currently doing something pretty hacky with rollup to bundle esri-leaflet-vector's own non ES6 dependencies (more info here).

its on my list of things to revisit, but its a long list at the moment.

[jgravois]

i still can't figure out how to bundle mapbox-gl the right way, but i'm getting closer.

i can rollup the cjs source using the setup below, but the bundle isn't usable because internal references to assert, fs and path can't be resolved.

// index.js
import 'mapbox-gl';

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  entry: 'index.js',
  dest: 'bundle.js',
  moduleName: 'L.mapboxGL',
  format: 'umd',
  globals: {
    'leaflet': 'L'
  },
  plugins: [
    nodeResolve({
      jsnext: false, // default
      main: true, // default
      browser: true, // default
      extensions: [ '.js', '.json' ]
    }),
    commonjs({
      exclude: [ 'node_modules/mapbox-gl-style-spec/**' ],
      ignoreGlobal: true,  // Default: false
    })
  ]
};

i noticed that the production browserify command used to build mapbox-gl itself includes an unassertify flag. that has to be relevant.

i also noticed that their package.json browser tag doesn't point at built source, but rather sets out rules for remapping some specific modules. i don't know what to make of that.

[enjikaka]

@jgravois Nice to see that you're making progress! I can try to have a look too this weekend. :)

[blahmonkey]

@jgravois @enjikaka Any luck figuring this out? Running into the same issue here. I see exactly the same object when console-logged on import from 'esri-leaflet-vector'

Thanks!

Edit: Worked around this the manual way, adding leaflet, leaflet-esri, and leaflet-esri to index.html

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

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

Then marking L as global in files where it was used, by

/* global L: true; */

[enjikaka]

@blahmonkey I ended up not using esri-leaflet-vector unfortunately.

[leyenda]

@enjikaka May I ask what you ended using for serving Esri vector tiles?

[enjikaka]

@leyenda I ended up not using the esri vector tiles since this lib did not work :(

[ymoisan]

Hello,

I am trying to tweak the library so I can use one of my client's vector tile coverage in Portal for ArcGIS. Following Development Instructions, I cloned the repo but the rest of the sequence failed on npm build :

$ npm run build

> esri-leaflet-vector@1.0.7 prebuild MyDir\esri-leaflet-vector
> mkdirp dist

> esri-leaflet-vector@1.0.7 build MyDir\esri-leaflet-vector
> rollup -c profiles/debug.js & rollup -c profiles/production.js

Unexpected key 'output' found, expected one of: banner, dest, entry, exports, external, footer, format, globals, indent, intro, moduleId, moduleName, onwarn, outro, plugins, sourceMap
Error: Unexpected key 'output' found, expected one of: banner, dest, entry, exports, external, footer, format, globals, indent, intro, moduleId, moduleName, onwarn, outro, plugins, sourceMap
    at validateKeys (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\src\utils\validateKeys.js:12:11)
    at Object.rollup (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\src\rollup.js:39:16)
    at bundle (MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:136:16)
    at execute (MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:125:3)
    at MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:69:4
    at tryCatch (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:185:12)
    at invokeCallback (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:197:13)
    at publish (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:168:7)
    at flush (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\asap.js:87:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki
Unexpected key 'output' found, expected one of: banner, dest, entry, exports, external, footer, format, globals, indent, intro, moduleId, moduleName, onwarn, outro, plugins, sourceMap
Error: Unexpected key 'output' found, expected one of: banner, dest, entry, exports, external, footer, format, globals, indent, intro, moduleId, moduleName, onwarn, outro, plugins, sourceMap
    at validateKeys (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\src\utils\validateKeys.js:12:11)
    at Object.rollup (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\src\rollup.js:39:16)
    at bundle (MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:136:16)
    at execute (MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:125:3)
    at MyDir\esri-leaflet-vector\node_modules\rollup\bin\runRollup.js:69:4
    at tryCatch (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:185:12)
    at invokeCallback (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:197:13)
    at publish (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\-internal.js:168:7)
    at flush (MyDir\esri-leaflet-vector\node_modules\rollup\www\ROLLUP\rollup\node_modules\es6-promise\lib\es6-promise\asap.js:87:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

I notice directory www is not in the node_modules\rollup directory. Any hint ?

Thank you.

[jgravois]

@ymoisan the error you mention is thrown by the much newer version of rollup you are attempting to use to compile the source.

i've refactored this lib to get it up to date in #45. feel free to pull down the rollup branch and test for yourself.

the proposed change there also makes mapbox-gl an external dependency instead of bundling the CommonJS module. that should be good news for the folks that want to import the ES6 modules too.

[tgirgin23]

For those still trying to achieve this... here is how to do it.

1) Clone the repo and copy the src/ files (Basemap.js, EsriLeafletVector.js, Layer.js, Util.js) within your project's root folder (anywhere is fine, just as long as you can access the files!). For my project, the src files are under my-project/src/utils/esri-leaflet-vector/. 2) In your code, add a (change this according to where you placed EsriLeafletVector.js in your project): import * as vector from '../utils/esri-leaflet-vector/EsriLeafletVector'; 3) Add the necessary code to display the basemap: var vectorTiles = vector.basemap('Gray'); vectorTiles.addTo(this.map); 4) If you get an error that mapboxgl cannot be found, you will need to copy the source of leaflet-mapbox-gl.js (part of mapbox-gl-leaflet) in your project folder, open the leaflet-mapbox-gl.js file and add this to the top of the file: import mapboxgl from 'mapbox-gl'; import L from 'leaflet'; 5) In Util.js, change import 'mapbox-gl-leaflet'; to be the path where you have the leaflet-mapbox-gl.js file... e.g, import './leaflet-mapbox-gl';

[craigstanton]

I've followed @tgirgin23's steps exactly but as soon as I try to use vector.basemap I get "Can't find variable: global", which is extra etrangebecause I can't find any reference to that variable in the four .js files that I imported

[flysubmarina]

@tgirgin23 Hello, i`ve used your approach and Mapbox GL requires an access token. So i think i need to get it from mapbox and pay for map using. For now i have arcgis token, how can i connect it with mapbox without generating a new mapbox token?

[XardasLord]

This is something I cannot achieve in Angular 15 :/