Simple Map Screen about csc-308-309-project HOT 5 CLOSED

3 hrs

from csc-308-309-project.

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.

from csc-308-309-project.

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>

``

from csc-308-309-project.

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.

from csc-308-309-project.

Took 3 hours

from csc-308-309-project.