I intend to build a Chaff Map app initially, which will help users find chaff produced by coffee roasters around the city for the purposes of growing mushrooms or simple composting. I started doing some simple data gathering and mapping, just to get back into the swing of things code-wise. Here’s where I have so far:

I used mapboxGL to render the map and icons here, with data collected from google maps and simply put into a google sheet. I used a separate mini app to geocode the addresses - since google maps did not provide that data. Then I downloaded the google sheet as a csv, converted it to JSON and brought it into my mapping app.

Of course I would like to make this more dynamic. I have a meeting scheduled next week with my data art prof to help me web scrape / and determine best practices for mapping. Check out some more process photos below.

Mapping code below - for some reason I couldn’t figure out how to put the js code in a separate file called map.js. When I did so it just didn’t want to load. Weird! On a separate note, the reason I’d like to make this app is not only because it’s a smaller version of my full feature platform concept, but also because when someone wants to search google for coffee roasters, there are a number of things that determine what to show them - meaning a user does not see all available options, just a portion at any given moment. If I can develop a somewhat static list, so that I can display all results when a user visits, then this will be a bit more impactful I believe, because people can think less, they can just see, and act.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Mobile phones</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1> CHAFF MAP</h1>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiY2hhc2Fuc2MiLCJhIjoiY2pyd2cyeWduMGNnNzQ5cDk4bHRwYmVxayJ9.sAZTXvzkVOfBdIg3GmFsLQ' // add your own mapbox token to make this example work
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-73.97332, 40.685787],
      minZoom: 2,
      zoom: 10
    })
    rawData = [];
    map.on('load', () => {
   
      d3.json('data/roasters.json').then(d => {
        rawData = d;

        rawData.forEach(d => {
          let lat = d.lat;
          let lng = d.lng;
          let name = d.biz_name;
          let address = d.address;
          if (d.phone) {
            let phone = d.phone;
          }
          var popup = new mapboxgl.Popup({
              offset: 25
            })
            .setText(`${name}, ${address}`);

          var el = document.createElement('div');
          el.id = 'marker';

          var marker = new mapboxgl.Marker()
            .setLngLat([lng, lat])
            .setPopup(popup)
            .addTo(map);
        })
      })
})
  </script>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 110px;
  bottom: 0;
  width: 100%;
}

#marker {
  background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-marker :hover {
  cursor: pointer;
}