JSFiddle - React, Tailwind, and code Playground

by jcarpenter

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<b>A Map using OpenLayers</b>
<div id="map-div" style="width:450px;height:430px;"></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 longitude = -71.4383333;
var latitude = 42.582;
var centerlonlat = new OpenLayers.LonLat(longitude, latitude);

centerlonlat = centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 15;
map.setCenter(centerlonlat, zoom);


long = -71.4385;
lat = 42.582;
myPoint = new OpenLayers.Geometry.Point(long, lat).transform(map.displayProjection, map.projection);

myPoint = new OpenLayers.Geometry.Point(long, lat).transform(map.displayProjection, map.projection);
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
pointLayer = new OpenLayers.Layer.Vector("Layer Name", {
    style: layerStyle
});
map.addLayer(pointLayer);
sampleStyle = OpenLayers.Util.extend({}, layerStyle);
// sampleStyle.fillColor = "blue"; the main color of the shape
//sampleStyle.graphicName = "square";  other good shapes are "star", "circle"
sampleStyle.pointRadius = 15; // controls the size of the marker
sampleStyle.strokeColor = "blue"; // the border color of the shape
sampleStyle.strokeWidth = 1; // border width
sampleStyle.fillOpacity = .5; // from 0 (transparent) to 1 (opaque)
sampleStyle.graphicOpacity = 1; // from 0 (transparent) to 1 (opaque) 
sampleStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/library.png";
pointLayer.addFeatures([new OpenLayers.Feature.Vector(myPoint, null, sampleStyle)]);


myPointFeature = new OpenLayers.Feature.Vector(myPoint, null, sampleStyle)
myPointFeature.attributes = {
    name: "J.V. Fletcher Library",
    description: "One of Westford's most important buildings",
    webpage: "http://www.westfordlibrary.org/pages/index "
};
pointLayer.addFeatures([myPointFeature]);

// create a Control that watches for clicking on a feature, then add the control to the...