My goal: plot some small images on the map (icons), and when the cursor goes over an image, a popup would appear. On my way to make it happen, I had to develop some interesting things, that I share now with everyone, in the hope that it can be useful.
The first difficulty I found was to make OpenLayers understand GPS coordinates without much fuss. To do so, you must have a coordinate transformation, which is not exactly trivial. Below is a function to make this conversion trivial, yes, so that you’ll never need to worry about it again. The
map argument is the map object you’re working upon, and lon and lat are floating point numbers.function Geo(map, lat, lon) {
return new OpenLayers.LonLat(lon, lat)
.transform(new OpenLayers.Projection('EPSG:4326'),
map.getProjectionObject());
}
// Example usage:
var map = new OpenLayers.Map('myMapDivId');
map.addLayer(new OpenLayers.Layer.OSM());
var coor = Geo(map, -5.773274, -35.204948);
map.setCenter(coor, 8);
Second, the image (icon) plotting. When you plot an image at a given point, this image is centered at that point. I wanted to plot an image of a pushpin, which points at the wrong location if centered – the very end of the pushpin will point to a location below the center of the image. It had to be moved above, so that the bottom of the image was exactly over the point.The function below creates the image and plots it with a bottom offset, if needed. The
img argument is a valid image URL, cx and cy are the size of the image in pixels, and bottomOffset is a boolean value. The function is asychronous and waits the image to be loaded; use the onDone callback, which receives the new marker as argument.function PlotMarker(map, img, lat, lon, bottomOffset, onDone) {
var imgObj = new Image();
imgObj.src = img;
imgObj.onload = function() {
var sz = new OpenLayers.Size(imgObj.width, imgObj.height);
var off = new OpenLayers.Pixel(-(sz.w / 2),
bottomOffset ? -sz.h : -(sz.w / 2));
var ico = new OpenLayers.Icon(img, sz, off);
if(onDone !== undefined && onDone !== null)
onDone(new OpenLayers.Marker(Geo(map, lat, lon), ico));
};
}
// Example usage:
var map = new OpenLayers.Map('myMapDivId');
map.addLayer(new OpenLayers.Layer.OSM());
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);
PlotMarker(map, 'pushpin.png', -5.773274, -35.204948,
true, // it's a pushpin, I want it bottom-aligned
function(mk) {
markers.addMarker(mk);
});
Below you have a fully functional web application composed of three files, which displays an OpenStreetMap map at the whole page, loads points from a separated JSON file, and renders it accordingly. There’s no server-side processing involved, but the JSON file could easily be something processed by the server, which would load the data from some sort of database. I used jQuery library to handle the mouseover event which shows the popup over the images, but it’s not really necessary if you want to use something else.1) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Rodrigo's map</title>
<style>
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
body { margin:0; font:10pt Arial; color:#242424; }
#mapArea { position:absolute; width:100%; height:100%; }
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="mapArea"></div>
</body>
</html>
2) index.jsfunction PlotData(divId, data) {
function Geo(map, lat, lon) {
return new OpenLayers.LonLat(lon, lat)
.transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
}
function PlotMarker(map, img, lat, lon, bottomOffset, onDone) {
var imgObj = new Image();
imgObj.src = img;
imgObj.onload = function() {
var sz = new OpenLayers.Size(imgObj.width, imgObj.height);
var off = new OpenLayers.Pixel(-(sz.w / 2),
bottomOffset ? -sz.h : -(sz.w / 2));
var ico = new OpenLayers.Icon(img, sz, off);
if(onDone !== undefined && onDone !== null)
onDone(new OpenLayers.Marker(Geo(map, lat, lon), ico));
};
}
var map = new OpenLayers.Map(divId);
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(Geo(map, data.center[0], data.center[1]), data.zoom);
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);
var $map = $('#'+divId),
$det = $('<div></div>').css({
'position':'absolute',
'padding':'0 4px',
'display':'none',
'box-shadow':'2px 2px 3px #999',
'background-color':'rgba(255,255,255,.85)',
'border':'1px solid #AAA'
}).appendTo('body');
$.each(data.points, function(i, pt) {
PlotMarker(map, pt.icon, pt.coor[0], pt.coor[1], true, function(mk) {
markers.addMarker(mk);
mk.events.on({
mouseover: function(ev) {
$det.html(pt.text).css({
left: (ev.pageX < $(document).width() / 2) ?
ev.pageX+'px' : (ev.pageX - $det.outerWidth())+'px',
top: (ev.pageY < $(document).height() / 2) ?
ev.pageY+'px' : (ev.pageY - $det.outerHeight())+'px',
display: 'block'
});
$map.css('cursor', 'pointer');
},
mouseout: function(ev) {
$det.empty().css('display', 'none');
$map.css('cursor', 'auto');
}
});
});
});
}
$(document).ready(function() {
$.getJSON('data.json', function(data) {
PlotData('mapArea', data);
});
});
3) data.json – assumes image “pushpin.png” exists{
"center": [ -5.797942,-35.211782 ],
"zoom": 14,
"points": [
{
"coor": [ -5.799500,-35.21951 ],
"icon": "pushpin.png",
"text": "First point<br/>Anything here"
},
{
"coor": [ -5.790982,-35.19409 ],
"icon": "pushpin.png",
"text": "Other <b>point</b> here"
},
{
"coor": [ -5.802083,-35.20877 ],
"icon": "pushpin.png",
"text": "Something else<br/>placed here"
}
]
}
Enjoy.