javascript - How to plot dots based on the coordinates from a given data on a canvas?

Question

I have already found the minimum and the maximum latitude and longitude and now I want to sketch the all the buses location on the canvas. I was thinking of using the map function. Do you know any ways to do so? Will I need to use it use a loop and I want to do it with p5.js

let shelters;
let buses;
let dotx = 0;
let doty= 0;
function preload() {
    shelters = loadJSON(
        "https://data.gov.au/geoserver/gold-coast/wfs?request=GetFeature&typeName=ckan_be880d63_175a_4383_b0f2_ef88b831eba9&outputFormat=json"
    );
} 

function setup() {
    createCanvas(700, 700);
    buses = shelters.features;
    noLoop();
}

function draw() {
    background(220);

    // Get the max and min values with our helper function
    const { maxLat, minLat, maxLong, minLong } = max_min();
    console.log("Got the min and max values:");
    console.log({ maxLat, minLat, maxLong, minLong });
    //plotting it on the map
    let firstlatitude = shelters.features[0].geometry.coordinates[0];
    let firstlongitude = shelters.features[0].geometry.coordinates[1];

    let latitude = map(firstlatitude, 0,700,minLat, maxLat)
    let longitude = map(firstlongitude, 0, 700, minLong, maxLong)
    
    circle(latitude, longitude, 100)
    
    
    
}

// Given a feature return its latitude and longitude in an object
function getLatLong(feature) {
    const [lat, long] = feature.geometry.coordinates;
    return { lat, long };
}

// Find the max and min longitude and latitude and return them in an object
function max_min() {
    // Use the first feature of the list to initialize the max and min values
    const { lat: firstLat, long: firstLong } = getLatLong(buses[0]);
    let maxLat = firstLat;
    let minLat = firstLat;
    let maxLong = firstLong;
    let minLong = firstLong;

    // Iterate through all the features to update the max and min values
    for (let i = 1; i < buses.length; i++) {
        const { lat, long } = getLatLong(buses[i]);
        if (lat > maxLat) {
            maxLat = lat;
        }
        if (lat < minLat) {
            minLat = lat;
        }
        if (long > maxLong) {
            maxLong = long;
        }
        if (long < minLong) {
            minLong = long;
        }
    }

    return { maxLat, minLat, maxLong, minLong };
}

thank you!

Answer 1

等待大神答复