JSFiddle - React, Tailwind, and code Playground

by aborrell

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width:550px;height:450px;"></div>

JavaScript

var proj_4326 = new OpenLayers.Projection('EPSG:4326');
var proj_900913 = new OpenLayers.Projection('EPSG:900913');
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    units: "mi",
    projection: proj_900913,
    'displayProjection': proj_4326
});

var osm = new OpenLayers.Layer.OSM();
map.addLayers([osm]);

var lonlat = new OpenLayers.LonLat(-103.394523,20.665468).transform(map.displayProjection, map.projection);

map.setCenter(lonlat, 14);

map.addControl(new OpenLayers.Control.LayerSwitcher());
var glong=-103.394523;
var glat=20.665468;

myPoint = new OpenLayers.Geometry.Point(glong,glat).transform( map.displayProjection,  map.projection);

layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
pointLayer = new OpenLayers.Layer.Vector("Layer Name", {style: layerStyle});

var glong2=-103.394521;
var glat2=20.665467;
myPoint2 = new OpenLayers.Geometry.Point(glong2,glat2).transform( map.displayProjection,  map.projection);



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://google-maps-icons.googlecode.com/files/bridgemodern.png";



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

myPointFeature = new OpenLayers.Feature.Vector(myPoint, null, sampleStyle)
myPointFeature.attributes = {
    name: "Matute Remus Bridge",
    description: "Guadalajara, MX",
   ...