OpenLayers Simple Example
From OpenStreetMap Wiki
Deploy an OpenStreetMap slippymap on my own website
This simple example may help if you are Deploying your own Slippy Map. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!
Contents |
Note: OpenStreetMap is serving the tile images
Please note that tile images are coming from the OpenStreetMap servers. Although OSM are supporting this kind of usage at the moment, we offer no guarantees. There may be downtime (planned or unplanned), and tile URLs may change.
If you are expecting heavy user load, then you should discuss with everyone first (Contact). You should consider following the other instructions on creating your own tiles, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.
Of course the images themselves (our maps) change over time too, not necessarily for the better.
Instructions
Copy the following into a new HTML file, and view it in a browser.
The smallest example
<html><body> <div id="demoMap"></div> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script> map = new OpenLayers.Map("demoMap"); map.addLayer(new OpenLayers.Layer.OSM()); map.zoomToMaxExtent(); </script> </body></html>
Note, that this code doesn't work correctly in all browsers, because it lacks the height/width as shown in the next example, but in Firefox it's ok. The code shows how you
- initialise a Map object with a DIVs id
- add a OpenStreetMap Layer
- force the tiles to show by calling zoomToMaxExtent, you could also call zoomToExtent, but for that you need a bounds object in the correct projection...
A little more extensive example
<html> <head> <title>OpenLayers Demo</title> <style type="text/css"> html, body, #basicMap { width: 100%; height: 100%; margin: 0; } </style> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script> function init() { map = new OpenLayers.Map("basicMap"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Center of the map .transform( new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection ), 15 // Zoom level ); } </script> </head> <body onload="init();"> <div id="basicMap"></div> </body> </html>
Extensions
Other tile sets
If you are deploying your own tile images (for example, with Mapnik), just use the layer definition below:
var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19}); map.addLayer(newLayer);
The addition of /${z}/${x}/${y}.png URL template has been required since the 27th June 2009.
Change the url and numZoomLevels as appropriate.
Serving OpenLayers.js
You can serve the OpenLayers.js script from your own server, just download that script e.g.:
$wget http://www.openlayers.org/api/OpenLayers.js
and then give a relative file reference in place of the url to the script in your HTML
Use Proj4js for other transformations
The example lets you use WGS84 coordinates to navigate in a sphericalMercator projected OSM map. If your coordinates are in a different projection, you can add Proj4js to perform reprojections.
Add the proj4js.js script from http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js to your page (after the OpenLayers lib!)
Add your projection defintion (these are obtainable from the Proj4 project, you need the a record from \proj\nad\epsg
See http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs for examples
Example for EPSG:28992 (new RD)
Proj4js.defs["EPSG:28992"] = "+title=Amersfoort / RD New +proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs";
Then, you can use EPSG:28992 coordinates and this epsg code in the transformfunction instead of WGS84
like so:
map.setCenter( new OpenLayers.LonLat(155000,465000) // Center of the map .transform( new OpenLayers.Projection("EPSG:28992"), // transform from new RD new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection ), 15); // Zoom level
Develop this example?
Feel free to edit this page with improvements.
This example was originally created by Harry Wood (and anyone else who edits this page). It is intentionally more basic, with only one layer defined, and no support for URL params (permalink) etc. So adding these features is not necessarily an improvement. In fact, if you have ideas for making this even more simple, that would be good.
Related
- OpenLayers Marker Add a simple static marker
- Openlayers POI layer example - Explains how to show POI markers with an overlay layer
- Full documentation of classes used is at the OpenLayers site or in the more up to date developer docu
- For further help and inspiration on using OpenLayers, you may wish to see the OpenLayers Examples.
- Another example of embedding a slippy OSM map with a GPX track on your website, based on the text above.
- Embed an OSM map with your track in webpage in the way similar to Google Maps (just provide a GPX or KML file).
