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 ]
      }
    }
  })
}


function countryPointToLayer (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
    });
  }

const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: countryPointToLayer
});

geoJsonLayers.addTo(map)



 
  }
/**
   * 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 ]
      }
    }
  })
}
function countryPointToLayer (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
    });
  }
const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: countryPointToLayer
});
geoJsonLayers.addTo(map)
  }
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 ] } } } ) } function countryPointToLayer ( 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 } ) ; } const geoJsonLayers = new L . GeoJSON ( geoJson , { pointToLayer : countryPointToLayer } ) ; geoJsonLayers . addTo ( map ) }
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