JSFiddle - React, Tailwind, and code Playground

by sharon123

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
    <b>Sharon's 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.3972400;
var latitude = 42.3212880;
var centerlonlat = new OpenLayers.LonLat( longitude , latitude );


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


var cwlong = -71.3920079;
var cwlat = 42.3127323;


var restlong = -71.3989880;
var restlat = 42.3238730;



myPoint = new OpenLayers.Geometry.Point(cwlong,cwlat).transform( map.displayProjection,  map.projection);

subsNmore = new OpenLayers.Geometry.Point(restlong,restlat).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 = "blue";  //  main color of  shape
        sampleStyle.graphicName = "square";  // circle, square, triangle, star, etc.
        sampleStyle.pointRadius = 14;  // controls the size of the marker
        sampleStyle.strokeColor = "blue";  //  border color of the shape
        sampleStyle.strokeWidth = 3;  // border width
        sampleStyle.fillOpacity = 1;  // from 0 to 1
        sampleStyle.graphicOpacity = 1; // from 0 to 1
sampleStyle.externalGraphic="http://i.imgur.com/dlvnh.png";

pointLayer.addFeatures( [ new OpenLayers.Feature.Vector( myPoint,null,sampleStyle) ] );


restaurantStyle = openLayers.Util.extend({}, sampleStyle);
restaurantStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/restaurant.png";


pointLayer.addFeatures( [ new OpenLayers.Feature.Vector( subsNmore,null,restaurantStyle) ] );