JS

leafletjs
index.html

<div class="map-container" style="width:100%;">
    <div id="map" style="width: 100%; height: 600px;"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var map = L.map('map').setView([-28.65, 144.2], 4);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        var pins = <?php echo json_encode($pins); ?>;

        // Define a custom icon
        var customIcon = L.icon({
            // load logo of the site
            iconUrl: '<?php echo $url_to_icon; ?>',
            iconSize: [32, 32], // Size of the icon
        });

        pins.forEach(function(pin) {
            // Apply the custom icon to each marker
            L.marker([pin.latitude, pin.longitude], {
                icon: customIcon
            }).addTo(map);
        });

    });
</script>

Coordinate Source

opencage
api.ts

import opencage from 'opencage-api-client';

const fetchCoordinates = async (countrycode: string, postcode: string): Promise<Coordinate> => {
  // Simulate a third-party API call
  const response = await opencage
  .geocode({ q: postcode,countrycode: countrycode })
  .then((data) => {
    // console.log(JSON.stringify(data));
    if (data.status.code === 200 && data.results.length > 0) {
      const { lat, lng } = data.results[0].geometry;
      return { lat, lng };
    } else {
      console.log('status', data.status.message);
      console.log('total_results', data.total_results);
    }
  })
  .catch((error) => {
    console.log('error', error.message);
    if (error.status.code === 402) {
      console.log('hit free trial daily limit');
    }
  });

  if(response){
    return {
      countrycode: countrycode,
      postcode: postcode,
      latitude: response.lat,
      longitude: response.lng,
    };
  }else{
    return {
      countrycode: countrycode,
      postcode: postcode,
      latitude: 0,
      longitude: 0,
    };
  }
  
};