Help Debug - Velo Code + iFrame Pulling from CMS Collection

Ask the community
, , , ,
1

Question:
Can you help me debug these connection points? I have a dataset that is pulling into a map visual via an HTML iframe and velo code. Not all dataset entries are being brought in. Currently SOME are, but I am looking for all 167 entries to pull correctly. Currently, there are only about 35 pulling in.

Product:
Wix Studio editor with an iFrame and velo code talking to a CMS dataset collection

What are you trying to achieve:
I am trying to achieve:

  • Clarity on why all datapoints are not pulling through the code… (some data points are without incident so code is talking but can’t determine factors of why those working do work!)
  • Full load of all longitude and latitude datapoints on page load to place corresponding dots on the map.
  • When the “All Locations” is selected in drop down all 167 entries in dataset appear across the map.
  • Full load of all corresponding data points when each Division is selected.
  • Tooltip rollovers and on click appear with correct and corresponding data of name, location and division in tool tip.
  • Desktop and mobile optimized.

What have you already tried:
I have tried many things.

  • Refining the data set to not include unnecessary details.
  • Phone friend (but the Wix platform is not his forte)
  • Chatgpt analysis…

Additional information:
Map location: homepage, half way down.

I did use Fiverr to bring in the initial map and setup detail. Has not been a helpful resource to now identifying the bugs of what the dataset connection is doing.

Screenshot 2025-05-31 at 10.09.54 AM
Screenshot 2025-05-31 at 10.09.54 AM2510×1194 288 KB

Velo Code on page:
import wixData from ‘wix-data’;

let allProjects = ;

$w.onReady(function () {
// Clear dropdown initially
$w(‘#dropdown1’).options = ;
$w(‘#dropdown1’).value = “”;

// Load data from your dataset
wixData.query(“ProjectLocations”)
.find()
.then(res => {
// Map and convert lat/lon to numbers, filter out invalid coords
allProjects = res.items.map(p => ({
name: p.projectName || “Unnamed Project”,
city: p.city || “”,
state: p.state || “”,
division: p.division || “”,
lat: Number(p.latCor),
lon: Number(p.lonCor),
})).filter(p => !isNaN(p.lat) && !isNaN(p.lon));

  // Define fixed division order
  const customOrder = [
    "PRO",
    "DI",
    "DII",
    "DIII",
    "K-12",
    "NAIA",
    "NJCAA",
    "PRIVATE/CITY"
  ];

  // Set dropdown options in fixed order
  $w('#dropdown1').options = [
    { label: "All Divisions", value: "" },
    ...customOrder.map(div => ({ label: div, value: div }))
  ];

  // Set default to "All Divisions" and show all on map
  $w('#dropdown1').value = "";
  $w("#html1").postMessage(allProjects);
})
.catch(err => {
  console.error("Error loading project data:", err);
});

// Handle dropdown changes to filter map
$w(‘#dropdown1’).onChange(() => {
const selected = $w(‘#dropdown1’).value;
const filtered = selected
? allProjects.filter(p => p.division === selected)
: allProjects;

$w("#html1").postMessage(filtered);

});
});

iFrame code:

Interactive Map html, body, #map { height: 100%; margin: 0; padding: 0; background: #000 !important; } .leaflet-container { background: #000 !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background-color: rgba(0, 0, 0, 0.85) !important; color: #fff; border: 2px solid #fff; border-radius: 0; } .leaflet-popup-content { font-size: 14px; line-height: 1.5; min-width: 200px; max-width: 90vw; } .custom-tooltip { background: rgba(0, 0, 0, 0.85); border: 2px solid #fff; border-radius: 0; color: #fff; font-size: 13px; padding: 8px 12px; pointer-events: none; max-width: 200px; } .custom-tooltip strong { font-size: 15px; display: block; margin-bottom: 4px; } @media (max-width: 768px) { .leaflet-control-zoom { margin-top: 60px; } }
2

I believe wixData.query has a default limit. Try adding

.limit(200)

before

.find()

also check all the coordinates. your line

.filter(p => !isNaN(p.lat) && !isNaN(p.lon))

will remove any entry that is blank or is not a complete coordinate

maybe add a console log to debug what is getting removed

const rawItems = res.items;
console.log("Total items fetched:", rawItems.length);

allProjects = rawItems.map(p => ({
  name: p.projectName || "Unnamed Project",
  city: p.city || "",
  state: p.state || "",
  division: p.division || "",
  lat: Number(p.latCor),
  lon: Number(p.lonCor),
})).filter(p => {
  const valid = !isNaN(p.lat) && !isNaN(p.lon);
  if (!valid) console.warn("Invalid coords for:", p.name);
  return valid;
});

console.log("Valid items loaded:", allProjects.length);
1 Like
3

Thank you @Dan_Suhr !!! – I had done some digging into this and realized I could see the amount of loading entries through the console log. Wix was blocking at 50. This unlocked seeing the remaining!

1 Like