JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<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" style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>

CSS

body, html {
    height : 100%;
    width : 100%;
}

JavaScript

require(["dojo/ready", "dojox/geo/openlayers/Map", "dojox/geo/openlayers/GfxLayer",
          "dojox/geo/openlayers/GeometryFeature", "dojox/geo/openlayers/Point"],
     function(ready, Map, GfxLayer, GeometryFeature, Point){
  ready(function(){
    // create a map widget.
      var map = new Map("map");
      map.setBaseLayerType(dojox.geo.openlayers.BaseLayerType.GOOGLE);
   // This is New York
    var wb = {
      latitude : 42.282475,
      longitude : -71.571159
    };
    // create a GfxLayer
    var layer = new GfxLayer();
      
    // create a Point geometry at New York location
    var p = new Point({x:wb.longitude, y:wb.latitude});
      
    // create a GeometryFeature
    var f = new GeometryFeature(p);
      
    // set the shape properties, fill and stroke
    f.setFill([ 0, 128, 128, .4 ]);
    f.setStroke([ 0, 0, 0 ]);
    f.setShapeProperties({
      r : 20
    });
      
    // add the feature to the layer
    layer.addFeature(f);
      
    // add layer to the map
    map.addLayer(layer);
      
    // fit to New York with 0.1 degrees extent
    map.fitTo({
    position : [ wb.longitude, wb.latitude ],
                 extent : 0.1
    });
      console.debug(map);
  });
});