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
- Move the pointer over a blue point: it grows and turns orange, and the panel says which point it is.
- Click it: the point turns red and the panel shows its name and coordinates.
- Click another point: the first one turns blue again and the new one turns red.
- 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 |
|---|---|---|
onClick | function (feature) { Ext.getCmp("clicked_point").setText(feature.attributes.name); } | Runs when the user selects a feature; feature.attributes holds its properties and this is the layer. |
defaultStyle | { graphicName: "circle", pointRadius: 12, fillColor: "#2980b9" } | How every feature is drawn: OpenLayers style properties such as fillColor, strokeWidth, pointRadius, label. |
selectStyle | { pointRadius: 15, fillColor: "#e74c3c" } | Style of the selected feature. Only the properties that change are needed; the rest comes from defaultStyle. |
onHover | function (feature, entering) { } | Runs when the pointer enters (entering true) or leaves (entering false) a feature. Also switches on the hover style. |
hoverStyle | { pointRadius: 15, fillColor: "#f39c12" } | Style of the feature under the pointer. Shown only when the layer also has onHover. |
clusterDistance | 40 | Groups points closer than this many pixels into one symbol; 0 (the default) never clusters. |
Every parameter, with its type and default, is in the reference at the end of this page.
Complete example
The query 32 lines · runs as is
// Clicking and hovering features: onClick receives the clicked feature (here its attributes
// are written in the panel) and selectStyle marks it; onHover runs when the pointer enters and
// leaves a feature (here it names it in the panel) and hoverStyle - which needs an onHover -
// marks it. The points file ships with the platform. (popupTemplate is accepted but opens
// nothing: use onClick.)
[
{
title: "Example points",
name: "example_points",
source: "file",
type: "jsonurl",
url: "/theme/app/data/points_example.json", // [{"lon":-50,"lat":-10,"name":"name1"}, ...]
coordinates: { x: "lon", y: "lat" },
fromProj: "EPSG:4326",
visibility: true,
paramsButtonConfig: [{ type: "query", pressed: true }],
descriptionHtml:
"{{label|id=hovered_point|text=Point at a feature to see its name.}}<br>" +
"{{label|id=clicked_point|text=Click a feature to select it.}}",
onClick: function (feature) {
var point = feature.attributes;
Ext.getCmp("clicked_point").setText("Selected " + point.name + ": longitude " + point.lon + ", latitude " + point.lat);
},
onHover: function (feature, entering) {
var label = Ext.getCmp("hovered_point");
if (label) label.setText(entering ? "Pointing at " + feature.attributes.name : "Point at a feature to see its name.");
},
defaultStyle: { graphicName: "circle", pointRadius: 12, fillColor: "#2980b9", fillOpacity: 0.9, strokeColor: "#ffffff", strokeWidth: 2 },
hoverStyle: { pointRadius: 15, fillColor: "#f39c12" },
selectStyle: { pointRadius: 15, fillColor: "#e74c3c" },
},
];Customize it
Show the attributes
onClick(feature, source, inputs) runs when a feature is selected; feature.attributes holds its properties. popupTemplate and popupCallback are accepted but never read, so no popup opens. Show what you need from onClick, with a notification (ExtjsUtils.ALERTIFY.log) or your own HTML.
Selection
- Clicking a feature selects it and unselects the previous one; clicking an empty part of the map unselects it.
onClickCfg: { multiple: true }keeps several features selected at once;onClickCfg: { toggle: true }unselects a feature when it is clicked again.onClickruns only on select. When you also need to know about the unselect, useonSelectionTogglein its place: the same function runs for both, its fourth argument is"select"or"unselect", and clicking a selected feature again unselects it.- From code,
this.selectControllerselects for you:select(feature),unselect(feature),unselectAll(), for example to highlight a feature chosen in a list (this.findFeatureById(id)finds it).
Hover
The hover highlight is switched on only when the layer has an onHover callback, so a hoverStyle alone never shows. An empty function is enough:
onHover: function (feature, state) {
// state: true when the pointer enters the feature, false when it leaves
},
hoverStyle: { pointRadius: 11, fillColor: "#f39c12" },
hoverSelectedStyle styles a selected feature under the pointer; it needs both onClick and onHover.
Styles from the data
A ${name} placeholder in a style is replaced by the feature’s name attribute, so label: "${name}" writes each name on the map. With a context, placeholders are taken from the context instead: functions that receive the feature and return the value.
defaultStyle: {
pointRadius: 8,
fillColor: "${colorOf}",
context: {
colorOf: function (feature) { return feature.attributes.lon < -50 ? "#16a085" : "#2980b9"; }
}
},
Many points: clusters
With clusterDistance, a click on a group passes the cluster itself: feature.attributes.count is the number of points in it and feature.cluster the points. To group by an attribute or change the distance with the zoom, use cluster with distance and clusterKey functions; see File source layers.
Pitfalls
- Write the callbacks as regular
functions, not arrow functions:thisis the layer. - The callbacks belong to
source: "file"layers (GeoJSON, JSON, CSV, drawn shapes). For maps served as images, use Pickpoint or Hoverpixel.
