search

markusand / mapboxgl-legend

Add a legend to a mapbox-gl map by parsing layer layout & paint expressions.
ISC License
49 stars 13 forks source link

using npm i has bundled library #7

Closed shitathakin closed 2 years ago

shitathakin commented 2 years ago

When i download the module, i get .min.js files that are bundled. Thus unusable. Can anyone help?

shitathakin commented 2 years ago

I get this in the console.

ERROR in ./node_modules/mapboxgl-legend/dist/index.esm.min.js 1:7893
Module parse failed: Unexpected token (1:7893)

and in the code it says i have a ts7016. Do i need loaders or something to use this module?

markusand commented 2 years ago

If you use npm to install modules it is implicit you're going to bundle them with Webpack, Rollup or any other bundler. Otherwise, you better load the library from a CDN.

Documentation on how to install the module and load it in https://github.com/markusand/mapboxgl-legend#get-started

If you still want to load the script directly from the installed module, you can find an example in https://github.com/markusand/mapboxgl-legend/blob/master/examples/index.html. Atention! This requires to use a local web server to avoid CORS on loading scripts

If you're just creating an HTML file with all embedded javascript, the simplest, straightforward and recommended way is to forget about npm and load the library directly from a CDN, the same way you are loading with mapbox-gl.

<head>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/mapboxgl-legend@1.4.2/dist/index.umd.min.js"></script>
    <link href="https://unpkg.com/mapboxgl-legend@1.4.2/dist/index.umd.min.css" rel="stylesheet" />
</head>

By the way, never EVER include node_modules to your git repository. Use .gitignore

shitathakin commented 2 years ago

Hey Mark. I should rephrase my issue. I'm downloading the library directly and getting hit with type error 7016, and when I try and use the implementation outlined in the readme the error outlines that the module hasn't parsed. I tried to tackle this with using a .t.ds module declaration but also couldn't get the module to parse. Do you have any suggestions?

On Mon, 28 Mar 2022, 17:53 Marc Vilella, @.***> wrote:

Closed #7 https://github.com/markusand/mapboxgl-legend/issues/7.

— Reply to this email directly, view it on GitHub https://github.com/markusand/mapboxgl-legend/issues/7#event-6315765633, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL3TJCDLBVVRD2VFTHM2JU3VCFJNVANCNFSM5RZYMSJA . You are receiving this because you authored the thread.Message ID: @.***>

markusand commented 2 years ago

I suggest loading the library directly from the CDN. You already do it with mapbox, no need to hassle with all the bundler boilerplate for no reason.

shitathakin commented 2 years ago

Works perfectly from CDN. Great library Mark.

On Mon, Mar 28, 2022 at 11:23 PM Marc Vilella @.***> wrote:

I suggest loading the library directly from the CDN. You already do it with mapbox, no need to hassle with all the bundler boilerplate for no reason.

— Reply to this email directly, view it on GitHub https://github.com/markusand/mapboxgl-legend/issues/7#issuecomment-1080584775, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL3TJCCDAKYXHNDIJK2IUOLVCGQE3ANCNFSM5RZYMSJA . You are receiving this because you authored the thread.Message ID: @.***>