JSFiddle - React, Tailwind, and code Playground

by sifriday

HTML

<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
<div id="heatmapArea">
</div>

CSS

#heatmapArea {
    width: 300px;
    height: 200px;
    border: 1px solid red;
}

JavaScript

function init() {

    var map = new OpenLayers.Map( 'heatmapArea');
    map.addLayer(new OpenLayers.Layer.OSM());

    var lat = 39.3138895;
    var lon = -98.2233523;
    var zoom = 1;
    var position = new OpenLayers.LonLat(lon, lat).transform(
        "EPSG_WGS84", "EPSG_900913"
    );
    map.setCenter(position, zoom);
    
    var query = new OpenLayers.LonLat(
        -122.2928337167, 37.5549570333
    ).transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject()
    );
    var popup = new OpenLayers.Popup.FramedCloud(
        "Popup", 
        query,
        new OpenLayers.Size(100,100),
        "Text",
        null,
        true
    );
    map.addPopup(popup);
}

init()