This plugin is impossible to get working.

[jgausman]

I am not sure if it just works on demo, but the install lacks the files it needs to operate (like the bundle.js file). I have been at it for days, and called upon some js developers I know. None of us got anywhere. Very sad indeed.

[slutske22]

I am not sure what the issue is that you are having. Please describe to me how you are trying to install and use leaflet-topography in your project, and what errors exactly you are seeing. I am not sure what " the install lacks the files it needs to operate (like the bundle.js file)" means.

[jgausman]

OK, so I started a new test map, with a fresh install of the plugin.
This is the error I am getting now from just trying to run your sample code. I've given the function a mapbox key. I'm loading from the .js file.
"Uncaught SyntaxError: The requested module './node_modules/leaflet-topography/build/leaflet-topography.js' does not provide an export named 'default'"

[slutske22]

I need to see your code. It sounds like you are trying to import { default } from 'leaflet-topography', or some variation on that, which makes no sense. Please post your code that is leading to this error, or offer some form of minimal reproducible example.

[jgausman]

<title>Topography Test</title>

<!-- *** LEAFLET CDN HOST *** -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- *** MAPBOX CDN HOST*** -->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>

<!-- *** PROVIDERS LOCAL HOST*** -->
<script src='./src/plugins/leaflet-providers.js'></script>

<!-- *** LEAFLET-TOPOGRAPHY CDN HOST*** -->
<script src="https://unpkg.com/leaflet-topography" type="text/javascript"></script>

<style>
    body {
        margin: 0;
    }
    #mapdiv {
        height: 100vh;
        width: 100vw;
    }


   </style>

<script>
    var mymap;
    var lyrOSM;
    
    mymap = L.map('mapdiv', {center: [37.773886, -122.41823], zoom:16, 
            zoomControl:true, dragging:true, minZoom:6, maxZoom:19, attributionControl:false});
        
    lyrOSM = L.tileLayer.provider('OpenStreetMap.Mapnik');
            mymap.addLayer(lyrOSM);

</script>

<script type = "module">
    import Topography from 'https://unpkg.com/leaflet-topography'

    const map = L.map('mapdiv', mapOptions);

    const options = {
    token: 'REMOVED'
    }

    // promise .then syntax
    map.on('click', (e) => {
    Topography.getTopography(e.latlng, options)
        .then((results) => console.log(results));
    });
</script>>

regeneratortuntime error is something I've already dealt with... it's the "export named 'default'" error that I'm dealing with now. The script code is cut-and-paste from your github page. I'm a noob, apologies if I made an oafish attempt.

[slutske22]

Ah...I see what's going on. I'm not sure what your actual project looks like, but if you're going from the cdn, I realize you need to also include regenerator runtime from a cdn. I'll work on either updating my docs, or repackaging the plugin to bundle it automatically. When going from the CDN, add this before the leaflet-topography script:

    <!-- *** REGENERATOR-RUNTIME CDN HOST*** -->
    <script
      src="https://unpkg.com/regenerator-runtime"
      type="text/javascript"
    ></script>

I don't think that importing from the CDN is a great idea, for the same reason. If you're working on a project using npm and node_modules, you can import Topography, { preload, etc } from 'leaflet-topography'...but it looks like you still need regenerator runtime. If you take a look at my examples, you'll see that both of them use import 'regenerator-runtime/runtime'. I'll add this to the docs for now, and I'll think about how to bundle this plugin so that you don't have to import it yourself. Thanks for pointing this out.

Working Codesandbox

Make sure you put in your own mapbox token to get going on that example.

Sorry for the hassle, there's a reason this plugin is still only at a 0.2.1 version ATM. Thanks for reaching out.

[jgausman]

I'm actually running the plugin from an npm install, so I don't get the regenerator runtime error. I'll try the import method you suggest, thank you so much for your attention to this.

UPDATE: When I run the suggested import method, I still get the same error regarding an export named 'default.'

I've tried loading es6 and am trying to see if that can fix it.

[slutske22]

Here is a simple codesandbox example using es6 modules:

example

codesandbox uses parcel.js for their bundler, which I guess handles the babel transformations, so no regenerator-runtime errors. But that example there is pretty much the simplest way to use the plugin, with the ability to use statements like import Topography, { configure, preload, getTopography } from 'leaflet-topography'.

[jgausman]

victory!!! Thank you!!