OpenLayers – How to add markers and popups

06 Apr


<script src=""></script>

<script type="text/javascript">
function init(){
map = new OpenLayers.Map('map');
base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"", {layers: 'basic'} );
map.setCenter(new OpenLayers.LonLat(79.8333,6.9167),7);

var markers = new OpenLayers.Layer.Markers( "Markers" );

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(79.8333,6.9167),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(79.8333,6.9167),icon.clone()));
marker = new OpenLayers.Marker(new OpenLayers.LonLat(79.8333,6.9167));
markers.addMarker(marker);"click", marker, function(e){
popup = new OpenLayers.Popup.FramedCloud("chicken",
new OpenLayers.LonLat(79.8333,6.9167),
new OpenLayers.Size(200, 200),
"I was here <br><img src='uploads/me.png' width='90' height='90'>",
null, true);



<body onLoad="init()">

<div id="map" style="width:500px;height:300px;margin-left: auto;margin-right:auto;"></div>

Leave a comment

Posted by on April 6, 2013 in Geo Programming, JavaScript



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: