Quick start

The example below, running in the Mappia calculator - click it to run it live. Full-size picture

1. Run it

   Click the picture: the map opens right here and runs the example. Nothing is saved, and nothing to install.

2. Try it
   • Click the Shapefile field and pick a .shp file in latitude/longitude (EPSG:4326): its shapes are drawn on the map.
3. Make it yours

   Copy the query, change it - the key parameters are below - and run it again in the playground, or paste it into the Mappia editor to save it as your map.

Key parameters

Parameter	Example	What it does
id	loadshp	Names the field: inputs.id['loadshp']() returns the chosen File, or undefined before the user picks one.
eventNames	_onChange=onSelectFile	Runs a function on a field event: write _on plus the event name. _onChange fires when the user picks a file.
fieldLabel	Shapefile (.shp)	Label shown at the left of the file picker.
ignoreUpdate	true	Stops a new file from recalculating the layer. Your _onChange function still runs.
value	inputs.id['loadshp']()	What the input holds: a function that returns the file, not the file itself. Call it on the page only.

Every parameter, with its type and default, is in the reference at the end of this page.

Complete example

The query 22 lines · runs as is

// FileField: a local file picker. Its input value is a getter: inputs.id[ID]() returns the File.
[
  {
    title: "Upload a shapefile",
    name: "uploaded_shapefile",
    source: "file",
    type: "empty",
    visibility: true,
    paramsButtonConfig: [{ type: "query", pressed: true }],
    descriptionHtml:
      "{{label|text=Load a shapefile (.shp) to draw it on the map}}" +
      "{{filefield|id=loadshp|fieldLabel=Shapefile (.shp)|_onChange=onSelectFile}}",
    functions: {
      onSelectFile: function () {
        var file = this.getInputs().id["loadshp"]();
        if (file) {
          ExtjsUtils.GEOJSON.shapefile2GeojsonAsync(file, { layer: this, fromProj: "EPSG:4326" });
        }
      },
    },
  },
];

Customize it

Read the file

Call the input: inputs.id["loadshp"]() in beforeCalc, or this.getInputs().id["loadshp"]() in a function of the layer (an _onChange callback, a button handler). this is the layer in both. You get the browser’s own File object, the first one selected, or undefined.

Draw a shapefile

ExtjsUtils.GEOJSON.shapefile2GeojsonAsync(file, options) reads the file and adds its shapes to the layer given as options.layer, as in the example. Things to know:

• It reads a bare .shp file. It does not open a .zip.
• The coordinates must be in EPSG:4326 (latitude/longitude) or EPSG:900913, and fromProj says which. A .shp file does not carry its projection; a wrong fromProj puts the shapes in the wrong place.
• To keep the attributes, let the user pick the .dbf in a second file field and pass that file as dbf.
• limitCount caps how many shapes are read.

Other kinds of file

For a CSV, a JSON file or an image, read the File yourself with the browser’s file API in the callback, for example file.text().then(function (text) { ... }). To load a CSV or JSON from a URL instead, use LoadCsv or LoadJson.

Pitfalls

• inputs.id["loadshp"] without () is the function, not the file.
• The file never reaches expression. The field still takes a position in inputs, so count it when you read other inputs by position there.
• _on<event> names ignore case: _onchange and _onChange are the same. Any event of the field works, for example _onFocus.

Reference: every parameter

Generated from the platform source. Every entry, searchable, is in the API reference; the raw data is api.json. Open an entry for its description, parameters and example; # links to it.

filefield · open a local file (input)

FileField7 entries

Written in a layer's descriptionHtml as {{filefield|parameter=value|...}}

Tool that allows handle and local files.
PS: This object cannot be sent to 'expression'.
Usage: {{filefield|fieldLabel=loadshp|id=loadshp|_onChange=function(){alert('changed')}}}

View all FileField documentation API here.

eventNames

Array.<string># Defines the list of events by name.

Defines the list of events by name. Use this property to define callback functions to any of the following events.

['added', 'afterrender', 'beforedestroy', 'beforehide', 'beforerender', 'beforeshow', 'beforestaterestore',
'beforestatesave', 'blur', 'change', 'destroy', 'disable', 'enable', 'focus', 'hide', 'invalid', 'move', 'removed', 'render',
'resize', 'show', 'specialkey', 'staterestore', 'statesave', 'valid']

fieldLabel

String# Defines the label shown at the left of the file input (Ext fieldLabel).

Defines the label shown at the left of the file input (Ext fieldLabel). hideLabel=true removes the label and its reserved space; other Ext.form.Field configs are passed through unchanged.

|fieldLabel=Load a shapefile (.zip)|

hideLabel

Boolean= false# Set true to hide the label element and the space reserved for it.

Set true to hide the label element and the space reserved for it.

|hideLabel=true|

id

String# Defines the id of the input; it is the key used in inputs.id[ID] and the id of the Ext field (Ext.getCmp(id)), so it must be unique in the page.

Defines the id of the input; it is the key used in inputs.id[ID] and the id of the Ext field (Ext.getCmp(id)), so it must be unique in the page.

|id=loadshp|

ignoreUpdate

Boolean= false# Defines if it should ignore the widget change event.

Defines if it should ignore the widget change event. If it's false, it dispatches the update event at every file selection.

inputType

String= file# The HTML input type.

The HTML input type. It is always forced to file by the tool, so a value written in the markup is ignored (documented only to explain why it cannot be changed).

value

function# Value stored in inputs.id[ID]: not the file itself but a getter function.

Value stored in inputs.id[ID]: not the file itself but a getter function. Call it — inputs.id[ID]() — to obtain the selected File (the first entry of the DOM files list) or undefined when nothing is selected. It is a function so the value can never be serialized to the calculation WebWorker (expression); read it in beforeCalc, in a _onchange= callback or in a button handler. The layer recalculates on the change event of the input (a new file chosen) unless ignoreUpdate=true.

{{filefield|fieldLabel=loadshp|id=loadshp|_onChange=onSelectFile}}

functions: {
    onSelectFile: function() {
        var file = this.getInputs().id['loadshp']();
        if (file) ExtjsUtils.GEOJSON.shapefile2GeojsonAsync(file, {layer: this, fromProj: 'EPSG:4326'});
    }
}