render markers on the map

Author: extwiii

README.md

@@ -60,6 +60,10 @@ EXPO_PUBLIC_MAPBOX_KEY=pk.ey123...
 
 -------------------- First Commit --------------------
 
+9 - Create a json file with lat and long of scooters and update Map component to render scooter icons on the map with those lat and long
+
+-------------------- Second Commit --------------------
+
 ## Credit
 
 [Building an e-Scooter App with React Native and Mapbox](https://www.youtube.com/watch?v=uxj8jnlooP8)

assets/pin.png

@@ -1,12 +1,36 @@
-import Mapbox, { Camera, LocationPuck, MapView } from '@rnmapbox/maps';
+import Mapbox, {
+  Camera,
+  LocationPuck,
+  MapView,
+  ShapeSource,
+  SymbolLayer,
+  Images,
+} from '@rnmapbox/maps';
+import { featureCollection, point } from '@turf/helpers';
+
+import pin from '~/assets/pin.png';
+import scooters from '~/data/scooters.json';
 
 Mapbox.setAccessToken(process.env.EXPO_PUBLIC_MAPBOX_KEY || '');
 
 export default function Map() {
+  const points = scooters.map((scooter) => point([scooter.long, scooter.lat]));
   return (
     <MapView style={{ flex: 1 }} styleURL="mapbox://styles/mapbox/dark-v11">
-      <Camera followZoomLevel={16} followUserLocation />
+      <Camera followZoomLevel={12} followUserLocation />
       <LocationPuck puckBearingEnabled puckBearing="heading" pulsing={{ isEnabled: true }} />
+      <ShapeSource id="scooters" shape={featureCollection(points)}>
+        <SymbolLayer
+          id="scooter-icons"
+          style={{
+            iconImage: 'pin',
+            iconSize: 0.5,
+            iconAllowOverlap: true,
+            iconAnchor: 'bottom',
+          }}
+        />
+        <Images images={{ pin }} />
+      </ShapeSource>
     </MapView>
   );
 }

components/Map.tsx

@@ -0,0 +1,32 @@
+[
+  { "id": 1, "long": -122.4115, "lat": 37.795 },
+  { "id": 2, "long": -122.395, "lat": 37.793 },
+  { "id": 3, "long": -122.4135, "lat": 37.797 },
+  { "id": 4, "long": -122.4145, "lat": 37.774 },
+  { "id": 5, "long": -122.4165, "lat": 37.78 },
+  { "id": 6, "long": -122.423, "lat": 37.777 },
+  { "id": 7, "long": -122.414, "lat": 37.776 },
+  { "id": 8, "long": -122.425, "lat": 37.79 },
+  { "id": 9, "long": -122.427, "lat": 37.795 },
+  { "id": 10, "long": -122.418, "lat": 37.796 },
+  { "id": 11, "long": -122.404, "lat": 37.799 },
+  { "id": 12, "long": -122.423, "lat": 37.799 },
+  { "id": 13, "long": -122.413, "lat": 37.796 },
+  { "id": 14, "long": -122.414, "lat": 37.795 },
+  { "id": 15, "long": -122.414, "lat": 37.779 },
+  { "id": 16, "long": -122.415, "lat": 37.784 },
+  { "id": 17, "long": -122.43, "lat": 37.784 },
+  { "id": 18, "long": -122.426, "lat": 37.778 },
+  { "id": 19, "long": -122.432, "lat": 37.798 },
+  { "id": 20, "long": -122.435, "lat": 37.786 },
+  { "id": 21, "long": -122.417, "lat": 37.785 },
+  { "id": 22, "long": -122.407, "lat": 37.775 },
+  { "id": 23, "long": -122.406, "lat": 37.784 },
+  { "id": 24, "long": -122.415, "lat": 37.795 },
+  { "id": 25, "long": -122.424, "lat": 37.792 },
+  { "id": 26, "long": -122.435, "lat": 37.782 },
+  { "id": 27, "long": -122.425, "lat": 37.794 },
+  { "id": 28, "long": -122.414, "lat": 37.772 },
+  { "id": 29, "long": -122.406, "lat": 37.785 },
+  { "id": 30, "long": -122.4, "lat": 37.775 }
+]

data/scooters.json

@@ -0,0 +1,2 @@
+declare module '*.png';
+declare module '*.jpg';