JSFiddle - React, Tailwind, and code Playground

by wylieconlon

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-controller="DemoController">
  <div id="map"></div>
</div>

CSS

#map {
  height: 500px;
  width: 100%;
}

.mapMarker {
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid lightGrey;
}

.mapMarker:hover {
  z-index: 1;
}

.listingCard {
  border: 1px solid black;
}

.listingPicker {
  position: absolute;
  left: 60px;
  top: 0;
  background: white;
  z-index: 1;
}

Babel + JSX

const demoModule = angular.module('demo', []);

class MapMarkerController {
  static get $inject() {
    return ['$element', '$scope'];
  }

  constructor($element, $scope) {
    this.listings = ['abc1232', 'xyz987'];
    
    this.listingPickerOpen = false;
    this.forcePickerOpen = false;

    $element.on('mouseover', () => {
      this.listingPickerOpen = true;
      $scope.$apply();
    });
    $element.on('mouseout', () => {
      this.listingPickerOpen = false;
      $scope.$apply();
    });
    $element.on('click', () => {
      this.forcePickerOpen = !this.forcePickerOpen;
      $scope.$apply();
    });
    $element.on('dblclick', (ev) => {
      ev.preventDefault();
      ev.stopPropagation();
    });
  }
  
  showListingPicker() {
    return this.forcePickerOpen || this.listingPickerOpen;
  }
}

const mapMarkerTemplate = '<div>Inner marker {{$ctrl.item}} ' +
    '<div class="listingPicker" ng-show="$ctrl.showListingPicker()">' +
    '<listing-card listing="listing" ng-repeat="listing in $ctrl.listings"></listing-card>' +
    '</div></div>';

demoModule.component('mapMarker', {
  bindings: {
    item: '@'
  },
  template: mapMarkerTemplate,
  controller: MapMarkerController
});

demoModule.component('listingCard', {
  bindings: {
    listing: '<'
  },
  template: '<div class="listingCard">Listing card {{$ctrl.listing}}</div>'
});

class DemoController {
  constructor($compile, $scope) {
    this.map = new google.maps.Map(document.querySelector('#map'), {
      center: { lat: 40.8, lng: -73.95 },
      zoom: 11
    });
    
    this.compile = $compile;
    this.scope = $scope;
    
    this.renderCluster();
  }
  
  renderCluster() {
    this.clusters = [];
    
    for (let i = 0; i < 100; i++) {
      this.clusters.push(new CustomMarker(this.map, this.getRandomLatLng(), this.renderClusterContents.bind(this)));
    }
  }
  
  renderClusterContents(cluster) {
    const compiled = this.compile(cluster)(this.scope);
  }
  
  getRandomLatLng() {
    return...