Quick start
The example below, running in the Mappia calculator - click it to run it live. Full-size picture
- Run it
Click the picture: the map opens right here and runs the example. Nothing is saved, and nothing to install.
- Try it
- Find the two orange areas and point C drawn over Brazil from the inline GeoJSON.
- Change a coordinate inside
jsonand run it again: that shape moves on the map. - Delete the
fromProjline and run it again: the shapes are no longer over Brazil.
- 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.
- More ways to use it
Key parameters
| Parameter | Example | What it does |
|---|---|---|
source | file | Makes the layer hold vector features drawn in the browser, instead of map images from a server. |
type | json | How features are loaded: json inline, geojsonurl or csv from url, empty to fill later, load with your own loader. |
json | { type: "FeatureCollection", features: [...] } | The inline data for type: "json": a GeoJSON object, or an array of plain objects with lon and lat. |
url | https://example.com/data/areas.geojson | The file fetched by the geojsonurl, csv and jsonurl types; relative paths resolve on the Mappia server. |
name | inline_areas | A unique identifier for the layer; use it to find the layer again from your code. |
Every parameter, with its type and default, is in the reference at the end of this page.
Complete example
The query 24 lines · runs as is
// File layer: features from inline GeoJSON (type json). Declare fromProj - GeoJSON without a
// crs is otherwise read in the platform's default projection and lands in the wrong place.
[
{
title: "Inline GeoJSON",
name: "inline_areas",
source: "file",
type: "json",
fromProj: "EPSG:4326",
visibility: true,
json: {
type: "FeatureCollection",
features: [
{ type: "Feature", properties: { name: "Area A" },
geometry: { type: "Polygon", coordinates: [[[-48, -16], [-44, -16], [-44, -20], [-48, -20], [-48, -16]]] } },
{ type: "Feature", properties: { name: "Area B" },
geometry: { type: "Polygon", coordinates: [[[-56, -6], [-50, -2], [-50, -10], [-56, -6]]] } },
{ type: "Feature", properties: { name: "Point C" },
geometry: { type: "Point", coordinates: [-40.5, -12] } },
],
},
defaultStyle: { fillColor: "#e67e22", fillOpacity: 0.5, strokeColor: "#a84300", strokeWidth: 2, pointRadius: 8 },
},
];More examples
Other ways to use JSON file source Layer, each a complete query that runs as is - like the one above.
Points from a CSV file
Each row becomes a point at its coord_x / coord_y, with the other columns as its attributes, and close points are grouped into clusters.
Click the picture to run it live. Full-size picture
The query 29 lines · runs as is
// Points from a CSV file: each row becomes a point at its coord_x / coord_y, with the other columns as its attributes, and close points are grouped into clusters.
// type csv fetches the file at url; coordinates names the two columns; clusterDistance (pixels)
// groups points closer than that into one symbol, whose count attribute the label shows.
// Zoom in to split the clusters.
[
{
title: "Listings from a CSV file",
name: "csv_listings",
source: "file",
type: "csv",
url: "/theme/app/data/teste_csv_points.csv", // coord_x,coord_y,size,address,price,type,...
coordinates: { x: "coord_x", y: "coord_y" },
fromProj: "EPSG:4326",
clusterDistance: 45,
visibility: true,
defaultStyle: {
graphicName: "circle",
pointRadius: 13,
fillColor: "#16a085",
fillOpacity: 0.9,
strokeColor: "#ffffff",
strokeWidth: 2,
label: "${count}", // how many rows the symbol stands for
fontColor: "#ffffff",
fontSize: "11px",
fontWeight: "bold",
},
},
];A GeoJSON file, labelled
Type geojsonurl loads a GeoJSON file by URL, and ${…} in the style writes an attribute of each feature on the map - here the regions of Belo Horizonte.
Click the picture to run it live. Full-size picture
The query 25 lines · runs as is
// A GeoJSON file, labelled: type geojsonurl loads a GeoJSON file by URL, and ${...} in the style writes an attribute of each feature on the map - here the regions of Belo Horizonte.
// The file has no crs member, so fromProj says its coordinates are longitude / latitude.
[
{
title: "Regions of Belo Horizonte",
name: "bh_regions",
source: "file",
type: "geojsonurl",
url: "/theme/app/data/regioes.geojson", // properties: NOME_REGIO, SIGLA_REGI, ID_REGIONA
fromProj: "EPSG:4326",
visibility: true,
defaultStyle: {
fillColor: "#8e44ad",
fillOpacity: 0.2,
strokeColor: "#5b2c6f",
strokeWidth: 2,
label: "${NOME_REGIO}",
fontSize: "13px",
fontWeight: "bold",
fontColor: "#2c3e50",
labelOutlineColor: "#ffffff",
labelOutlineWidth: 3,
},
},
];Customize it
Always say which projection the data uses
GeoJSON without a crs member is read in the platform’s default projection, Web Mercator metres (EPSG:900913). Longitude and latitude read that way land in the wrong place, with no error. Add fromProj: "EPSG:4326" to the layer for longitude/latitude data, as the example does, or put a crs in the GeoJSON. To set it once for every vector layer of the query, chain ExtjsUtils.CONFIGURATION.setOptions({ defaultFromProj: "EPSG:4326" }) before the layer list.
GeoJSON coordinates go longitude first: [-44, -19], not [-19, -44].
Load features from a file
type | Where the features come from |
|---|---|
json (the default) | The inline json: GeoJSON, or an array of plain objects |
geojsonurl | A GeoJSON file at url |
csv | A CSV file at url, one point per line |
jsonurl | A JSON array of plain objects at url |
empty | Nothing yet; you add features later from code |
load | Your own loadData(inputs, config) function |
For CSV lines and plain objects, each entry becomes a point read from its lon and lat fields, and the other fields become its attributes. If your fields have other names, map them with coordinates: { x: "longitude", y: "latitude" }.
Style the features
defaultStyle takes OpenLayers style properties: fillColor, fillOpacity, strokeColor, strokeWidth, pointRadius. selectStyle styles a clicked feature and needs an onClick callback; hoverStyle styles a hovered one and needs an onHover callback.
React to a click
popupTemplate and popupCallback are accepted but never read: no popup opens. Use onClick, which receives the clicked feature with its GeoJSON properties in attributes:
{
name: "farms",
source: "file",
type: "geojsonurl",
url: "https://example.com/data/farms.geojson",
fromProj: "EPSG:4326",
onClick: function (feature) {
ExtjsUtils.ALERTIFY.log("You clicked " + feature.attributes.name);
},
onAdded: function () {
ExtjsUtils.JS.getMap().zoomToExtent(this.getDataExtent()); // zoom to the data
},
}
onAdded runs once the layer is on the map and its features are loaded, which makes it the place to zoom to them.
Many points
Set clusterDistance: 40 to group points closer than 40 pixels into one symbol. Each cluster carries the number of points it holds in attributes.count.
Change the data later
Start with type: "empty" and add features when you have them, for example from a message sent by the page that embeds the map (MappiaIO):
ExtjsUtils.LAYER.getLayerByName("farms").loadGeojson(geojson, "EPSG:4326");
To draw a marker or a highlight that should not appear in the layer panel, use an overlay layer instead.
