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: "km",
    projection: proj_900913,
    'displayProjection': proj_4326
});

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

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

map.setCenter(lonlat, 14);

lat = 20.667, long = -103.396

myPoint = new OpenLayers.Geometry.Point(long, lat).transform(map.displayProjection, map.projection);

myPoint = new OpenLayers.Geometry.Point(long, lat).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);
sampleStyle = OpenLayers.Util.extend({}, layerStyle);
map.addControl(new OpenLayers.Control.LayerSwitcher());
sampleStyle.pointRadius = 12; // controls the size of the marker
sampleStyle.strokeColor = "blue"; // the border color of the shape
sampleStyle.strokeWidth = 1; // border width
sampleStyle.fillOpacity = .5; // from 0 (transparent) to 1 (opaque)
sampleStyle.graphicOpacity = 1; // from 0 (transparent) to 1 (opaque) 
sampleStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/bridgemodern.png";
pointLayer.addFeatures([new OpenLayers.Feature.Vector(myPoint, null, sampleStyle)]);


myPointFeature = new OpenLayers.Feature.Vector(myPoint, null, sampleStyle)
myPointFeature.attributes = {
    name: "Puente Matute Remus",
    description: "Guadalajara, Jal. MX 2011",
    webpage: "http://www.jalisco.gob.mx"
};
pointLayer.addFeatures([myPointFeature]);

// create a Control that watches for clicking on a feature, then add the control to the map
selectControl = new OpenLayers.Control.SelectFeature(pointLayer);
map.addControl(selectControl);
selectControl.activate();

function...