How to implement the polylabel function in javascript? - javascript

I need to calculate the center (or rather the visible/inner centroid - this is a problem with U-shaped polygons) of a complex polygon, so i found this library called "polylabel" by mapbox on github.
Link: https://github.com/mapbox/polylabel
The problem is that there aren't any instructions on how to implement this on a local html file, where i stored my geojson object inside the javascript section.
I tried making a new js file, copying the code found on github inside of it and then importing it into the hmtl file but i get this error:
polylabel.js:3 Uncaught ReferenceError: require is not defined
at polylabel.js:3:13
(anonymous) # polylabel.js:3
polylabel.js:35 Uncaught TypeError: Queue is not a constructor
at polylabel (polylabel.js:35:21)
at parceleTest.html:85:33
this leads me to believe that polylabel is a node.js function so it is supposed to run on the server side, but i'm still very new to this and very confused, can someone tell me how to call this function in my local javascript?
i also tried using this version:
<script src="https://bundle.run/#mapbox/polylabel#1.0.2"></script>
but it doesn't work or i'm missing something.
Thanks.

Related

React async function with imports inside a web worker?

i am looking for a way to move my React function inside a web worker because i get the following error:WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB
There is an import that is needed for the function, I've done it with const package = require('package-name')
As far as i know it is a bit tricky to get a worker going with an import, because it doesn't have direct access to the back-end(?)
I get the following error:Uncaught (in promise) ReferenceError: require is not defined, I am using NodeJS v18.10.0, Webpack v5.73.0.
Is there an npm library that could help me get this running or even a native way to do so?
I already tried creating a vanilla webworker and using #koale/useworker but i just could get it going. Any help would be much appreciated.

Dynamically import d3.js as module?

Trying to dynamically import ("lazy-load") d3 as module from within my existing module to make it self-reliant, as per the es6 syntactic feature (https://developers.google.com/web/updates/2017/11/dynamic-import#dynamic). The source at https://d3js.org/d3.v5.min.js includes no "export" statement, only a literal function call (
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(...)
), yet it does get retrieved, only it doesn't receive its parameters it would expect from a normal <script src="https://d3js.org/d3.v5.min.js"/> tag import. How do I manually provide them, or how am I rather supposed to do this? thanks!
import('https://d3js.org/d3.v5.min.js').then(function(d3){d3.json()})
d3.v5.min.js:2 Uncaught (in promise) TypeError: Cannot read property 'd3' of undefined
at d3.v5.min.js:2
My first guess was wrong...
This error happens because this build of d3 is trying to read this.d3 (the function argument that receives this is called global, or t in the minified version), but this is undefined in a module context (which a script runs in when imported).
It is simply a bug in whatever build tool is used to produce this d3 build. It should use self (or perhaps this || self).
rollup for example used to have this bug but it was fixed a while ago.
Regardless, even after d3 is fixed, you won't get anything in .then(), it will set the d3 global. (Unless they release an ES module build.)

MapBox stopped working on SquareSpace and Uncaught ReferenceError: mapboxgl is not defined

Let me say that the map displays fine by itself when I run locally.
I just starting getting an error when using Mapbox with SquareSpace. This use to work and I cannot figure what is up with this error.
test-share:198 Uncaught ReferenceError: mapboxgl is not defined
You can see
https://www.5gyres.org/test-share
There once was a map there.... How can mapboxgl not be defined?
I am calling
Someone responded on GitHub and closed the ticket...
jfirebaugh
mapbox-gl.js includes a UMD, and define and define.amd are present in the global environment of your page, so mapbox-gl.js is assuming it should initialize itself via AMD, in which case window.mapboxgl is not set.
This is describing the problem but not a solution. I have tried a few things to initialize mapboxgl to no avail. sort of over my head at this point. Looks like I am getting into the depths of JS prototyping?
This was actually silly as SquareSpace must have updated the framework and how JS files are loaded. It had to do with the MapBox js code not being loading properly. I moved the mapbox-gl.js from the page "code injection" to the site "code injection" field and then it worked.
<!--mapbox-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />

How to include d3.js in angularjs app?

I am writing one Angularjs app. I am using MEAN stack with Grunt. I have written one directive that uses d3 library. I have d3.js file in the following location:
/client/app/lib/d3.js
The file is automatically included in the index.html and it runs fine in development mode. But when I run it in production mode I get the following error:
Uncaught ReferenceError: d3 is not defined
Then I did some R&D and found that if any java script file is included with the following syntax it gives same error:
!function foo() {
var myd3 = {};
...
...
...
this.myd3 = myd3;
}();
The above code will give error: Uncaught ReferenceError: myd3 is not defined
If you don't return anything from a function explicitly, undefined is returned. Now the ! makes it true. That's all.
I think the problem is execution of scripts. Are you sure that d3 is loaded first before it is utilized anywhere in your project ? Make sure <script src='d3.js'></script> is present before your code scripts.
Generally, for production grade code, concatenation of scripts is done. Make sure that the concatenation is done in order (d3, your-app-scripts).

Uncaught TypeError: Cannot call method 'each' of undefined

I have this error while trying to run mediaelement player.
The error is reported at mediaelement-and-player.min.js:44.
Edit: My apologies, I posted this from the mediaelementjs.com Support website.
I was trying to use mediaelement.js to play audio on my website.
Edit 8/2: The interesting thing is that when i load the full mediaelement-and-player.js instead of the minified version, it works fine.
I just dealt with this same issue while trying to use the Drupal module, http://drupal.org/project/mediaelement.
Turns out that a core Drupal javascript file, drupal.js, was calling jQuery.noConflict() which removes the $ variable from being defined in the global scope, hence bringing this bug in mediaelement-and-player.js to light.
This was reported in the issue queue for the mediaelement project and it looks like the fix just got committed: https://github.com/johndyer/mediaelement/pull/570
Most likely you have not loaded the jquery library into your script.
You have to reference the library (a js file) from within the header of your page via url. The url can point to a copy pf jquery you keep local or to a public site.

Categories