fix: move marker image loading earlier in process

* reproducible issues were observed where marker icons don't display at initial zoom, but visible at other zoom levels
  * reproducible on Android browsers
  * also in Firefox desktop with connection throttling set to "Regular 3G"
* caused by marker image not loaded in time
* in theory we can use ['styleimagemissing'](mapbox/mapbox-gl-js#7987) to handle this, but this does not work with image files loaded via callback, only for inline generated images

src/components/utilities/map/js/dynamic.js

@@ -66,15 +66,15 @@ maps.forEach(container => {
     accessToken: process.env.MAPBOX_KEY
   })
 
+  mapElement.loadImage('/images/marker.png', (error, image) => {
+    if (!error) {
+      mapElement.addImage('marker', image)
+    }
+  })
+
   mapElement.addControl(new System.NavigationControl())
 
   mapElement.on('load', () => {
-    mapElement.loadImage('/images/marker.png', (error, image) => {
-      if (!error) {
-        mapElement.addImage('marker', image)
-      }
-    })
-
     mapElement.addSource('woodlands', {
       type: 'geojson',
       data: {