console logging array values inside renderedCallBack() would say undefined, If accessed directly throws afterRender threw an error exception

simple solution is to do this in the connectedCallback method since the renderedCallback may be called before you have actually done anything. you can use asynchronous programming here as well by declaring your method async

async connectedCallback(){
  // call your promises and wait for them to complete (resolved|rejected)
  await Promise.allSettled([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ])
    .catch( error => console.error( error ));

... your other logic

}

this will allow your code to pause while awaiting for these promises to resolve, and then you can do what you need.

I would suggest before using the variables loaded by your scripts that you check for existence first to prevent behavior that you do not want. you can even use this chance to set any attributes to stop rendering for user experience and set an error display on your view should this fail.

if( L ) {
  ... do my thing here
}

EDIT

after your edit, here is a little change to how i would write this. disclaimer: without the relevant code in the apex i cannot reliably test this and log it, but this JS should suffice

JS

async connectedCallback() {
    const el = this.template.querySelector(".map-root");
    const provinces = this.getProvinces();

    // check that the provinces were returned if the catch was reached, this will be undefined
    if( provinces ){

        // use the array spread to assign a new array while spreading the results here.
        // array spread (...) solves the depth issues that track has with objects and arrays
        // that will cause the track variable to see no difference. so we assign it a completely new array
        // with all of the values we need. you can do this anytime that you want to update the array.
        // you can also now update an object by updating the key and it being marked @track see docs for reference
        this.provinces = [ ...provinces.map( record => {
                return {
                    key : record.Id,
                    province : record.Name,
                    latitude : latitude,
                    longitude : longitude
                };
            })
        ]
    }

    // load the scripts asynchronously and wait for the promises to resolve/reject
    await Promise.allSettled([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).catch(error => console.error(error));

    // check that the scripts were loaded correctly as we should now have an "L" available to use. 
    if( L ){

        let mymap = L.map(el).setView([54.139503, -96.653471], 4);

        L.tileLayer('https://api.mapbox.com/styles/v1/sumchans/', {
            tileSize: 512,
            zoomOffset: -1,
        }).addTo(mymap);
    }
}

// reusable call that you can use later will be undefined returned if the catch was called
// else you will have your result from your imperative call.
async getProvinces(){
    return await onLoadProvinces()
                    .catch( error => console.error( "error loading provinces: ", error ) );;
}

Note that i put my const variables at the top of the method, this is my own personal preference since these are not reliant on other methods. better to keep one time set variables in one place when able. This is just a preference for my own organization.

To learn more about the usage of the spread operator for arrays and objects, please see HERE. the spread operator can be used on objects and arrays alike and is widely supported and works well to get around the issues with @track as it relates to array and object depth. More information about this is HERE for supported Javascript and HERE for more information about the decorators

Update 2

If you are seeing your response as an Object once you get it back from the imperative call, you will need to make it an array before using map. Or you can check if it is only 1 record. I don't know what Type you are returning, i can only asume it is a List as you plan to place it in an array. if for whatever reason you are and it returns as an Object you can verify this by adding a check if it is an array.You can always ensure you have an array by creating some validation ahead of usage.

Original

const provinces = this.getProvinces();

Simple Method

// convert any Object to an array, if you're expecting an array (typical when Salesforce returns an object with all number keys )
getObjectAsArray( obj ) {
   return obj && !Array.isArray(obj) 
         ? Object.keys(obj).map(key => obj[ key ]) 
         : obj || []
}

Updated fetch

const provinces = this.getObjectAsArray( this.getProvinces() );