SPRINT 5 ‐ Map Cleanup - BlueJayBird11/UniJet GitHub Wiki

As a user, I have a map that is visually appealing.

The goal for this user story is to touch up the Map page with cleaner visuals, a "reset view" button, and icons for Driver and Destination locations.

Map Skin

To change the "skin" of the map, you must select one from this website. Once selected, you simply integrate the url to it into your project like so:

<TileLayer
  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`}
/>

Route Design

To update the route design on the map, there are not a lot of customizable options. Simply changing the weight and opacity of the Polylines are about the only thing you can do.

{routeToDestination && <Polyline positions={routeToDestination} weight={10} opacity={0.3} color="blue" />}
{routeToUser && <Polyline positions={routeToUser} weight={10} opacity={0.3} color="red" />}

User Location Icon

image

In order to update the user location icon, CircleMaker components were utilized to create a blue circle with a thin white outline.

{/* White outline marker */}
<CircleMarker center={position} radius={6} color="white" fillColor="white" fillOpacity={1} />

{/* Blue center marker */}
<CircleMarker center={position} radius={5} fillColor="blue" fillOpacity={1}>
  <Popup>You are here</Popup>
</CircleMarker>

Reset View Button

unijet_map_reset_view-ezgif com-crop

To create a button that resets the view that the user has of the map, the React Leaflet useMap hook was used. When the button is clicked, the resetView function is called which "flies" the map over to the user's current position. The zIndex is set to 9999 so that the button does not get hidden under the map. The second parameter in map.flyTo defines the amount of zooming in that will be done. In this case, 16 was plenty.

    return (
      <button
        onClick={resetView}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded absolute top-3 left-14 z-10"
        style={{ zIndex: 9999 }}
      >
        Reset View
      </button>
    );

Driver and Destination Icons

image

To implement icons that appear on the Driver and Destination locations, you will need to first place the images you want to use in the assets folder. Next, define the icons using Leaflet's L.icon method.

const carIcon = L.icon({
  iconUrl: '@/assets/car.png', 
  iconSize: [32, 32], 
});

const destinationIcon = L.icon({
  iconUrl: '@/assets/destination.png', 
  iconSize: [32, 32], 
});

To make these icons actually appear on the map, I attempted to use Marker components. This did not work as intended, and the only way I have been able to get it to work is if you replace the image path with a link to the image online. It does not work with every image hosting site however.

        {/* Placeholder location marker with destination icon */}
        <Marker position={placeholderLocation} icon={destinationIcon}>
          <Popup>Destination Location</Popup>
        </Marker>

        {/* Driver location marker with car icon */}
        <Marker position={driverLocation} icon={carIcon}>
          <Popup>Driver Location</Popup>
        </Marker>
⚠️ **GitHub.com Fallback** ⚠️