I am using leaflet.js to plot geographic data. I have been using the plugin based on geojson-vt: https://github.com/iamtekson/leaflet-geojson-vt to create vector tiles.

My maps overall work fine for the base map, and first layer of coordinates (which have polygons). However, when I move to using data with one point per feature, the coordinates are plotted way down in Antarctica when they should be in Florida.

Thanks for any help.

My JS:

// initialize map with default view at USA
// L is the window export of the leaflet.js library which we are using for this script.
const map = L.map("map", {minZoom: 3, maxZoom: 16})
             .setView([39.5,-95.35], 5) // center at USA and default zoom at 3

// use openstreetmap for background layer and add it to our map
const bgLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
  
// styles for coloring in specific features based on factors
const lowQuantile = {
    color: "#33FF39",
    opacity: 1,
    weight: 1,
    fillColor: '#e3e3e3',
    fillOpacity: 0.8
};

const medQuantile = {
    color: "#E6FF33",
    opacity: 1,
    weight: 1,
    fillColor: '#e3e3e3',
    fillOpacity: 0.9
};

const highQuantile = {
    color: "#FF3361",
    opacity: 1,
    weight: 1,
    fillColor: '#e3e3e3',
    fillOpacity: 0.9
};

const noQuantile = {
    color: "#000",
    opacity: 1,
    weight: 1,
    fillColor: '#e3e3e3',
    fillOpacity: 0.9
};


// function to grab our geojson files
async function getGeoData(url) {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
    return data;
};

const options = {
    maxZoom: 16,
    tolerance: 3,
    debug: 0,
    style: (properties) => {
        if (properties.quantile === "low") {
            return lowQuantile;
        } else if (properties.quantile === "medium") {
            return medQuantile;
        } else if (properties.quantile === "high") {
            return highQuantile;
        } else {
            return noQuantile;
        }
    }
};

const traceOptions = {
    maxZoom: 16,
    tolerance: 3,
    debug: 0,
    color: "#333",
    radius: 2,
    opacity: 0.2
};

// add json file layer to map
getGeoData("../data/processed/zip_level/zcta_2021_w_factors.json")
    .then(data => console.log(L.geoJson.vt(data, options)));
getGeoData("../data/processed/trip_trace.json") // fetch raw data
    .then(data => console.log(L.geoJson.vt(data, traceOptions)));

some Json Samples from (correct) zip-code boundary polygon data (zcta_2021_w_factors.json)

[ {'type': 'Feature',
  'geometry': {'type': 'Polygon',
   'coordinates': [[[-86.746308, 41.317003],
     [-86.650272, 41.172068],
     [-86.621304, 41.172004],
     [-86.5171, 41.229671],
     [-86.466577, 41.28859],
     [-86.485831, 41.323986],
     [-86.572248, 41.353295],
     [-86.64003, 41.389399],
     [-86.711754, 41.375345],
     [-86.746308, 41.317003]]]},
  'properties': {'zip': '46534',
   'quantile': 'low'}},
{'type': 'Feature',
  'geometry': {'type': 'Polygon',
   'coordinates': [[[-85.352585, 39.763557],
     [-85.282301, 39.685631],
     [-85.301382, 39.758631],
     [-85.352585, 39.763557]]]},
  'properties': {'zip': '46127',
   'quantile': 'low'}},
 {'type': 'Feature',
  'geometry': {'type': 'Polygon',
   'coordinates': [[[-87.43337, 38.252383],
     [-87.410061, 38.236603],
     [-87.377841, 38.245204],
     [-87.26138, 38.245678],
     [-87.25384, 38.245676],
     [-87.252113, 38.245746],
     [-87.219326, 38.304071],
     [-87.316219, 38.381474],
     [-87.407583, 38.375501],
     [-87.43337, 38.252383]]]},
  'properties': {'zip': '47660',
   'quantile': 'low'}}]

Some JSON samples from data that is being plotted in antarctica (should be in Florida) with Point data per feature (trip_trace.json):

[{'type': 'Feature',
  'properties': {'latitude': 28.38365,'longitude': -80.81024},
  'geometry': {'type': 'Point', 'coordinates': [28.38365, -80.81024]}},
 {'type': 'Feature',
  'properties': {'latitude': 28.39129,'longitude': -80.81472},
  'geometry': {'type': 'Point', 'coordinates': [28.39129, -80.81472]}},
 {'type': 'Feature',
  'properties': {'latitude': 28.3995,
   'longitude': -80.81777},
  'geometry': {'type': 'Point', 'coordinates': [28.3995, -80.81777]}}]