JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map-div" style="width:450px;height:430px;"></div>
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 = 78.042068;
var lat = 27.173768;
var centerlonlat = new OpenLayers.LonLat( long , lat );
centerlonlat=centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 16;
map.setCenter(centerlonlat,zoom);
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);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.pointRadius = 24;
sampleStyle.fillOpacity = 1; // from 0 to 1
sampleStyle.graphicOpacity = 1; // from 0 to 1
sampleStyle.externalGraphic = "http://google-maps-icons.googlecode.com/files/palace.png";
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Taj Mahal",
description: "One of India's most famous buildings",
wikiPage: "http://simple.wikipedia.org/wiki/Taj_Mahal"
};
pointLayer.addFeatures( [ myPointFeature ] );
// create a Control that watches for clicking on a feature
selectControl = new OpenLayers.Control.SelectFeature( pointLayer );
map.addControl(selectControl);
selectControl.activate();
// it calls events (featureselected and featureunselected) and we connect those events to functions
pointLayer.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
// sample (and super-effective) popup opening and closing code
// from http://openlayers.org/dev/examples/ and http://ushahidi.com/
function onFeatureSelect(clickInfo) {
...