Visualizing data
Contents
Data is visualized on the map using sources and layers. Add a <GeoJSONSource> as a child of <Map>, then nest one or more <Layer> components to style the data.
Creating a GeoJSON source
import {
Camera,
GeoJSONSource,
Layer,
Map,
TrimbleMaps,
} from "@trimblemaps/maps-react-native";
const geojson: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [-74.006, 40.7128] },
properties: {},
},
],
};
<Map mapStyle={TrimbleMaps.StyleURL.MobileDay} style={{ flex: 1 }}>
<Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12 }} />
<GeoJSONSource id="dots" data={geojson}>
<Layer
id="dots-circle"
type="circle"
paint={{
"circle-radius": 8,
"circle-color": "#0063A3",
"circle-stroke-width": 2,
"circle-stroke-color": "#ffffff",
}}
/>
</GeoJSONSource>
</Map>
After the map loads, use a Camera ref with fitBounds to frame your data.
Circle layer (dots on a map)
Use type="circle" for point features:
<Layer
id="dots-circle"
type="circle"
paint={{
"circle-radius": 8,
"circle-color": "#0063A3",
}}
/>
Line layer
Use type="line" for LineString or MultiLineString features:
<GeoJSONSource id="lines" data={lineGeoJSON}>
<Layer
id="route-line"
type="line"
paint={{
"line-color": "#0063A3",
"line-width": 3,
}}
/>
</GeoJSONSource>
Use a GeoJSON.FeatureCollection with one or more LineString features. Example lineGeoJSON (same data as Lines on a Map):
const lineGeoJSON: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-119.091796875, 44.08758502824516],
[-108.80859375, 44.213709909702054],
[-114.2578125, 44.213709909702054],
[-113.90625, 36.31512514748051],
],
},
},
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-111.09374999999999, 36.94989178681327],
[-111.357421875, 42.5530802889558],
[-107.138671875, 41.83682786072714],
[-108.10546875, 39.36827914916014],
[-111.005859375, 39.30029918615029],
[-108.017578125, 36.80928470205937],
],
},
},
],
};
Fill layer
Use type="fill" for Polygon or MultiPolygon features:
<GeoJSONSource id="fill-polygon" data={polygonGeoJSON}>
<Layer
id="fill-polygon-layer"
type="fill"
paint={{
"fill-color": "#000000",
"fill-opacity": 0.5,
"fill-outline-color": "#000000",
}}
/>
</GeoJSONSource>
Example polygonGeoJSON:
const polygonGeoJSON: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[-74.703, 40.365],
[-74.655, 40.365],
[-74.655, 40.338],
[-74.703, 40.338],
[-74.703, 40.365],
],
],
},
},
],
};
Symbol layer
Display custom icons with type="symbol". Register images with the <Images> component:
import { GeoJSONSource, Images, Layer } from "@trimblemaps/maps-react-native";
const MARKER_ICON = "marker-icon";
<Images images={{ [MARKER_ICON]: require("./assets/marker.png") }} />
<GeoJSONSource id="symbols" data={pointGeoJSON}>
<Layer
id="symbols-layer"
type="symbol"
layout={{
"icon-image": MARKER_ICON,
"icon-size": 1,
"icon-allow-overlap": true,
}}
/>
</GeoJSONSource>
Example pointGeoJSON (one point per symbol):
const pointGeoJSON: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: { type: "Point", coordinates: [-74.006, 40.7128] },
},
{
type: "Feature",
properties: {},
geometry: { type: "Point", coordinates: [-118.2437, 34.0522] },
},
],
};
Data-driven styling
Layer paint properties accept style expression arrays (Mapbox GL–compatible syntax). Style features by a property value:
<Layer
id="states-circle"
type="circle"
paint={{
"circle-radius": 10,
"circle-color": [
"match",
["get", "state"],
"PA", "#0063A3",
"NJ", "#E87722",
"NY", "#4CAF50",
"#cccccc",
],
}}
/>
Each feature in the GeoJSON should include the referenced property (for example "state": "PA"). Example source data (subset of Data driven styling):
const geojson: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [-74.68954, 41.369863] },
properties: { state: "NY" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-74.687007, 41.349811] },
properties: { state: "NJ" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-74.704292, 41.364475] },
properties: { state: "PA" },
},
],
};