Lines on a map

<?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>

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 LineLayerModule = NativeModules.LineLayerModule;


const StyleConstants = StyleManagerModule?.getConstants();
const LineConstants = LineLayerModule?.getConstants();


export const LinesOnAMap = () => {
  const ref = useRef(null);


  const createMapViewFragment = (viewId) =>
    UIManager.dispatchViewManagerCommand(
      viewId,
      UIManager.MapViewManager.Commands.create.toString(),
      [viewId]
    );


  let lineLayerId = "LineLayerId";
  let lineId = "LineId";


  const drawOnMap = async (viewId) => {
    await MapViewModule.setMapView(String(viewId));
    MapViewModule.getMapAsync(() => {
      MapViewModule.setStyleWithCallback(
        StyleConstants.MOBILE_DAY,
        async (mapViewFragmentTag) => {
          await StyleManagerModule.addStyle(String(viewId));
          await GeoJsonSourceModule.createGeoJsonSourceFromUri(
            lineId,
            "asset://lines.json"
          );


          await StyleManagerModule.addSourceToStyle(String(viewId), lineId);


          let lineProperties = {};
          lineProperties[LineConstants.WIDTH] = 4;
          lineProperties[LineConstants.COLOR] = "#0000FF";
          lineProperties[LineConstants.OPACITY] = 0.5;


          await LineLayerModule.createLineLayerWithProperties(
            lineLayerId,
            lineId,
            lineProperties
          );


          await StyleManagerModule.addLayerToStyle(
            String(viewId),
            lineLayerId,
            StyleConstants.LINE_LAYER
          );


          await CameraPositionModule.latLng(
            40.609028,
            -97.738000
          );
          await CameraPositionModule.target();
          await CameraPositionModule.zoom(2.5);
          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();
      LineLayerModule.removeLineLayer(String(viewId));
      StyleManagerModule.removeStyle(String(viewId));
      MapViewModule.releaseMap();
    };
  }, []);


  const loadedRequiredModules = () => {
    if (
      CameraPositionModule == null ||
      MapViewModule == null ||
      StyleManagerModule == null ||
      GeoJsonSourceModule == null ||
      LineLayerModule == 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;
};

{
  "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
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -105.64453124999999,
            42.22851735620852
          ],
          [
            -100.1953125,
            42.35854391749705
          ],
          [
            -102.919921875,
            42.22851735620852
          ],
          [
            -103.0078125,
            36.94989178681327
          ],
          [
            -105.908203125,
            37.020098201368114
          ],
          [
            -99.931640625,
            36.94989178681327
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -98.349609375,
            36.87962060502676
          ],
          [
            -98.173828125,
            42.48830197960227
          ],
          [
            -95.80078125,
            39.33429742980725
          ],
          [
            -94.0869140625,
            42.5530802889558
          ],
          [
            -94.04296874999999,
            37.055177106660814
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -92.548828125,
            42.48830197960227
          ],
          [
            -92.548828125,
            36.73888412439431
          ],
          [
            -89.1650390625,
            37.26530995561875
          ],
          [
            -89.4287109375,
            39.50404070558415
          ],
          [
            -92.021484375,
            39.842286020743394
          ],
          [
            -89.384765625,
            40.51379915504413
          ],
          [
            -89.384765625,
            42.391008609205045
          ],
          [
            -92.493896484375,
            42.49640294093705
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -87.4072265625,
            42.35854391749705
          ],
          [
            -87.9345703125,
            37.23032838760387
          ],
          [
            -83.583984375,
            37.19533058280065
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -78.837890625,
            37.33522435930639
          ],
          [
            -82.4853515625,
            37.3002752813443
          ],
          [
            -82.44140625,
            39.774769485295465
          ],
          [
            -79.27734374999999,
            39.70718665682654
          ],
          [
            -82.44140625,
            40.01078714046552
          ],
          [
            -82.3974609375,
            41.705728515237524
          ],
          [
            -79.1455078125,
            41.672911819602085
          ]
        ]
      }
    }
  ]
}