Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CspmIT/mas-agua-front/llms.txt

Use this file to discover all available pages before exploring further.

Mas Agua’s mapping feature allows you to visualize geographic locations with interactive markers that display real-time data from InfluxDB variables.

​
Overview

The mapping system enables you to:
  • Create interactive maps centered on specific coordinates
  • Add markers at precise latitude/longitude positions
  • Associate InfluxDB variables with each marker for real-time data display
  • Edit and manage existing maps
  • View maps with live data updates

​
Accessing Maps Management

1

Navigate to Maps List

Go to /maps to view all existing maps in your system.
2

Review Map Information

The maps table displays:
  • ID: Unique map identifier
  • Nombre: Map name
  • Latitud: Center latitude coordinate
  • Longitud: Center longitude coordinate
  • Creado el: Creation timestamp
  • Acciones: Edit button

​
Creating a New Map

1

Start Map Creation

From /maps, click the “Crear mapa” button. This navigates to /map/create.
2

Configure Initial View

The map initializes with default coordinates:
  • Latitude: -30.716256365145455
  • Longitude: -62.005196197872266
  • Zoom level: 14
Use the map controls to pan and zoom to your desired starting view.
3

Add Your First Marker

In the marker configuration panel at the top:
  1. Nombre del marcador: Enter a descriptive name for the marker
  2. Latitud: Enter the latitude coordinate (required)
  3. Longitud: Enter the longitude coordinate (required)
  4. Seleccione una variable: Choose an InfluxDB variable to display at this location
  5. Click “Agregar Marcador”
4

Add Additional Markers

Repeat the process to add more markers. Each marker must have:
  • A unique name (duplicate names are not allowed)
  • Valid latitude coordinate
  • Valid longitude coordinate
  • An associated InfluxDB variable
5

Adjust Map View

Pan and zoom the map to frame all your markers optimally. The current view state (position, zoom, bearing, pitch) will be saved.
6

Save the Map

Click the “Guardar” button. A dialog will prompt you to enter a map name.Enter a descriptive name and click “Guardar” to create the map.
You must add at least one marker before saving a map. The system validates this requirement.

​
Understanding Marker Configuration

Each marker stores: 
// Marker structure from src/modules/Map/Views/MapView.jsx:35-47
{
  name: "Marker Name",
  latitude: -30.716256,
  longitude: -62.005196,
  popupInfo: {
    lat: -30.716256,
    lng: -62.005196,
    idVar: 123,  // InfluxDB variable ID
    data: null   // Populated with variable metadata
  }
}

​
Editing Existing Maps

1

Open Map Editor

From /maps, find your map in the table and click “Editar”. This navigates to /map/edit?id={mapId}.
2

Review Current Configuration

The editor loads:
  • Current map name in the header
  • All existing markers on the map
  • Saved view state (position and zoom)
3

Modify Markers

  • Add new markers using the configuration panel
  • Drag existing markers if draggable={true} is enabled
  • Update marker variables and names as needed
4

Adjust Map View

Pan and zoom to update the default view for this map.
5

Save Changes

Click “Guardar”. You can update the map name if desired, then confirm to save.

​
Viewing Maps with Live Data

1

Access Map View

Navigate to /map?id={mapId} to view a map in read-only mode with live data.
2

Interact with Markers

Click on any marker to view:
  • Marker name
  • Current variable value
  • Associated variable metadata
In view mode, markers are not draggable and display real-time data from InfluxDB. This provides a live monitoring dashboard for geographically distributed sensors.

​
Map Component Architecture

The mapping system uses several components:
  • MapBase (src/modules/Map/Components/MapBase.jsx): Core map rendering component
  • Pin (src/modules/Map/Components/Pin.jsx): Individual marker component
  • ControlPanel (src/modules/Map/Components/ControlPanel.jsx): Map controls overlay

​
MapBase Props

Key configuration options: 
<MapBase
  height="100%"           // Map container height
  markers={markers}       // Array of marker objects
  setMarkers={setMarkers} // Update function
  viewState={viewState}   // Camera position/zoom
  setViewState={setViewState}
  controlPanel={true}     // Show/hide controls
  draggable={true}        // Enable marker dragging
  withInfo={false}        // Show info popups
/>

​
Variable Selection

The variable selector uses the SelectVars component:
1

Click Variable Selector

In the marker configuration, click the “Seleccione una variable” dropdown.
2

Browse Available Variables

The selector displays all available InfluxDB variables configured in your system.
3

Select Variable

Choose the variable that will provide data for this marker location.

​
Best Practices

​
Marker Placement

Ensure latitude and longitude coordinates are accurate. Incorrect coordinates will place markers in wrong locations.
  • Use precise coordinates (6+ decimal places for meter-level accuracy)
  • Verify coordinates before saving (use online tools like Google Maps)
  • Group related markers on the same map
  • Use descriptive marker names that indicate location or equipment

​
Map Organization

  • Create separate maps for different geographic areas or systems
  • Use consistent naming conventions for markers
  • Set appropriate default zoom levels to show all markers
  • Center maps to display all important markers in the default view

​
Variable Assignment

  • Associate each marker with its most relevant variable
  • Ensure variables are actively receiving data before deployment
  • Use variables with appropriate update frequencies for your use case
  • Consider variable units and display formatting

​
Advanced Features

​
View State Configuration

The view state controls map camera: 
{
  longitude: -62.005196,  // Center longitude
  latitude: -30.716256,   // Center latitude
  zoom: 14,               // Zoom level (0-22)
  bearing: 0,             // Rotation angle
  pitch: 0                // Tilt angle
}

​
Marker Validation

The system validates:
  • Unique marker names per map
  • Required fields (name, lat, lng, variable)
  • Valid coordinate ranges
  • Variable existence

​
Troubleshooting

Marker not appearing
  • Check that latitude/longitude are valid numbers
  • Verify coordinates are within expected ranges (-90 to 90 for lat, -180 to 180 for lng)
  • Ensure marker was successfully added to the markers array
“El marcador ya existe” error
  • Each marker name must be unique within a map
  • Choose a different name or edit the existing marker
“Debe haber al menos un marcador” error
  • Maps require at least one marker
  • Add markers before attempting to save
Map not loading in edit mode
  • Verify the map ID in the URL is correct
  • Check browser console for errors
  • Ensure backend API is accessible
Variable data not displaying
  • Confirm the variable is active and receiving data
  • Check InfluxDB connection
  • Verify variable permissions and access
Cannot save map changes
  • Ensure all required fields are filled
  • Check for validation errors in form fields
  • Verify you have edit permissions

​
Use Cases

Infrastructure Monitoring
  • Map pump stations with flow rate variables
  • Track tank levels across multiple locations
  • Monitor pressure at distribution points
Environmental Monitoring
  • Display temperature sensors across a facility
  • Track water quality at multiple sampling points
  • Monitor rainfall at different zones
Asset Tracking
  • Show equipment status at various sites
  • Display real-time metrics from remote sensors
  • Monitor distributed control systems

Build docs developers (and LLMs) love

Get started for freeTalk to us