JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.css">
<b>Windsor Public Libraries</b>
<div id="map-div" style="width:750px;height:530px;"></div>
<!-- Using City of Windsor Open Data : http://www.citywindsor.ca/003713.asp -->

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 long = -83.011 ;
var lat =    42.291 ;
var centerlonlat = new OpenLayers.LonLat( long , lat );

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

// Step 1: Create new layerstyle : vector
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

// Step 2: Create new pointlayer (for all points)
 pointLayer = new OpenLayers.Layer.Vector("Layer Name", {style: layerStyle});

// Step 3: Add pointlayer to map 
 map.addLayer(pointLayer);

// Step 4: Create styles for several points

var CentralBranchStyle= OpenLayers.Util.extend({}, layerStyle);
    CentralBranchStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/library-publ.png";
    CentralBranchStyle.pointRadius = 18;
    CentralBranchStyle.fillOpacity = 1;

var BranchStyle = OpenLayers.Util.extend({}, CentralBranchStyle);
   BranchStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/library-uni.png";

// Step 5: Create points for branch locations
var bridgeview_long =    -83.05012    ;
var bridgeview_lat =    42.296991    ;
var walkerville_long =    -83.004268    ;
var walkerville_lat =    42.30018    ;
var remington_long =     -83.006215    ;
var remington_lat =     42.284915    ;
var seminole_long =  -82.9793    ;
var seminole_lat  =  42.316972    ;
var budimir_long   = -83.026716    ;
var budimir_lat     =   42.268296    ;
var riverside_long   = -82.960902    ;
var riverside_lat  =  42.329794    ;
var forestglade_long =   -82.915847    ;
var forestglade_lat  =  42.303067    ;
var sandwich_long  =  -83.077893    ;
var sandwich_lat  =  42.299659    ;
var central_long  =  -83.03431    ;
var central_lat   =     42.31127    ;
var...