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

kavitar5580

Certified Senior Developer

6 days ago

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.

Discussion posts and replies are publicly visible

Parents

0 Shubham Aware
Certified Lead Developer
5 days ago

It's well explained it here
https://www.youtube.com/watch?v=sDcABNfyhDc&t=3s
https://community.appian.com/b/appmarket/posts/google-maps-component-plug-in
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel

0 kavitar5580

Certified Senior Developer

23 hours ago in reply to Shubham Aware

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
          )
        }
      )
    }
    
  )
)

Reply

0 kavitar5580

Certified Senior Developer

23 hours ago in reply to Shubham Aware

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
          )
        }
      )
    }
    
  )
)

Children

No Data