Simple Map Screen

[Waidhoferj]

• Show that we can load a map of the world
• Position of user in world
• Draw locations of key areas from [longitude, latitude] pairs

Highly recommend using react-mapbox-gl

[Waidhoferj]

3 hrs

[Waidhoferj]

Inputting data into a GeoJSONLayer is more performant than using individual pins on the map. Simple GeoJSON for our artwork could look like this:

{
"type": "FeatureCollection",
"features" : [
{
      "type": "Feature",
      "id": 1,
      "geometry": {
        "type": "Point",
        "coordinates": [12, 23]
      },
      "properties": {
       artworks: [...]
      }
    }
]
}

Where:

• A Feature is just an object that goes on the map
• The feature collection is a list of all the artwork radius features
• Geometry is where the location and object type is stored (stuff that will determine placement on the map)
• Properties aren't shown on the map, but can be accessed when the user interacts with the element.

Until we can grab data from the backend, you can put this data in a art-areas.json file and import it into your React component.

[Waidhoferj]

Before displaying this on the map, you'll need an api token from MapBox. You can sign up here (totally free)

Once you have your default map set up, you can display the geojson like this:

import artAreasJSON from "art-areas.json"

...

<Map>
<GeoJSONLayer
          data={artAreasJSON}
          fillLayout={{ visibility: "visible" }}
          fillPaint={{
            "fill-color": "blue",
            "fill-opacity": 0.4,
          }}
        />
...
</Map>

``

[Waidhoferj]

To respond to click events, add this listener to the geojson layer:

circleOnClick={handleClick}
...
function handleClick(e) {
// Respond to click
}

Then you can pass the targeted latitude and longitude to the compass.

[gwholland3]

Took 3 hours