Problem/Motivation

How would one go about customizing a fields map widget's marker? Currently, they default to the Red Marker for Google and the Blue for Leaflet. But don't see any options within the "form display" page to modify.

Figured this would have been requested before, but I combed through documentation and the issue queue, couldn't find any clarity or direction.

Any help/advice would be greatly appreciated. Thanks!

Comments

ChuckSimply created an issue. See original summary.

itamair’s picture

Status: Active » Fixed

At the moment this feature is not supported by the Geofield Map module Widget form display BE (you cannot change the default Google Maps and Leaflet markers with a Geofield Map Widget BE settings),
BUT you could always add your "flavours" to it, I would say in the following 2 ways:

  1. lighter/easier way: just add your Js alterations to the Map markers, considering that once the specific Geofield Map Widget Map Initialise it triggers a
    geofieldMapInit event
    , passing the mapId as unique parameter, so that you could add your custom js overhead (in your new custom module js library) such:
    // React on geofieldMapInit
          $(context).on('geofieldMapInit', function (event, mapid) {
            let geofieldMap_settings = settings.geofield_map ? settings.geofield_map[mapid] : (settings.geofield_google_map[mapid] ?? []);
            let map = geofieldMap_settings.map ?? geofieldMap_settings['map_settings'].map;
            let marker = geofieldMap_settings.marker ?? null;
              if (marker  && geofieldMap_settings.map_library === 'leaflet') {
               // alter Leaflet Default Marker as you wish
              }
              else if (marker) {
                // alter Google Maps Default Marker as you wish
              }
          });
  2. bolder & more experienced way: in your custom module create your new CustomGeofieldMapWidget that extends the GeofieldMapWidget, that extends the original options, may for the choice of a custom Marker Icon (throughout the buildOptionsForm method) and that eventually (in its render() method) injects your own new js library to handle the way all the Geofield Map and its Marker is rendered ...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.