JSFiddle - React, Tailwind, and code Playground

by Gabor Farkas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script src="https://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map"></div>
<span id="ms"></span>

CSS

#map {
    width: 400px;
    height: 400px;
}

JavaScript

var map;
var denominator = 1000 / Math.cos(50 * (Math.PI / 180));
function Initialize() {
    LoadMap(40.36, -3.66, 6);
}

//***************************************
// MAP
//***************************************

function LoadMap(lat, lon, zoom) {
    //Define map options
    
    var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from 3857?  //4326,900913
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var extent = new OpenLayers.Bounds(-7.5, 36.5, -2.5, 39.5).transform(fromProjection, toProjection); // (W,S,E,N)
    var lonLat = new OpenLayers.LonLat(lon, lat).transform(
    fromProjection, // transform from WGS 1984
    toProjection // to Spherical Mercator Projection
    );
    var options = {
        projection: "EPSG:900913",
        units: 'km',
        center: lonLat
    };
    map = new OpenLayers.Map("map", options);

    //base map
    var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
        type: google.maps.MapTypeId.HYBRID,
        visibility: false
    }); //numZoomLevels: 22

    //Switch control
    map.addLayers([ghyb]);
    map.addControls([new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()]);

    //Build up all controls           


    //Center the map    
    map.zoomTo(zoom);

    //add Rectangle
    var style = new OpenLayers.Style({
        fillOpacity: 0.0,
        fillColor: "#7ab800",
        strokeOpacity: 1,
        strokeColor: "#7ab800",
        strokeWidth: 3
    });

    boundingLayer = new OpenLayers.Layer.Vector("Bounding Layer", {
        styleMap: new OpenLayers.StyleMap(style)
    });
    box = new OpenLayers.Feature.Vector(extent.toGeometry());
    boundingLayer.addFeatures(box);
    map.addLayer(boundingLayer);
    vectorLayer = new OpenLayers.Layer.Vector("Circles Layer");
    map.addLayer(vectorLayer);
    var circleTime1 = performance.now();
    //Circles layer
    for (i = 36.5; i <= 39.5; i = i + 0.25) {
 ...