Category: javascript

Im trying to use trimble maps javascript sdk in a react app to display a map. I also want to add points to the map at specified lat longs. However, whenever I add a marker to the map the marker appears to shift off the map and not show at the lat/long. When you zoom in or out the marker does look like it moves.

I will also note that I have also been adding routes to the map with the lat longs and those work and show where they should. So this issue is just with the markers.

The version of trimble Im using is: “@trimblemaps/trimblemaps-js”: “^4.2.1”

If theres a better method for adding markers to the map I can switch to that. I just cant understand why the marker is being shifted. I copied this from examples on the trimble developer portal so Im not sure what Im doing wrong. I will say the examples on trimble are just javascript and I am doing this in react so Im not sure if that is making a difference or not.

import React, { useEffect } from 'react';
import './TrimbleTestPage.css';
import TrimbleMaps from "@trimblemaps/trimblemaps-js";

TrimbleMaps.setAPIKey("API KEY");

export default function TrimbleTestPage() {

useEffect(() => {
    const center = [-87, 38];
    const zoomLevel = 6;
    const map = new TrimbleMaps.Map({
        container: 'map', // container id
        center: center,
        zoom: zoomLevel,
        maxCanvasSize: [500,1000],
        region: TrimbleMaps.Common.Region.NA
    });

    map.on('load', () => {
        // Create a marker with a label on top of an icon
    const el = document.createElement('div');
    el.classList.add('cust-marker');
    el.title = 'Marker with a label and an icon';
    const htmlContent =
        '<div id="text">Green truck</div>' +
        '<div id="image" style="background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;"/>';
    el.innerHTML = htmlContent;
    const marker = new TrimbleMaps.Marker({
        draggable: false,
        anchor: 'top-left', // default: center, if width is too wide, you will see marker moves after zoom out.
        element: el
    }).setLngLat(center).addTo(map);
    });

    // Cleanup function to remove the map instance when the component unmounts
    return () => map.remove();        
}, []);

return (
        <div style={{width: "100%", height: "100%"}}>
            <div id="map" style={{height: "500px", width: "1000px;"}}></div>
        </div>
)
}

Here is what the map looks like with the marker when it renders:

so I’m having a weird issue with Tailwind and it’s transitions. I have a parent div with a background color that changes depending on the activeState. This has a transition and it works just fine.

Within that div I have a “dot” that toggles between being on the left and the right, depending on it’s activeState. The transition on this does not work.

I’m not sure why the second div’s transition isn’t working. I’ve tried changing the code to be an absolute div with left-1 right-1 being what it toggles between but that also didn’t work.

   <div
            className={`flex items-center ${
              activeState ? "bg-red-400 " : "bg-gray-600 "
            } w-11 h-6 rounded-full transition-all px-[2px]`}
          >
            <div
              className={`bg-white w-5 h-5 rounded-full ${
                activeState ? "ml-auto" : "mr-auto"
              } transition-all`}
            ></div>
          </div>

I’m working on a simple web page where a button click should update the content of a using JavaScript. Here’s my code:

But when I click the button, nothing happens. No errors in the console either. I’ve double-checked the function name and element IDs. Am I missing something obvious here?

What I’ve tried:

Ensured the script is at the bottom of the body

Checked the browser console for errors

Tried textContent instead of innerHTML

Any help is appreciated

I’m trying to double each number in an array using forEach, but the original array isn’t changing. Here’s my code:

const numbers = [1, 2, 3];
numbers.forEach((num) => {
  num = num * 2; // Doubling the value
});
console.log(numbers); // Output: [1, 2, 3] (unchanged)

Expected Output:

[2, 4, 6]

What I’ve Tried:

Used map() instead (works, but I want to understand forEach).

Tried accessing the array by index:

numbers.forEach((num, index) => {
  numbers[index] = num * 2; // This works, but why doesn’t the first approach?
});
console.log(numbers);

I’m building a multi-step form for a simple web app. Each step has input fields that require validation (e.g., required fields, email format). If a user refreshes the page, I want to:

Keep the form data intact (already using localStorage for this).

Restore any validation error messages that were previously displayed (e.g., “Email is required”).

Right now, the data is being saved and restored correctly using localStorage, but I can’t figure out how to save the validation state or messages and reapply them when the page reloads.

    // Saving form data
const form = document.querySelector("form");
form.addEventListener("input", () => {
    localStorage.setItem("formData", JSON.stringify({
        email: form.email.value
    }));
});

