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

class Atlas {
  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();
      })
    });
  }
  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);
      }).catch(function(ex) {
        console.error('failed', ex)
      })
  }
  draw(obj) {
    var data = {
      type: "Feature",
      geometry: {
        "type": "MultiPolygon",
        "coordinates": obj.data.result_list[0].geojson.coordinates
      }
    };
    this.map.data.addGeoJson(data)
    this.fitToMap();
  }
  fitToMap() {
    var bounds = new google.maps.LatLngBounds();
    this.map.data.forEach(function(feature) {
      feature.getGeometry().forEachLatLng(function(latlng) {
        bounds.extend(latlng);
      });
    });

    this.map.fitBounds(bounds);
  }
}

const atlas = new Atlas();
atlas.initMap().then(() => {
	// AdminDivision1 = State
  // AdminDivision2 = County
  // PopulatedPlace = City
	// Postcode1 = Zipcode
  // Neighborhood = Neighborhood
  atlas.getLayer('PopulatedPlace', 0.5);
});