Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Observatorio-GC/Nodos/llms.txt

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

Every overlay you see in the layer control panel is the result of three coordinated pieces: a GeoJSON data file in scripts/ that exposes your data as a global JavaScript variable, a Leaflet layer variable declared in index.html that wraps that data with display options, and an entry in the groupedOverlays object that registers the layer under a named group in the control panel. All three must be in place before a new dataset appears on the map.
1
Prepare your GeoJSON data file
2
Create a .js file inside the scripts/ directory. The file must assign your GeoJSON object to a global variable — that variable name is how index.html will reference the data.
3
var MisComercios = {
  "type": "FeatureCollection",
  "name": "MisComercios",
  "features": [
    {
      "type": "Feature",
      "properties": { "Nombre": "Librería Central", "Direccion": "Av. San Martín 1234" },
      "geometry": { "type": "Point", "coordinates": [-68.848, -32.925] }
    }
  ]
};
4
Load the script in index.html
5
In the <!-- GEOJSON --> section of index.html (where all the other scripts/ data files are loaded), add a new <script> tag:
6
<script type="text/javascript" src="scripts/MisComercios.js"></script>
7
Keep this alongside the other data script tags so it is loaded before the map initialisation code runs.
8
Create the Leaflet layer variable
9
Inside the <body> script block, in the /* OVERLAYS Y GRUPOS */ section, declare a new Leaflet GeoJSON layer variable. Use pointToLayer to assign an icon factory and onEachFeature to bind a popup:
10
var misComercios = L.geoJson(MisComercios, {
    pointToLayer: crearIconoComercio,
    onEachFeature: agregarPopupfarmacias
});
11
See Icons & Styles for the full list of available pointToLayer factory functions, and Popups for available onEachFeature popup functions.
12
Add to groupedOverlays
13
In the groupedOverlays object, add your new variable under an existing group key or create a new group entirely. The string key you provide here is the label that appears in the layer control panel.
14
Adding to an existing group:
15
"COMERCIO": {
    "Bares y Comidas": bar,
    "Casas de Té y Café": cafe,
    "Heladerías": hela,
    "Farmacias": farmacias,
    "Restaurantes": resto,
    "Hipermercados": hiper,
    "Supermercados": supermer,
    "Mis Comercios": misComercios,  // new entry
},
16
Or create a new group:
17
"MI CATEGORÍA": {
    "Mis Comercios": misComercios,
},

​
Polygon and line layers

Point layers use pointToLayer to render markers, but polygon and line layers skip that option and use setStyle() instead to control colour, fill, and border weight. Chain setStyle() directly on the L.geoJson() call: 
var miPoligono = L.geoJson(MiPoligono, {
    onEachFeature: agregarPopupfarmacias
}).setStyle({
    color: "#0066cc",
    fillOpacity: 0.4,
    weight: 2
});
This is exactly the pattern used throughout index.html for layers such as barrios, barriospopulares, espverdes, and all the node district polygons. The setStyle() method accepts any Leaflet Path options including color, weight, opacity, fillColor, fillOpacity, and dashArray.
GeoJSON files follow the standard RFC 7946 format. You can export from QGIS, geojson.io, or any GIS tool — just wrap the exported object in a var DatasetName = { ... }; variable assignment before saving it as a .js file in scripts/.
Every data file must use a unique global variable name. If two script files assign to the same name (e.g. both use var Barrios = ...), the second file will silently overwrite the first and only the last-loaded dataset will be visible on the map. Check existing variable names in the <!-- GEOJSON --> section of index.html before naming a new dataset.

Build docs developers (and LLMs) love

Get started for freeTalk to us