JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width:450px;height:430px;"></div>
JavaScript
var proj_4326 = new OpenLayers.Projection('EPSG:4326');
var proj_900913 = new OpenLayers.Projection('EPSG:900913');
map = new OpenLayers.Map({
div: "map",
projection: proj_900913,
'displayProjection': proj_4326
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var long=-71.054;
var lat=42.358;
var lonlat = new OpenLayers.LonLat(long,lat).transform(map.displayProjection, map.projection);
map.setCenter(lonlat, 15);
var pointLayer = new OpenLayers.Layer.Vector("River");
map.addLayer(pointLayer);
var buildings = [
{
name: "Boston Aquarium",
lonlats: [
[-71.048501,42.359521],
[-71.048439,42.359293],
[-71.0486,42.359277],
[-71.048541,42.359069],
[-71.049362,42.358968],
[-71.050164,42.359261]
],
video:"http://www.youtube.com/embed/HZkauzLKm2c"
},
{
name: "Boston City Hall",
lonlats: [
[-71.058465,42.360752],
[-71.057561,42.360823],
[-71.057408,42.359965],
[-71.058326,42.359884]
],
video: "http://www.youtube.com/embed/q5poo1sdNHg"
}
];
var style_green = {
fillColor: "white",
strokeColor: "green",
strokeOpacity: 0.7,
strokeWidth: 6
};
for(i=0;i<=buildings.length-1;i=i+1){
// inside of this loop - runs for each building
for(j=0;j<=buildings[i].lonlats.length-1;j=j+1){
//inside of this loop - runs for each point in each building
buildings[i].lonlats[j] = new OpenLayers.Geometry.Point( buildings[i].lonlats[j][0], buildings[i].lonlats[j][1]);
//transform projection
buildings[i].lonlats[j] = buildings[i].lonlats[j].transform(
map.displayProjection, map.projection);
}
// now that we have a list of points, turn the building into a polygon
// we do this by turning the list of points into a LinearRing
// and sending that LinearRing to the Polygon
...