Guide: Utilizing JSON API data to generate marker labels on a leaflet map

Users are presented with points to click on. When a point is clicked, a menu displays text information. I have successfully placed the points, but when attempting to retrieve specific data from the database upon clicking a point, it does not show the marker-specific information.

    for (pointer of pointers) {

        title.textContent = "No description available.";
        if (item.objDescription) {
            title.textContent = item.objDescription;
        }
        div.appendChild(title);

        menu.appendChild(div);
    }
}

Where did I make a mistake? I want the points to display only their own text and not all texts retrieved from the database.

EDIT :

The problem title has been updated to better reflect the desired solution.

javascriptarraysdatabaseexpressleaflet

Answer №1

Your response and code for iterating through the JSON object seem to be on point.

Although I'm not familiar with the openobjectMenu code, it appears that you are creating divs and placing them within an element with the ID objectMenuBody, most likely in your HTML code. This ensures they are visible from the start.

Based on the L.marker in your code, my assumption is that you are using Leaflet.

If you intend to add labels to markers, utilizing 

marker.bindPopup("<b>Hello world!</b><br>I am a popup.")
would be the correct approach.

You can refer to an example here https://leafletjs.com/examples/quick-start/.

Instead of the provided code:

const div = document.createElement("div");
        const title = document.createElement("h2");
        const lineBreak = document.createElement('br');

        const image = document.createElement("img");
        image.setAttribute("src", "images/default.png");
        image.setAttribute("alt", "Default image");

        title.textContent = "No description available.";
        if (item.objDescription) {
            title.textContent = item.objDescription;
        }
        div.appendChild(title);
        div.appendChild(lineBreak);

You could simply construct an HTML string to pass to the .bindPopup method.

Quick example:

const pp = `<div><h2>${item.objDescription}</h2><img src="${item.image64}" /></div>`;
const marker = L.marker([item.lat, item.lon]).addTo(map);
marker.bindPopup(pp);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

UI-Router: What is the best way to access a page within my project without adding it as a State?

Currently in the process of learning Angular and UI-Router. Initially, I followed the advice of many and chose to utilize UI-Router. In my original setup, the login page was included in all States. However, I decided it would be best to keep it as a separ ...

javascriptjqueryangularjsasp.net-mvcangular-ui-router

Click on the header to activate the accordion link with a trigger

I am having an issue with a trigger. My goal is to make the accordions collapse not only by clicking on the link, but also by clicking on the entire header panel. Below is my header's code: <div class="accordion-head" role="tab"> <div cl ...

javascriptjqueryhtml

Cordova - Fixed elements flicker/blink when scrolling

I have exhausted all possible solutions, ranging from -webkit-transform: translate3d(0,0,0); to -webkit-backface-visibility:hidden but none of them seem to resolve the issue of an element flickering/blinking/disappearing when scrolling on iOS with - ...

javascripthtmlcordovaphonegap

Locate a specific keyword within a URL and store the URL in the first element of an array

I need assistance with PHP code to extract URLs containing the word artifact. I want to store these URLs in an array after using regex pregmatch to search for the desired keyword. PHP is the programming language being utilized for this task. Below are th ...

phpregexarraysurlpreg-match

Incorporating a timer feature into the code for my memory game

Seeking the optimal method to incorporate a timer into my memory game. This game comprises numerous squares, and when the user successfully completes it, a modal appears congratulating them on their win and providing an option to restart the game. The obj ...

javascript

The authorization header is not being received in the delete request

In my backend, I have implemented NodeJs and Express. The majority of my endpoints pass through the validateToken middleware successfully. However, I recently created a delete endpoint that seems to be missing the Authorization header even though it is bei ...

node.jsexpressauthorizationhttp-delete

What is the best way to verify that a JSON key contains only distinct values within a JSON document using JavaScript?

I'm working with a JSON file structure that looks something like this: "fields": { "asset": { "values": [{ "asset": { "id": "Info_text", "type": "text", "value": "ABCD" } ...

javascriptjson

ES6 does not work with React hello world

Can anyone help me with troubleshooting my code? I've checked the console on jsbin and can't find any errors. http://jsbin.com/susumidode/edit?js,console,output Class secondComponenent extends React.Component { render(){ return ( &l ...

javascriptreactjs

I continue to encounter the same error while attempting to deliver data to this form

Encountering an error that says: TypeError: Cannot read properties of null (reading 'persist') useEffect(() => { if (edit) { console.log(item) setValues(item!); } document.body.style.overflow = showModal ? "hidden ...

javascriptreactjstypescriptnext.js

What is the process for including the posting date in the JSON format while using the Instagram

Struggling to incorporate the date into my JSON Instagram feed has been a challenge for me. For reference, here is a demonstration on JSFiddle: http://jsfiddle.net/galnova/p74jy3sk/ The following code snippet includes the commented-out section related to ...

javascriptjqueryjsondateinstagram-api

Transferring byte arrays in Java

I'm encountering some issues with my socket programming codes related to a server and client using TCP. The server is supposed to receive a password from the client: if it's correct, the server will send a file back to the client for saving; othe ...

javaarrayssockets

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

I am currently working on implementing RecordRTC.js to capture audio from a microphone and then upload it to a server built with nancyfx. Initially, I am simply aiming to upload the audio stream and store it in a wav file for testing purposes. However, my ...

javascriptangularjswebrtcgetusermedia

Intermittent issue with Webdriver executeScript failing to detect dynamically created elements

It has taken me quite a while to come to terms with this, and I am still facing difficulties. My goal is to access dynamically generated elements on a web page using JavaScript injection through Selenium WebDriver. For instance: String hasclass = js.exec ...

javajavascriptseleniumselenium-webdriverselenium-firefoxdriver

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected. Important Note: I already have a separate button for navigating to the next section where ...

javascripthtmlcssdom-events

I'm intrigued: what type of syntax is Facebook's polling service utilizing in the callback?

While monitoring the Network Monitor on Chrome's developer tool, I observed how Facebook updates content on their news feed. All AJAX responses start with the following: for (;;);{"__ar":1,"payload":[]} I'm curious about what the for(;;); piec ...

javascriptajaxfacebookpollingfeed

Guide on automatically removing a DOM element in Jquery after a set amount of time

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

javascriptjqueryhtmlnode.jstimer

What is the best method for sending a document to a web API using Ajax, without relying on HTML user controls or forms?

I have successfully utilized the FormData api to upload documents asynchronously to a web api whenever there is a UI present for file uploading. However, I now face a situation where I need to upload a document based on a file path without relying on user ...

javascriptajaxasp.net-mvchtmlasp.net-web-api2

Can $refs cause issues with interpolation?

I'm currently learning Vue.js and the course instructor mentioned that modifying the DOM element using $refs should not affect interpolation. In fact, any changes made directly to the DOM will be overridden by interpolation if it exists. However, in m ...

javascripthtmlvue.js

How can we prevent MySQL PHP hacking and ensure database security with regular backups?

After completing my website with newly learned skills in PHP and MySQL, I am now curious about the most common methods hackers use to breach sites. I have already been advised on using addslashes();, mysql_real_escape_string();, and strip_tags();. Can yo ...

phpmysqldatabasesecuritybackup

The concept of Puppeteer involves defining the browser and page in a synchronous manner

In the beginning of the Puppeteer tutorial, it is instructed to follow this code snippet: const puppeteer = require('puppeteer'); (async () => { await page.goto('https://example.com'); const browser = await puppeteer.launch ...

javascriptnode.jsasynchronousasync-awaitpuppeteer