JSFiddle - React, Tailwind, and code Playground

by copystar

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<b>University of Windsor Campus</b>
<div id="map-div" style="width:750px;height:530px;"></div>

JavaScript

map = new OpenLayers.Map({
     div: "map-div",
    projection: new OpenLayers.Projection('EPSG:900913'),
     'displayProjection': new OpenLayers.Projection('EPSG:4326')
 });

var osm = new OpenLayers.Layer.OSM();
 map.addLayer(osm);
 
var long = -83.065 ;
 var lat =    42.306 ;
var centerlonlat = new OpenLayers.LonLat( long , lat );
 
centerlonlat=centerlonlat.transform(map.displayProjection, map.projection);
 var zoom = 16;
map.setCenter(centerlonlat,zoom);
 
// Step 1: Create new layerstyle : vector
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 
// Step 2: Create new pointlayer (for all points)
  pointLayer = new OpenLayers.Layer.Vector("Campus", {style: layerStyle});
 
// Step 3: Add pointlayer to map 
  map.addLayer(pointLayer);
 
// Step 4: Create new sample style for several points



var linePts = [
    [-83.065,42.304],
    [-83.065,42.310],
    [-83.066,42.308],
    [-83.069,42.306],
    [-83.065,42.304]
];

for(var i=0;i<=linePts.length-1;i=i+1){
  linePts[i] = new OpenLayers.Geometry.Point( linePts[i][0], linePts[i][1]);
  linePts[i] = linePts[i].transform( map.displayProjection, map.projection);
}

var style_green = {
    strokeColor: "#00FF00",
    strokeOpacity: 0.7,
    strokeWidth: 6
};

var myLine = new OpenLayers.Geometry.LineString( linePts );
pointLayer.addFeatures([ new OpenLayers.Feature.Vector( myLine, null, style_green )]);