JSFiddle - React, Tailwind, and code Playground

by rrosso

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<html>
<head>
    <title>DC Crime Data</title>
</head>
<body>
    <h1>Some Crime Data, Modified March 3, 2011</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 theftStyle = OpenLayers.Util.extend( {}, layerStyle);
            theftStyle.fillColor = "blue"; //the main color of the shape
            theftStyle.graphicName = "square"; //other good shapes are "star", "circle"
            theftStyle.pointRadius = 30; //controls the size of the marker
            theftStyle.strokeColor = "blue"; //the border color of the shape
            theftStyle.strokeWidth = 3; //border width
            theftStyle.fillOpacity = 1; //from 0 (transparent) to 1 (opaque)
            theftStyle.graphicOpacity = 1; // from 0 (transparent) to 1 (opaque)
            theftStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/gun.png";


pointLayer.addFeatures( [ new OpenLayers.Feature.Vector(myPoint,null,theftStyle) ] );
            
        var murderStyle = OpenLayers.Util.extend( {}, theftStyle ); //copy sampleStyle and modify
            murderStyle.rotation = 0; //0 to 360 degrees......