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.

The file-upload control (powered by scripts/leaflet.filelayer.js and the toGeoJSON library) adds a cloud/file icon to the map toolbar. Clicking it opens a native file picker. The selected file is read and parsed entirely within the browser and rendered as a new vector layer on the map. No data is transmitted to a server at any point. Supported formats are GeoJSON, KML, and GPX.

​
Initialisation

The full setup is wrapped in an IIFE inside js/funcionesMapa.js and runs on the window load event so that the Leaflet map object is guaranteed to exist before the control is attached:
js/funcionesMapa.js
(function (window) {
    function initMap() {
        var control;
        var L = window.L;

        var style = {
            color: 'red',
            opacity: 1.0,
            fillOpacity: 1.0,
            weight: 2,
            clickable: false
        };

        L.Control.FileLayerLoad.LABEL = '<img class="icon" src="js/nube.png" alt="file icon"/>';
        control = L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {
                style: style,
                pointToLayer: function (data, latlng) {
                    return L.circleMarker(latlng, { style: style });
                }
            }
        });
        control.addTo(map);
        control.loader.on('data:loaded', function (e) {
            var layer = e.layer;
            console.log(layer);
        });
    }

    window.addEventListener('load', function () {
        initMap();
    });
}(window));
The custom LABEL replaces the default button text with a cloud PNG icon (js/nube.png). Point geometries are rendered as L.circleMarker objects rather than the default pin marker.

​
How to Use It

1

Open the file picker

Click the cloud icon in the map controls panel. Your browser’s native file-selection dialog will open.
2

Select a file

Browse to and select a GeoJSON, KML, or GPX file from your local filesystem. Only one file can be loaded at a time.
3

View the loaded features

The file is parsed in the browser and all features are rendered on the map using a red stroke and fill style. Point features appear as red circle markers.
4

Map auto-fits to the data

Because fitBounds: true is set, the map automatically pans and zooms to the bounding box of the loaded features so every feature is immediately visible.

​
Supported File Formats

FormatExtensionNotes
GeoJSON.geojson, .jsonNative Leaflet vector format; supports Points, LineStrings, Polygons, and feature collections with arbitrary properties.
KML.kmlGoogle Earth / Google Maps export format; converted to GeoJSON internally via the toGeoJSON library before rendering.
GPX.gpxGPS track/waypoint format (e.g. from Garmin, Strava exports); also converted via toGeoJSON. Tracks, routes, and waypoints are all supported.

​
Customising the Loaded Layer Style

The default style uses solid red for both strokes and fills. To change it, modify the style object before the control is initialised: 
// Change the default red style to blue for polygons:
var style = {
    color: '#0066cc',
    opacity: 0.9,
    fillOpacity: 0.3,
    weight: 2
};
Pass the updated object as layerOptions.style when calling L.Control.fileLayerLoad(). The pointToLayer callback can similarly be adjusted to return a different marker type or size for point features.

​
The data:loaded Event

After a file is successfully parsed, the control’s loader emits a data:loaded event. Hook into it to inspect, transform, or register the loaded layer with other parts of the application: 
control.loader.on('data:loaded', function (e) {
    var layer = e.layer;
    // Add the layer to an existing group, run analysis, etc.
    console.log('Loaded features:', layer.getLayers().length);
});
e.layer is a standard Leaflet FeatureGroup containing all parsed features. You can call any Leaflet layer method on it — getBounds(), eachLayer(), toGeoJSON(), and so on.
File processing is entirely client-side. The contents of the file you select are never sent to any server — parsing and rendering happen exclusively inside your browser using the JavaScript FileReader API.
Very large GeoJSON files (tens of thousands of features, or complex high-resolution geometries) may cause the browser to slow down or become temporarily unresponsive while the layer is being rendered. Consider simplifying geometries using a tool such as Mapshaper before loading them into the map.

Build docs developers (and LLMs) love

Get started for freeTalk to us