JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map-id" class="map border_box"></div>

CSS

.map {
    width:100%;
    height:450px;
    border: 1px solid #4D2722;
}
.border_box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

/**
 * OpenLayer Layer creation Module
 * author -Alex.C.P
 */

var LayerCreationModule = (function () {
    "use strict";

    var my = {};
    //Private variables
    var map = null;
    var veclyr_inPlanning = null;
    var veclyr_inError = null;
    var veclyr_onAir = null;
    var summary_layer = null;
    var iconpath = null;
    var dynamicImageUrl = null;
    var _projection = null; // new openLayerObj.Projection("EPSG:4326");
    var _bounds = null; //new openLayerObj.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34);
    var openLayerObj = null;

    /**
     * Private method to convert to OpenLayer Projection
     */
    var covertlatitudelong = function (lat, long) {

        var lonlatObject = new openLayerObj.LonLat(lat, long).transform(
        _projection, map.getProjectionObject() //Speherical Meracao
        );
        return lonlatObject;

    };
    /**
     * 
     * @param event
     */
    function report(event) {
        var msg = (event.type + ":" + event.feature.fid);
        console.log("Event=" + msg);
    };

    /**
     * 
     */
    var display = function (event) {
        var f = event.feature;
        //  var el = document.getElementById("output");
        if (f.cluster) {
            console.log("cluster of " + f.attributes.count);
        } else {
            console.log("unclustered " + f.geometry);
        };
    };
    /**
     * 
     */
    var adjustMarkerStyle = function () {
        var mapZoom = map.getZoom();

        //console.log("mapZoom "+mapZoom);
        //var size = Math.min(9 ,mapZoom*2);
        var size = 0;
        if (mapZoom < 15) {
            size = 40;
        } else {
            size = 50;
        }

        //var size= (mapZoom-1)*.5 +10;
        //console.log("size "+size);
        return size;

    };


    var getClusterCount = function (feature) {

        var clustercount = {};
        var planningcount = 0;
        var onaircount = 0;
        var inerrorcount = 0;

        for (var...