JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="//maps.google.com/maps/api/js?v=3&amp;key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&amp;libraries=drawing,places,geometry"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
<div id="atlas">

</div>
data.result_list[""0""].geojson.coordinates

CSS

#atlas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: pink;
}

JavaScript

/*************************************************************************************
 * Atlas Class Declaration
 *
 * Essentially, passing a center point (lat/lng) and a type (city, state, etc) will
 * return the layer you're looking for.
 ************************************************************************************/
class Atlas {
  /*************************************************************************************
   * Simple Map Init
   ************************************************************************************/
  initMap() {
    const self = this;
    return new Promise((resolve, reject) => {
      self.map = new google.maps.Map(document.getElementById('atlas'), {
        center: {
          lat: 47.6847,
          lng: -122.3848
        },
        zoom: 8
      });
      requestAnimationFrame(() => {
        resolve();
      })
    });
  }
  /*************************************************************************************
   * JSONp call to our service to get a layer, defaulting to zipcode with no buffer.
   ************************************************************************************/
  getLayer(type = 'Postcode1', buffer = 0) {
    const self = this;
    fetchJsonp(`http://svc.moxiworks.com/service/v1/listing/geo/layer/search?center_lat=47.6849444&center_lon=-122.29822239999999&geotype=${type}&buffer_miles=${buffer}`)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        self.draw(json);
      })
  }
  /*************************************************************************************
   * Draw Polygon to the map
   * We alter the data a little to fit the "feature" schema for Googles API
   ************************************************************************************/
  draw(obj) {
    var data = {
      type: "Feature",
      geometry: {
        "type": "MultiPolygon",
        "coordinates": obj.data.result_list[0].geojson.coordinates
      }
    };
   ...