Openlayers POI layer example
From OpenStreetMap
Contents |
Purpose
The intention is to show markers for POIs (Points Of Interest) on top of an OSM slippy map.
This example shows a very simple way of doing this.
The files
index.html
Copy the following into a new HTML file and name it index.html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
position: absolute;
}
body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
<!--
var map;
function init(){
map = new OpenLayers.Map('map',
{ maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels: 19,
maxResolution: 156543.0399,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([layerMapnik,layerTah]);
var newl = new OpenLayers.Layer.Text( "My Points", { location:"./textfile.txt"} );
map.addLayer(newl);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(11.59,48.14).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 12);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map"></div>
</form>
</body>
</html>
textfile.txt
Then create a second file called textfile.txt, which could look like this:
point title description icon iconSize iconOffset 6127890,1297484 Title One Description one<br>Second line.<br><br>(click again to close) Ol_icon_blue_example.png 24,24 0,-24 6129000,1285000 Title Two Description two. Ol_icon_red_example.png 16,16 -8,-8
The point coordinates at the beginning of the lines have to be values in Mercator projection. That means you have to convert your latitude and longitude values from degree values to Mercator. See the Mercator page for examples on how to do this.
In a future version of OpenLayers (it will be in 2.6 which is soon to be released), it will be possible to enter the point coordinates as lat/long pairs, rather than as Mercator coordinates.
Icon files
Then you want to download the two icon files that are needed by this example:
- Ol_icon_blue_example.png
- Ol_icon_red_example.png
Result
All four files have to be in the same folder on your web server.
Now you can open a browser window with the URL of your new index.html file. You will see OSM maps, served from the main server. If you click on the layers switcher symbol ("+" in the top right corner of the map), you will see an overlay layer called "My Points". This layer shows the markers defined by the file textfile.txt. The blue and the red marker on the map are the visible result.
