JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<html> 
  <head> 
    <script src='http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false' type='text/javascript'></script> 
    <script src='http://openlayers.org/api/OpenLayers.js' type='text/javascript'></script> 
 
  </head> 
 
  <body onload="init()"> 
    <div id="map" style='width: 650px; height: 408px;'></div> 
  </body> 
</html>

JavaScript

defaultLatCenter = 39;
defaultLonCenter = -96;
defaultZoom = 4;
 
proj4326 = new OpenLayers.Projection("EPSG:4326");
proj900913 = new OpenLayers.Projection("EPSG:900913");
 
init = function() {
  gphy = new OpenLayers.Layer.Google("Google Physical", {
    type: google.maps.MapTypeId.TERRAIN
    });
  osm = new OpenLayers.Layer.OSM("openstreetmap");
  map = new OpenLayers.Map("map");
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addLayers([gphy, osm]);
  map.setCenter(new OpenLayers.LonLat(defaultLonCenter, defaultLatCenter).transform(proj4326, map.getProjectionObject()), defaultZoom);
 
 
  bounds = new OpenLayers.Bounds();
  bounds.extend(new OpenLayers.LonLat(-127.620375523875420, 21.652538062803));
  bounds.extend(new OpenLayers.LonLat(-66.517937876818, 50.406626367301044));
  bounds.transform(proj4326, map.getProjectionObject());
  radar_overlay = new OpenLayers.Layer.Image('radar', 'http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif', bounds, new OpenLayers.Size(3400, 1600), {
    'isBaseLayer': false,
    'alwaysInRange': true
  });
  map.addLayer(radar_overlay);
  radar_overlay.setZIndex(150);
  radar_overlay.setOpacity(0.7);
  window.radar_overlay = radar_overlay;
 
 
 
};