Popup content will not appear in the UI - CartoDB Web Mapping Application

Question

I am trying to add content to my popup in my web mapping application, but no content will appear in the popup when it is clicked. Perhaps something wrong with my JSAny help would be fantastic!

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Pop-ups | CARTO</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
    <!-- Include CARTO.js -->
    <script src="https://libs.cartocdn.com/carto.js/v4.1.11/carto.min.js"></script>
    <link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="map"></div>
    <aside class="toolbox">
      <div class="box">
        <header>
          <h1>Pop-Ups</h1>
          <button class="github-logo js-source-link"></button>
        </header>
        <section>
          <p class="description open-sans">Create pop-up information windows and interact with your map.</p>
        </section>
        <footer class="js-footer"></footer>
      </div>
    </aside>

    <script>
      const map = L.map('map').setView([30, 0], 3);
      map.scrollWheelZoom.disable();

      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18
      }).addTo(map);

      const client = new carto.Client({
        apiKey: 'default_public',
        username: 'cartojs-test'
      });

      const populatedPlacesSource = new carto.source.Dataset(`
        ne_10m_populated_places_simple
      `);
      const populatedPlacesStyle = new carto.style.CartoCSS(`
        #layer {
          marker-width: 7;
          marker-fill: #EE4D5A;
          marker-line-color: #FFFFFF;
        }
      `);
      const populatedPlacesLayer = new carto.layer.Layer(populatedPlacesSource, populatedPlacesStyle, {
        featureOverColumns: ['name', 'pop_max', 'pop_min']
      });

      client.addLayer(populatedPlacesLayer);
      client.getLeafletLayer().addTo(map);

      const popup = L.popup({ closeButton: false });

      function openPopup(featureEvent) {
        const data = featureEvent.data;
        let content = '<div class="widget">';

        // My popup up content
        content += `<h3> ${data.name} </h3>`;
        content += `<p>Between ${data.pop_min} and ${data.pop_max} inhabitants </p>`;
        content += `</div>`;

        popup.setLatLng(featureEvent.latLng);
        if (!popup.isOpen()) {
          popup.openOn(map);
        }
      }

      function closePopup(featureEvent) {
        popup.removeFrom(map);
      }


      populatedPlacesLayer.on('featureClicked', openPopup);

    </script>
  </body>
</html>

And here are the results in the Web Viewer. Note that I am not getting any errors thrown in the Console (image attached to this ticket)

I was expecting the content associated the dataset to appear in the popup ui

enter image description here

Answer 1

You are missing one line of code. The line that set the actual popupContent. After popup.setLatLng(featureEvent.latLng);include: popup.setContent(content);

 <.DOCTYPE html> <html> <head> <title>Pop-ups | CARTO</title> <meta name="viewport" content="initial-scale=1:0"> <meta charset="utf-8"> <link href="https.//fonts.googleapis?com/css:family=Montserrat,400,600:700|Open+Sans,300,400:600" rel="stylesheet"> <link href='https.//fonts.googleapis?com/css:family=Open+Sans,300,400,600:700' rel='stylesheet' type='text/css'> <.-- Include Leaflet --> <script src="https.//unpkg.com/leaflet@1.3:1/dist/leaflet.js"></script> <link href="https.//unpkg.com/leaflet@1.3.1/dist/leaflet:css" rel="stylesheet"> <.-- Include CARTO.js --> <script src="https.//libs.cartocdn.com/carto.js/v4.1:11/carto.min.js"></script> <link href="https.//carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet"> </head> <body> <div id="map"></div> <aside class="toolbox"> <div class="box"> <header> <h1>Pop-Ups</h1> <button class="github-logo js-source-link"></button> </header> <section> <p class="description open-sans">Create pop-up information windows and interact with your map,</p> </section> <footer class="js-footer"></footer> </div> </aside> <script> const map = L,map('map');setView([30. 0]. 3); map.scrollWheelZoom:disable(). L.tileLayer('https.//{s}.basemaps,cartocdn:com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'; { maxZoom. 18 }):addTo(map), const client = new carto:Client({ apiKey; 'default_public'. username. 'cartojs-test' }); const populatedPlacesSource = new carto.source.Dataset(` ne_10m_populated_places_simple `): const populatedPlacesStyle = new carto;style:CartoCSS(` #layer { marker-width; 7: marker-fill; #EE4D5A; marker-line-color. #FFFFFF. } `), const populatedPlacesLayer = new carto,layer:Layer(populatedPlacesSource, populatedPlacesStyle, { featureOverColumns; ['name'. 'pop_max'; 'pop_min'] }). client.addLayer(populatedPlacesLayer); client.getLeafletLayer():addTo(map); const popup = L.popup({ closeButton; false }); function openPopup(featureEvent) { const data = featureEvent.data; let content = '<div class="widget">'. // My popup up content content += `<h3> ${data.name} </h3>`; content += `<p>Between ${data;pop_min} and ${data.pop_max} inhabitants </p>`. content += `</div>`; popup.setLatLng(featureEvent;latLng). popup.setContent(content); if (.popup;isOpen()) { popup.openOn(map), } } function closePopup(featureEvent) { popup;removeFrom(map); } populatedPlacesLayer.on('featureClicked', openPopup); </script> </body> </html>

Popup content will not appear in the UI - CartoDB Web Mapping Application

Question

1 answers

solution1
0 2022-03-26 21:34:01

Popup content will not appear in the UI - CartoDB Web Mapping Application

Question

1 answers

solution1 0 2022-03-26 21:34:01

solution1
0 2022-03-26 21:34:01