<div id="map-div" style="width:850px;height:830px;"></div>
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, map.projection); crimePoint2 = new OpenLayers.Geometry.Point(-76.969508906507,38.8707434223516).transform(map.displayProjection, map.projection); crimePoint3 = new OpenLayers.Geometry.Point(-76.9738564118361,38.8955441398405).transform(map.displayProjection, map.projection); //create feature variable for crimePoint1 crimePoint1Feature = new OpenLayers.Feature.Vector( crimePoint1,null,crimeStyle ); //add attributes to crimePoint1 crimePoint1Feature.attributes = { name: "Theft", description: "Reported 1/25/2006 at 4900 block of Minnesota Avenue NE", wikiPage: "http://en.wikipedia.org/wiki/Crime_in_Washington,_D.C." }; //add feature to map pointLayer.addFeatures( [ crimePoint1Feature ] ); //create feature variable for crimePoint2 crimePoint2Feature = new OpenLayers.Feature.Vector( crimePoint2,null,crimeStyle ); //add attributes to crimePoint2 crimePoint2Feature.attributes = { name: "Burglary", description: "Reported 2/25/2011 at 2600 block of Q St SE", wikiPage: "http://en.wikipedia.org/wiki/Crime_in_Washington,_D.C." }; //add feature to map pointLayer.addFeatures( [ crimePoint2Feature ] ); //create feature variable for crimePoint3 crimePoint3Feature = new OpenLayers.Feature.Vector( crimePoint3,null,altcrimeStyle ); //add attributes to crimePoint3 crimePoint3Feature.attributes = { name: "Homicide", description: "Gun; reported 2/20/2011 at 400 block of 23rd Place NE", wikiPage: "http://en.wikipedia.org/wiki/Crime_in_Washington,_D.C." }; //add feature to map pointLayer.addFeatures( [ crimePoint3Feature ] ); //create a Control that watches for clicking on a feature, and then add the control to the map selectControl = new OpenLayers.Control.SelectFeature( pointLayer ); map.addControl(selectControl); selectControl.activate(); /*the control calls events (featureselected and featureunselected) and we connect those events to functions */ pointLayer.events.on({ 'featureselected': onFeatureSelect, 'featureunselected': onFeatureUnselect }); function onFeatureSelect(clickInfo) { clickedFeature = clickInfo.feature; popup = new OpenLayers.Popup.FramedCloud( "featurePopup", // an ID for this popup clickedFeature.geometry.getBounds().getCenterLonLat(), // anchor to the icon new OpenLayers.Size(120,250), // set height and width of the window "<a target='_blank' href='" + clickedFeature.attributes.wikiPage + "'>" + clickedFeature.attributes.name + "</a><br>" + clickedFeature.attributes.description, // HTML displayed inside the window null, // used for other applications true, // have an [x] to close the Popup onPopupClose // call another function when the Popup is closed ); // let feature and popup 'know' about each other clickedFeature.popup = popup; popup.feature = clickedFeature; // add the popup to the map map.addPopup(popup); } function onFeatureUnselect(clickInfo) { feature = clickInfo.feature; if (feature.popup) { // if an icon with a popup window is un-selected, that popup is removed popup.feature = null; map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } } function onPopupClose(closeInfo) { // closing the Popup un-selects the icon selectControl.unselect(this.feature); }