// Validating and showing error
form.addEventListener("submit", (e) => {
    if (!form.email.value) {
        e.preventDefault();
        document.getElementById("emailError").textContent = "Email is required";
    }
});

I’m trying to fake the request with Nock library in my React application (Webpack), but i get errors: “assert is not defined” and, after adding ‘assert’ package, “process is not defined” where i require or import ‘nock’.

require('nock')
.nock('...')
.post('...')
.reply(200, {
 myName: 'asdasd'
});


util.js:109 Uncaught ReferenceError: process is not defined
at ./node_modules/util/util.js (util.js:109:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/assert/build/internal/assert/assertion_error.js (assertion_error.js:25:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/assert/build/assert.js (assert.js:39:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)

I have multiple files that I am trying to process back to back using ffmpeg.wasm. I have noticed that after around ~150 runs, a memory issue comes up: RuntimeError: memory access out of bounds. I tried doing cleanup using ffmpeg.deleteFile() on both the input and output files after every run, but that didn’t make a difference. Is there something I am missing that will allow me to reuse the ffmpeg instance as many times as I want?

If I can avoid it, I do not want to have to call ffmpeg.terminate() after each use since loading ffmpeg for the next use takes a long time (~.5 secs on my test machine).

Note: I am using the updated ffmpeg.wasm v0.12+ in a browser setting

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:UsersDellAppDataLocalnpm-cache_logs2025-04-24T17_55_27_717Z-debug-0.log

I am new to Agora.io but I am aware of webRTC and have built plenty of applications over it I want to do some open source contribution and found Agora but it is huge idk where to start from.

Support from someone in community.

I am trying to write some code that parses through a section of XML and deletes the entry when some criteria are met.

What I have below is getting to the point where I see my “HIT” channelMap, but it is not actually deleting the entry. Does anyone know what I am missing here?

for each(var entry in msg..component.section.(code.@code == "47519-4").entry){
    for each(var obs in entry.observation.(@classCode == "OBS").(@moodCode == "EVN")){
        if([email protected]() != "" && [email protected]() != "" && [email protected]() != ""){
            channelMap.put('HIT', 'HIT')
            delete entry
        }
    }
}

I’m trying to use event.preventDefault() on a submit button inside a form that gets added to the page dynamically using JavaScript. However, it doesn’t seem to work—the form still submits and the page reloads.

I am writing a Nextra Docs page for an API documentation. On the left side is the Nextra “navbar” Component that usually has links to the single .mdx pages of the documentation.

Current page view

However in my case, I would like to have one single page for the whole API documentation and add anchor tags to the navbar Component, instead of using links to the single pages. This way the user just scrolls down a single page and uses the anchor tags to skip to desired sections.

Ideally i would like to see all relevant anchor tags below “Overview” in the screenshot, preferably being able to nest them in “subfolders” which contain other anchor tags.

I had no problems creating such a navigation with single .mdx files and using the ‘_meta.js’ file to arrange them and rename them, however this does not work with anchor tags.

Any ideas on how to solve this?

This is my current code:

layout.jsx

import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'

export const metadata = {
  // Define your metadata here
  // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
 
const navbar = (
  <Navbar
    logo={<b>API Documentation</b>}
    // ... Your additional navbar options
  />
)
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
 
export default async function RootLayout({ children }) {
  return (
    <html
      // Not required, but good for SEO
      lang="en"
      // Required to be set
      dir="ltr"
      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... Your additional head options
      >
        {/* Your additional tags should be passed as `children` of `<Head>` element */}
      </Head>
      <body>
        <Layout
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
          footer={footer}
        >
          {children}
        </Layout>
      </body>
    </html>
  )
}

_meta.js

export default {
    index: 'Overview',
    // You can use JSX elements to change the look of titles in the sidebar, e.g. insert icons
  }
  
  // Custom component for italicized text
  function Italic({ children, ...props }) {
    return <i {...props}>{children}</i>
  }

next.config.js

// next.config.js
import nextra from 'nextra'

const withNextra = nextra({
})

export default withNextra()

This is my current project structure, I am using the app router.

Project structure

I usually create OneNote APIs while looking at this site (https://learn.microsoft.com/ja-jp/javascript/api/onenote?view=onenote-js-1.1), but I’m having trouble with copyToNotebook().

It says that the argument is wrong, but I put a variable of type OneNote.Notebook as specified.

I can’t do another copyToSection(destinationSection) either.

I get the same thing with the wrong argument, but it should be there.

Both use the exact same code as the sample code in the official reference.

What are some possible things that could be happening?

If not, what other code should I use to get the same behavior?

Thank you in advance.

Code

async function deleteInfo() {
    await OneNote.run(async (context) => {
        const app = context.application;
        // Gets the active Notebook.
        const notebook = app.getActiveNotebook();
        // Gets the active Section.
        const section = app.getActiveSection();

        let newSection;

        await context.sync();
        try {
            const newSection = section.copyToNotebook(notebook);
            newSection.load('id');
            await context.sync();
            console.log(newSection.id);
        } catch (copyError) {
            console.error(copyError);
            if (copyError.debugInfo) {
                console.error("Debug Info:", JSON.stringify(copyError.debugInfo, null, 2));
            }
            if (copyError.innerError) {
                console.error("Inner Error:", JSON.stringify(copyError.innerError, null, 2));
            }
        }
    });  
}

Error

Debug Info: {
  "code": "InvalidArgument",
  "message": "InvalidArgument",
  "errorLocation": "Section.copyToNotebook",
  "statement": "var copyToNotebook = v.copyToNotebook(...);",
  "surroundingStatements": [
    "var v = context.root._getObjectByReferenceId("{70f32172-415d-4679-abad-71d6bbbacf0b}{13}");",
    "var v1 = context.root._getObjectByReferenceId("{70f32172-415d-4679-abad-71d6bbbacf0b}{12}");",
    "// >>>>>",
    "var copyToNotebook = v.copyToNotebook(...);",
    "// <<<<<",
    "// Instantiate {copyToNotebook}",
    "copyToNotebook.load(["id","name"]);"
  ],
  "fullStatements": [
    "Please enable config.extendedErrorLogging to see full statements."
  ]

Tried:
Tried to track down the cause of the error with error handling, but could only find what was described in the problem description.

What I expected to happen:
A section and a page within it can be created as a new section in the same notebook

What actually happened:
InvalidArgument Error

I am trying to automate adding products to my Wix website via their REST API. I have successfully added items but I am struggling with the image section. I have read and tried implementing all of the documentation on their wix api page. My images are stored in google drive and I have no issue getting them from there any more. I did have issues for a bit with the download link for them being a redirect and causing issues but I think that is fixed.

Here is what I have learned: Add product api does not allow adding images, you have to add them to the wix media manager first then you can link them to the product via a different api call. I believe I have to get a upload url to allow this (api call to get this link). I have tried this but I keep getting a 403 Permissions error. I tried testing their built in “Try Me!” on the wix dev page but it is broken as well. Here is the link to the api documentation I am testing but cannot get to work: https://dev.wix.com/docs/rest/assets/media/media-manager/files/generate-file-upload-url
Is this the correct way to be doing it?

TL;DR Anyone have help on how to add images to wix via REST API?

I have tried the REST API, and built in VELO HTTP calls. I have tried getting the upload url but cannot even get postman to return that it works but I can use it to get all products so I know my api key is working

On the same computer (iMac Pro using NVIDIA GeForce GT 710 – 2GB) I have built a simple WebGL application. It displays a few circles (created using triangles – each from centre to points on the circumference at many angles).

However one circle (the yellow one) is position differently on Chrome and Safari. Do you know why?

The public url is: https://yumainc.tech/webgl/issue/index.php

The main piece of code is :

            const cs = new Circle(canvas)
            cs.setContext(gl)
            cs.setAspect(aspect)
            cs.setColor(colors.yellow.rgba)
            var csAngle = { xy: Math.PI / 2, zx: 0, zy: 0 },
                    radius = { x: base.getRadius().x * 3 / 4, y: base.getRadius().y * 3 / 4 },
                    x = radius.x * Math.cos(csAngle.xy),
                    y = radius.x * Math.sin(csAngle.xy)
            cs.setCenter( { x: base.getCenter().x + x, y: base.getCenter().y + y } )
            cs.setProgram(program)
            cs.setRadius( { x: base.getRadius().x / 4, y: base.getRadius().y / 4 } )
            cs.setSolid(true)
            cs.drawCircle()

which calls a class I built, however it’s too long to show here. I hope you can view it in the web inspector.

In both cases the red circle always appears in the correct position – in the middle of the orange circle. Why is the yellow circle misaligned?