JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<b>Windsor Public Libraries</b>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<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 fontainbleau_long = -82.953236;
var fontainbleau_lat = 42.29525;
// Bridgeview
// Step 6: Create point feature based on BranchStyle
myPoint = new...