JSFiddle - React, Tailwind, and code Playground

by Ronny Amarante

HTML

<script src="https://static.inpaas.com/assets/angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.css">
<html data-ng-app="inpaas">


<div data-ng-controller="MapController as $map">

  <div id="map">
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>

</div>

</html>

JavaScript

(function(){
  var app = angular.module('inpaas', []);
  
  app.config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('#!{');
    $interpolateProvider.endSymbol('}!#');
  }]);
  
  app.controller('MapController', ['$scope', '$http', function($scope, $http){
    var $map = this;
   
    onInit();
    
    function onInit() {
    var Map = ol.Map;
    var Overlay = ol.Overlay;
    var View = ol.View;
    var toStringHDMS = ol.coordinate.toStringHDMS;
    var TileLayer = ol.layer.Tile;
    var toLonLat = ol.proj.toLonLat;
    var TileJSON = ol.source.TileJSON;
    var XYZ = ol.source.XYZ;
    
    var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
    
    
		var overlay = new Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250,
  },
});

/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function () {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

var key = 'Get your own API key at https://www.maptiler.com/cloud/';
var attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

/**
 * Create the map.
 */
var map = new Map({
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions: attributions,
        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
        tileSize: 512,
      }),
    }) ],
  overlays: [overlay],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function (evt) {
  var coordinate = evt.coordinate;
  var hdms = toStringHDMS(toLonLat(coordinate));

  content.innerHTML =...