Dev Team Portal

Appearance

Maps ​

Cloudflare Worker ​

  • TBC by Christian

Components ​

  • Protomaps - https://protomaps.com/
    • An open-source resource for map tiles. These are then uploaded to the cloudflare worker.
  • MapLibre - https://maplibre.org/
    • An open-source front-end library that allows the above tiles to be displayed and interacted with.

Config ​

The map tiles are covered in the Cloudflare Worker section. The worker serves them via a HTTP range request from the front-end.

MapLibre functionality is found here: wwwroot/include/mapLibre

The main front-end functions are found in the javascript file and comprise:

js
createMap(centre, containerId, zoomLevel)
 // Creates the map using maplibregl.Map. This requires a style file that is hosted in our cdn
createMarker(bDraggable, centre, map)
// Creates the marker on the map and whether the marker can be moved (event-designer vs everywhere else)
mapLibreMap(id, sPostcode, sInfoHTML, dZoomLevel, bDraggable, bLatLngCache)
// Main function to create the map 
showMap(containerId = 'venueMap')
// Main function to show interactive maps on other pages that the event-designer

The map created on the venue page of the event designer utilises the mapLibreMap function as this is where the majority of the parameters will be set. This allows full control of the marker and zoom level.

To show the map elsewhere, once the marker and centre have been set on the venue page, then showMap is to be used. This takes a single parameter that is the containerId for where the map is to be shown. This function requires the container element to have the attributes of lat and lng to function correctly.

  • Important note - mapLibre requires centre markers to be Long:Lat to fit in with the geoJSON format, in contrast to googleMaps using Lat:Long.
    • see: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#center

Static maps ​

Static maps are created and function differently to how googleMaps created them. There is no current option to render a map on the server side and as such a snapshot is needed to be taken when saving the venue.

On saving the venue with the new map system, a cloned map is created off screen and then set to a set of defaults and snapshotted using html2canvas. On the backend, the eventId and promoterId are fetched from the database and StaticMap::createFileName is called. This creates an identifiable filename based on this pattern: $promoterId.'_'.$venueSlug.'_'.$postcode. This file is then uploaded to s3 (bucket: "static-maps-ticketsource"). This static map is currently only in use on the e-tickets and this functionality has not changed much.

GeoCoding ​

Previously Google was used for all geocoding (getting lat/lng from post/zipcode).

A new geo-functions.php file was created to serve as a helper.

The initial call should be to getMapsLatLng that consumes a post/zipcode. This will determine which country the request is from and send on to either ApiNinjas, getAddress or as a fall-back GoogleMaps.

The new data is then added in to the googlemapsCache table in the database. The table name is being kept the same for legacy compatibility with existing systems.

If there is already an entry for the venuePostcode in this table then this process is skipped.