Skip to main content
Known Participant
December 4, 2025
Question

How to build an interactive map in Appian where users can add pins by clicking and view all active parking locations?

  • December 4, 2025
  • 3 replies
  • 8 views
I need guidance on designing an Appian dashboard that displays a live, interactive map showing pins for all active parking locations. Each parking location has latitude and longitude, but these coordinates should come from user input by clicking on the map through a create form in Appian.
What is the best approach in Appian to embed an interactive map that supports both:
  • Displaying existing pins from stored data.
  • Capturing new coordinates when a user clicks on the map?

Please anyone Assist me.

3 replies

Inspiring
December 4, 2025

You can use one of the following plugins:

Appian Community

Appian Community

Both of them would need valid credentials

shubhama926776
Brainy
December 5, 2025
Known Participant
December 9, 2025

Get value is not working, please suggest ....

a!localVariables(
  local!lat: null,
  local!lon: null,
  local!address: null,
  local!reverseGeoResult,

  a!formLayout(
    titleBar: "OSM Click → Get Coordinates + Reverse Geocode",
    contents: {

     
      /* ---------- MAP FIELD ---------- */
      /*osmMapsField(*/
        /*label: "OpenStreetMap",*/
        /*labelPosition: "ABOVE",*/
        /*height: "AUTO",*/
/**/
        /* Center map at India (sample) */
        /*mapCenter: a!map(*/
          /*latitude: 28.6139,*/
          /*longitude: 77.2090*/
        /*),*/
        /*zoomLevel: 5,*/
        /*enableMapInteraction: true,*/
        /*showLatLangInPopup: true,*/
/**/
        /* MAIN PART â`” GET CLICK COORDINATES */
        /*onClick: {*/
          /*a!save(local!lat, {{ fv!item.lat }}),*/
          /*a!save(local!lon, {{ fv!item.lon }}),*/
          /*a!save(local!address, null)*/
        /*},*/
/**/
        /* Other optional parameters (keep null unless needed) */
        /*data: null,*/
        /*hideExceptZoomButton: null,*/
        /*enablePolygonDraw: null,*/
        /*enableWatermark: null,*/
        /*enableMarkerColorChange: null,*/
        /*markerSelectedColor: null,*/
        /*clusterConfiguration: null,*/
        /*mapHeight: null,*/
        /*graphHopperKey: null,*/
        /*currentPosition: null,*/
        /*attribution: null,*/
        /*tile: null,*/
        /*maxMarkerCount: null,*/
        /*mode: "mapOnly",*/
        /*poi: null,*/
        /*customActions: null,*/
        /*onRouteChange: null,*/
        /*onLocationShare: null,*/
        /*onPOIFound: null,*/
        /*onRegionSelected: null,*/
        /*onCustomActionSelected: null,*/
        /*showFilterOn: null,*/
        /*OnMarkerClick: null*/
      /*),*/
      osmMapsField(
        label: "Pin Location",
        mapCenter: {
          latitude: 28.6139,
          longitude: 77.2090
        },
        zoomLevel: 10,
        OnMarkerClick: {
          a!save(local!lat, fv!value.lat),
          a!save(local!lon, fv!value.lon)
        },
        onClick: {
          a!save(local!lat, fv!value.lat),
          a!save(local!lon, fv!value.lon)
        }
      ),

      /* ---------- SECTION: LAT/LON ---------- */
      a!sectionLayout(
        label: "Coordinates",
        contents: {
          a!textField(
            label: "Latitude",
            readOnly: true,
            value: local!lat
          ),
          a!textField(
            label: "Longitude",
            readOnly: true,
            value: local!lon
          )
        }
      ),

      /* ---------- BUTTON: REVERSE GEOCODE ---------- */
      a!buttonLayout(
        primaryButtons: {
          a!buttonWidget(
            label: "Get Address",
            style: "SOLID",
            disabled: or(
              isnull(local!lat),
              isnull(local!lon)
            ),
            saveInto: {
              /* CALL API INTEGRATION RULE */
              a!save(
                local!reverseGeoResult,
                rule!KRS_OSM_Reverse(
                  lat: local!lat,
                  lon: local!lon
                )
              ),

              /* Extract display_name from JSON response */
              a!save(
                local!address,
                index(
                  local!reverseGeoResult,
                  "body.display_name",
                  null
                )
              )
            }
          )
        }
      ),

      /* ---------- SECTION: ADDRESS ---------- */
      a!sectionLayout(
        label: "Location Address",
        contents: {
          a!paragraphField(
            label: "Address",
            readOnly: true,
            value: local!address
          )
        }
      )
    }
    
  )
)