OpenLayers osm file example

From OpenStreetMap Wiki
Jump to navigation Jump to search

OpenLayers has some built-in support for .osm files. It will automatically convert elements into a vector layer display.

Running example

To run the example code

  • Copy and paste the code below into a fresh new file. Call it 'myexample.html'
  • Copy and paste the example OSM XML into a fresh new file. Call it 'myosmfile.osm'
  • Double click 'my example.html' to open it as local file in your favourite web browser.

This works in firefox, and safari. Not tested in IE (FIXME). In chrome this doesn't work locally due to javascript security restrictions, but it does when you come to run this from the web. Upload both files to a web server somewhere.

Put this in a .html file

        <script src=""></script>
        <script type="text/javascript">
            var lat=34.070;
            var lon=-118.73;
            var zoom=15;
            var map;
            function init(){
                map = new OpenLayers.Map ("map", {
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                    maxResolution: 156543.0399,
                    numZoomLevels: 19,
                    units: 'm',
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326")
                } );
                map.addLayer(new OpenLayers.Layer.OSM());
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
                map.setCenter (lonLat, zoom);

                //Initialise the vector layer using OpenLayers.Format.OSM
                var layer = new OpenLayers.Layer.Vector("Polygon", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "myosmfile.osm",   //<-- relative or absolute URL to your .osm file
                        format: new OpenLayers.Format.OSM()
                    projection: new OpenLayers.Projection("EPSG:4326")
    <body onload="init()">
        <div id="map" class="smallmap"></div>

Put this in myosmfile.osm

<?xml version='1.0' encoding='UTF-8'?>
<osm version='0.6' generator='JOSM'>
  <bounds minlat='34.0662408634219' minlon='-118.736715316772' maxlat='34.0731374116421' maxlon='-118.73122215271' origin='OpenStreetMap server' />
  <node id='358802885' timestamp='2009-03-11T06:30:08Z' user='yellowbkpk' visible='true' version='1' lat='34.0666735' lon='-118.734254'>
    <tag k='gnis:created' v='06/14/2000' />
    <tag k='gnis:county_id' v='037' />
    <tag k='name' v='Santa Monica Mountains National Recreation Area' />
    <tag k='leisure' v='park' />
    <tag k='gnis:feature_id' v='277263' />
    <tag k='gnis:state_id' v='06' />
    <tag k='ele' v='243' />
  <node id='453966480' timestamp='2009-08-02T03:36:00Z' user='Apo42' visible='true' version='1' lat='34.07234' lon='-118.7343501' />
  <node id='453966482' timestamp='2009-08-02T03:36:01Z' user='Apo42' visible='true' version='1' lat='34.0670965' lon='-118.7322253' />
  <node id='453966143' timestamp='2009-08-02T03:35:45Z' user='Apo42' visible='true' version='1' lat='34.0724577' lon='-118.7364799' />
  <node id='453966130' timestamp='2009-08-02T03:35:44Z' user='Apo42' visible='true' version='1' lat='34.0671122' lon='-118.7364725' />
  <node id='453966490' timestamp='2009-08-02T03:36:02Z' user='Apo42' visible='true' version='1' lat='34.0722227' lon='-118.7322321' />
  <way id='38407529' timestamp='2009-08-02T03:37:41Z' user='Apo42' visible='true' version='1'>
    <nd ref='453966480' />
    <nd ref='453966490' />
    <nd ref='453966482' />
    <nd ref='453966130' />
    <nd ref='453966143' />
    <nd ref='453966480' />
    <tag k='park:type' v='state_park' />
    <tag k='csp:unitcode' v='537' />
    <tag k='admin_level' v='4' />
    <tag k='name' v='Malibu Creek State Park' />
    <tag k='csp:globalid' v='{4A422954-089E-407F-A5B3-1E808F830EAA}' />
    <tag k='leisure' v='park' />
    <tag k='attribution' v='CASIL CSP_Opbdys072008' />
    <tag k='note' v='simplified with josm to reduce node #' />
    <tag k='boundary' v='national_park' />

Extending this example

Of course you can use your own OSM file. e.g. using JOSM to download a little bit of data. Simply save from JOSM to overwrite myosmfile.osm. Keep it small. Too many elements and it will load too slowly in the browser.

It may be possible to access various data in the tags e.g. to make it pops up with details when you click on elements.

This example shows native .osm support within OpenLayers, but for complex projects it may not be the best approach. You might instead convert OSM data into KML for example, then follow OpenLayers KML examples, or you might add elements one by one onto a vector layer (think of it as converting osm format into javascript commands)