How can i pass data from app to custom components

Queries and Resources
1

hi,

how can i pass data from app to custom components

in the below code i have to pass latlong values from app so i can set latlong dynamically in code .setLngLat([])

please give explanation or solution not documentation link

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a default marker to a web map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken ='TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [77.638811,12.908158],
        zoom: 15
    });

    // Create a default Marker and add it to the map.
    const marker1 = new mapboxgl.Marker()
        **.setLngLat([])**
        .addTo(map);

    // Create a default Marker, colored black, rotated 45 degrees.
</script>

</body>
</html>
2

Hey @Chandu,

first of all, here's the doc for this use-case :stuck_out_tongue:

Now, to pass data from retool to your custom component you'll need to use the model input of the component and give it an object with the data you want. It would look something like this:

{
  lat: 77.638811,
  long: 12.908158
}

Pure JavaScript that isn't React code needs window.Retool to update models, trigger queries, or listen to new values injected into your model.

The relevant methods are modelUpdate, triggerQuery, and subscribe which would look like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Add a default marker to a web map</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  
  <script>
    window.Retool.subscribe(function(model) {
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      mapboxgl.accessToken ='TOKEN';

      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [77.638811,12.908158],
        zoom: 15
      });
      
      // Create a default Marker and add it to the map.
      const marker1 = new mapboxgl.Marker()
      .setLngLat([model.lat, model.long])
      .addTo(map);
    })
  </script>
  
</body>
</html>

Does that help at all?

3

works perfectly!!!Thank you :smiley:

1 Like