Dots on a map
Contents
Visualize data on top of the map. Data could vary from simple dots-on-a-map (the example below) to more complex pieces like 3D buildings, route paths, geofences, and more.
activity_sample_dots_on_a_map.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent">
<com.trimblemaps.mapsdk.maps.MapView
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Sample Code
import React, { useEffect, useRef } from "react";
import {
Dimensions,
NativeModules,
NativeEventEmitter,
PixelRatio,
StyleSheet,
UIManager,
View,
findNodeHandle,
Text,
} from "react-native";
import { MapViewManager } from "./MapViewManager";
const CameraPositionModule = NativeModules.CameraPositionModule;
const MapViewModule = NativeModules.MapViewModule;
const StyleManagerModule = NativeModules.StyleManagerModule;
const GeoJsonSourceModule = NativeModules.GeoJsonSourceModule;
const CircleLayerModule = NativeModules.CircleLayerModule;
const StyleConstants = StyleManagerModule?.getConstants();
const CircleConstants = CircleLayerModule?.getConstants();
export const DotsOnAMap = () => {
const ref = useRef(null);
const createMapViewFragment = (viewId) =>
UIManager.dispatchViewManagerCommand(
viewId,
UIManager.MapViewManager.Commands.create.toString(),
[viewId]
);
let circleLayerId = "CircleLayerId";
let circleLayer = "CircleLayer";
const drawOnMap = async (viewId) => {
await MapViewModule.setMapView(String(viewId));
MapViewModule.getMapAsync(() => {
MapViewModule.setStyleWithCallback(
StyleConstants.MOBILE_NIGHT,
async (mapViewFragmentTag) => {
await StyleManagerModule.addStyle(String(viewId));
await GeoJsonSourceModule.createGeoJsonSourceFromUri(
circleLayer,
"asset://tristate.json"
);
await StyleManagerModule.addSourceToStyle(
String(viewId),
circleLayer
);
let circleProperties = {};
circleProperties[CircleConstants.RADIUS] = 4;
circleProperties[CircleConstants.COLOR] = "#FFFFFF";
circleProperties[CircleConstants.STROKE_COLOR] = "#FF0000";
circleProperties[CircleConstants.STROKE_WIDTH] = 5.0;
await CircleLayerModule.createCircleLayerWithProperties(
circleLayerId,
circleLayer,
circleProperties
);
await StyleManagerModule.addLayerToStyle(
String(viewId),
circleLayerId,
StyleConstants.CIRCLE_LAYER
);
await CameraPositionModule.latLng(
41.362901,
-74.694676
);
await CameraPositionModule.target();
await CameraPositionModule.zoom(13.0);
await CameraPositionModule.build();
await MapViewModule.zoomPosition();
}
);
});
};
useEffect(() => {
if (!loadedRequiredModules()) {
return;
}
const viewId = findNodeHandle(ref.current);
const eventEmitter = new NativeEventEmitter();
let eventListener = eventEmitter.addListener(
"MapViewInitialized",
(event) => {
drawOnMap(viewId);
}
);
createMapViewFragment(viewId);
return () => {
eventListener.remove();
GeoJsonSourceModule.removeGeoJsonSource(String(viewId));
StyleManagerModule.removeStyle(String(viewId));
MapViewModule.releaseMap();
};
}, []);
const loadedRequiredModules = () => {
if (
CameraPositionModule == null ||
MapViewModule == null ||
StyleManagerModule == null ||
GeoJsonSourceModule == null ||
CircleLayerModule == null
) {
return false;
}
return true;
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
const errorView = <Text>Missing required modules</Text>;
const defaultView = (
<View style={styles.container}>
<View style={styles.container}>
<MapViewManager
style={{
// converts dpi to px, provide desired height
height: PixelRatio.getPixelSizeForLayoutSize(
Dimensions.get("window").height
),
// converts dpi to px, provide desired width
width: PixelRatio.getPixelSizeForLayoutSize(
Dimensions.get("window").width
),
}}
theme={StyleConstants?.MOBILE_DEFAULT}
ref={ref}
/>
</View>
</View>
);
return loadedRequiredModules() ? defaultView : errorView;
};
Sample JSON (tristate.json)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.68954,
41.369863
]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.687882,
41.36892
]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.687007,
41.349811
]
},
"properties": {
"state": "NJ"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.68222,
41.36056
]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.704292,
41.364475
]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.710335,
41.360504
]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.695556,
41.367119
]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.694232,
41.354974
]
},
"properties": {
"state": "NJ"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.698967,
41.370361
]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.709572,
41.360474
]
},
"properties": {
"state": "PA"
}
}
]
}