JSFiddle - React, Tailwind, and code Playground

by rrosso

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>

<html>
<head>
    <title>Some DC Data</title>
</head>
<body>
    <h1>Some DC Data</h1>
    <div id="map-div" style="width:675px;height:600px;"></div>
</body>

</html>

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);
        
        myPoint = new OpenLayers.Geometry.Point(longitude,latitude).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);
        
        var sampleStyle = OpenLayers.Util.extend( {}, layerStyle);
            sampleStyle.fillColor = "red"; //the main color of the shape
            sampleStyle.graphicName = "square"; //other good shapes are "star", "circle"
            sampleStyle.pointRadius = 5; //controls the size of the marker
            sampleStyle.strokeColor = "red"; //the border color of the shape
            sampleStyle.strokeWidth = 3; //border width
            sampleStyle.fillOpacity = 1; //from 0 (transparent) to 1 (opaque)
            sampleStyle.graphicOpacity = 1; // from 0 (transparent) to 1 (opaque)
pointLayer.addFeatures( [ new OpenLayers.Feature.Vector(myPoint,null,sampleStyle) ] );
            
        rotatedStyle = OpenLayers.Util.extent( {}, sampleStyle ); //copy sampleStyle and modify
            rotatedStyle.rotation = 45; //0 to 360 degrees... this doesn't work as well for circles
            rotatedStyle.fillColor = "red";
           ...