JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
<input type=textarea>
<div id="map-div" style="width:850px;height:830px;"></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);
map.zoomToMaxExtent();
var zoom = 13;

//Enter lat/long for a point in DC (taken from DC crime data)
var longitude = -76.9319905496493;
var latitude = 38.9096978354199;
var centerlonlat = new OpenLayers.LonLat(longitude, latitude);
centerlonlat = centerlonlat.transform(map.displayProjection, map.projection);
map.setCenter(centerlonlat, zoom);

layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
pointLayer = new OpenLayers.Layer.Vector('Layer Name', {
    style: layerStyle
});
map.addLayer(pointLayer);

var crimeStyle = OpenLayers.Util.extend({}, layerStyle);
crimeStyle.fillColor = 'blue'; //the main color of the shape
crimeStyle.graphicName = 'square'; //other good shapes are 'star', 'circle'
crimeStyle.pointRadius = 25; //controls the size of the marker
crimeStyle.strokeColor = 'blue'; //the border color of the shape
crimeStyle.strokeWidth = 3; //border width
crimeStyle.fillOpacity = 1; //from 0 (transparent) to 1 (opaque)
crimeStyle.graphicOpacity = 1; // from 0 (transparent) to 1 (opaque)
crimeStyle.externalGraphic = 'http://publicdatapublic.org/images/gun.png';

var altcrimeStyle = OpenLayers.Util.extend({}, crimeStyle); //copy crimeStyle and modify
altcrimeStyle.rotation = 0; //0 to 360 degrees... this doesn't work as well for circles
altcrimeStyle.fillColor = 'red';
altcrimeStyle.graphicName = 'square';
altcrimeStyle.strokeColor = 'red'; //the border color of the shape
altcrimeStyle.fillOpacity = 1;
altcrimeStyle.graphicOpacity = 1;
altcrimeStyle.strokeWidth = 3;
altcrimeStyle.externalGraphic = 'http://publicdatapublic.org//images/crimescene.png';

//create 3 points where crimes occurred
crimePoint1 = new OpenLayers.Geometry.Point(longitude, latitude).transform(map.displayProjection,...