Displaying OSM file with markers

Question

I'm trying to show OSM file which I exported from openstreetmap api.

However, layer I add with OSM file is displaying like just polygons, I cannot show markers (street names, names of buildings etc.) in the map.

Here is the map I'm seeing.

And here is my openlayers init function.

        var lat=18.9003124; //changed due to company policies.
        var lon=30.7738127; //changed due to company policies.
        var zoom=15;
        var map;

        function init(){
            map = new OpenLayers.Map ("map", {
            controls:[
                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());
            map.layers[0].opacity = 0;

            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: "mymap.osm",   //<-- relative or absolute URL to your .osm file
                    format: new OpenLayers.Format.OSM()
                }),
                projection: new OpenLayers.Projection("EPSG:4326")
            });

            map.addLayer(layer);

What am I doing wrong?

Answer 1

You have nothing done wrong so far ;-)

Openstreetmap data is very complex, and needs a rendering style to get the nice map you know from the website. The rendering takes some time, that's why we usually pre-render tiles with mapnik or other software that are delivered by a web server and can be displayed in Openlayers.

The direct import of osm data in openlayers only makes sense if you want to get the geometry of a few objects in your .osm file, while you can add the rest by adding the tile server.

Answer 2

This is what you get by default in OpenLayers, nothing is wrong. To add names and markers, you will have to define vector stylemap (the above is the default stylemap). here is an example http://dev.openlayers.org/examples/styles-context.html

One more thing, you have exported the data from the osm api, so everything is one layer (i.e. points, lines, polygons, roads, buildings everything). This makes it difficult to work. You can use overpass api (http://overpass-turbo.eu/) to get only the required data and manage it as layers (like one layer for buildings and another for roads).