pablomoniz · September 15, 2022 22:04
diff --git a/index.html b/index.html
 <!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/[email protected]/dist/leaflet.js"></script>
    <link href="https://unpkg.com/[email protected]/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>
	<!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/[email protected]/dist/leaflet.js"></script>
	<link href="https://unpkg.com/[email protected]/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>