async function mapEffect({ leafletElement: map } = {}) {
    let response;

    try {
      response = await axios.get('https://corona.lmao.ninja/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }

    const { data = [] } = response;
    const hasData = Array.isArray(data) && data.length > 0;

if ( !hasData ) return;

const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
       ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
    }
    
    const geoJsonLayers = new L.GeoJSON(geoJson, {
      pointToLayer: (feature = {}, latlng) => {
        const { properties = {} } = feature;
        let updatedFormatted;
        let casesString;
    
        const {
          country,
          updated,
          cases,
          deaths,
          recovered
        } = properties
    
        casesString = `${cases}`;
    
        if ( cases > 1000 ) {
          casesString = `${casesString.slice(0, -3)}k+`
        }
    
        if ( updated ) {
          updatedFormatted = new Date(updated).toLocaleString();
        }
    
        const html = `
          <span class="icon-marker">
            <span class="icon-marker-tooltip">
              <h2>${country}</h2>
              <ul>
                <li><strong>Confirmed:</strong> ${cases}</li>
                <li><strong>Deaths:</strong> ${deaths}</li>
                <li><strong>Recovered:</strong> ${recovered}</li>
                <li><strong>Last Update:</strong> ${updatedFormatted}</li>
              </ul>
            </span>
            ${ casesString }
          </span>
        `;
    
        return L.marker( latlng, {
          icon: L.divIcon({
            className: 'icon',
            html
          }),
          riseOnHover: true
        });
      }
    });
    
    geoJsonLayers.addTo(map)
    console.log(geoJson);

  }
/**
   * mapEffect
   * @description Fires a callback once the page renders
   * @example Here this is and example of being used to zoom in and set a popup on load
   */
mapEffect
@description Fires a callback once the page renders
@example Here this is and example of being used to zoom in and set a popup on load
mapEffect @description Fires a callback once the page renders @example Here this is and example of being used to zoom in and set a popup on load
async function mapEffect({ leafletElement: map } = {}) {
    let response;
    try {
      response = await axios.get('https://corona.lmao.ninja/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }
    const { data = [] } = response;
    const hasData = Array.isArray(data) && data.length > 0;
if ( !hasData ) return;
const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
       ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
    }
    const geoJsonLayers = new L.GeoJSON(geoJson, {
      pointToLayer: (feature = {}, latlng) => {
        const { properties = {} } = feature;
        let updatedFormatted;
        let casesString;
        const {
          country,
          updated,
          cases,
          deaths,
          recovered
        } = properties
        casesString = `${cases}`;
        if ( cases > 1000 ) {
          casesString = `${casesString.slice(0, -3)}k+`
        }
        if ( updated ) {
          updatedFormatted = new Date(updated).toLocaleString();
        }
        const html = `
          <span class="icon-marker">
            <span class="icon-marker-tooltip">
              <h2>${country}</h2>
              <ul>
                <li><strong>Confirmed:</strong> ${cases}</li>
                <li><strong>Deaths:</strong> ${deaths}</li>
                <li><strong>Recovered:</strong> ${recovered}</li>
                <li><strong>Last Update:</strong> ${updatedFormatted}</li>
              </ul>
            </span>
            ${ casesString }
          </span>
        `;
        return L.marker( latlng, {
          icon: L.divIcon({
            className: 'icon',
            html
          }),
          riseOnHover: true
        });
      }
    });
    geoJsonLayers.addTo(map)
    console.log(geoJson);
  }
async function mapEffect ( { leafletElement : map } = { } ) { let response ; try { response = await axios . get ( 'https://corona.lmao.ninja/countries' ) ; } catch ( e ) { console . log ( ` ${ e . message } ` , e ) ; return ; } const { data = [ ] } = response ; const hasData = Array . isArray ( data ) && data . length > 0 ; if ( ! hasData ) return ; const geoJson = { type : 'FeatureCollection' , features : data . map ( ( country = { } ) => { const { countryInfo = { } } = country ; const { lat , long : lng } = countryInfo ; return { type : 'Feature' , properties : { ... country , } , geometry : { type : 'Point' , coordinates : [ lng , lat ] } } } ) } const geoJsonLayers = new L . GeoJSON ( geoJson , { pointToLayer : ( feature = { } , latlng ) => { const { properties = { } } = feature ; let updatedFormatted ; let casesString ; const { country , updated , cases , deaths , recovered } = properties casesString = ` ${ cases } ` ; if ( cases > 1000 ) { casesString = ` ${ casesString . slice ( 0 , - 3 ) } ` } if ( updated ) { updatedFormatted = new Date ( updated ) . toLocaleString ( ) ; } const html = ` ${ country } ${ cases } ${ deaths } ${ recovered } ${ updatedFormatted } ${ casesString } ` ; return L . marker ( latlng , { icon : L . divIcon ( { className : 'icon' , html } ) , riseOnHover : true } ) ; } } ) ; geoJsonLayers . addTo ( map ) console . log ( geoJson ) ; }
mapEffect
 @description Fires a callback once the page renders
 @example Here this is and example of being used to zoom in and set a popup on load
mapEffect @description Fires a callback once the page renders @example Here this is and example of being used to zoom in and set a popup on load