JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Example Map</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

CSS

#map {width: 800px; height: 600px;}

JavaScript

var map, markers;


map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());

var virginia = new OpenLayers.LonLat(-78.65689420, 37.43157340).transform(
  new OpenLayers.Projection("EPSG:4326"),
  map.getProjectionObject()
);

var cville = new OpenLayers.LonLat(-78.47667810000002, 38.02930590).transform(
  new OpenLayers.Projection("EPSG:4326"),
  map.getProjectionObject()
);

var alderman = new OpenLayers.LonLat(-78.50572199999999, 38.03467470).transform(
  new OpenLayers.Projection("EPSG:4326"),
  map.getProjectionObject()
);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var blue = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-blue.png', size, offset);
var green = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset);


var zoom=7;

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

markers.addMarker(new OpenLayers.Marker(virginia));
markers.addMarker(new OpenLayers.Marker(cville, blue));
//markers.addMarker(new OpenLayers.Marker(alderman, green));

map.setCenter (cville, zoom);