[GIS] Trying to place a Point geometry on OSM map, unsuccessfully

openlayers-2

I have a piece of code that takes a map layer and places a vector layer on top of that.
Currently, I'm just trying to place a few points on top of the map, unsuccessfully.

I managed to place 1 point but it would only stay in the middle of the map.

I took all the html code and simplified it.
Here is the code for the whole page, it's standalone, so you can just copy paste into a new html page and see the problem.

<html>
<body onload="initMapp()">
    <div id="mapp" class="smallmap"></div>
</body>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script>
        //      $(document).ready(function() {
        //          initMapp();
        //      })

        var lon = 0;
        var lat = 0;
        var zoom = 3    ;

        var map; //complex object of type OpenLayers.Map

        function initMapp() {

            map = new OpenLayers.Map("mapp", {
                units : 'm'
            });

            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            layerMapnik.setOpacity(1);
            map.addLayer(layerMapnik);

            addPointToMap(map);

            var switcherControl = new OpenLayers.Control.LayerSwitcher();
            map.addControl(switcherControl);
            switcherControl.maximizeControl();

            if (!map.getCenter()) {
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map
                        .getProjectionObject());
                map.setCenter(lonLat, zoom);
            }
        }

        function addPointToMap(pMap){
            var coordinates = new Array();

            var pointStyle = {externalGraphic: 'http://www.humanized.com/weblog/images/persimmon.gif', graphicHeight: 20, graphicWidth: 20}

            // Make Point
            coordinates.push(new OpenLayers.Geometry.Point(33, 33));
            var pointsGeometry = new OpenLayers.Geometry.MultiPoint(coordinates);
            var pointFeature =  new OpenLayers.Feature.Vector(pointsGeometry, null, pointStyle);

            // Layer
            var pointsLayer = new OpenLayers.Layer.Vector("Points Layer");
            pointsLayer.addFeatures([pointFeature]);
            pMap.addLayer(pointsLayer);         
        }
  </script>
  <style>
.smallmap {
    height: 80%;
    width: 80%;
}
  </style>
</html>

To reiterate, how do you place the point at some location on the map? (I have lon/lat)

Thanks!

Update

Just to make it easier for readers in the future.
The answer which is marked as the solution below only hints at the full solution.
The 'full solution' is to modify the point creation code as such:

// Make Point
coordinates.push(new OpenLayers.Geometry.Point(33, 33).transform(new OpenLayers.Projection("EPSG:4326"), map
                        .getProjectionObject()));

Best Answer

Check this similar question: How to overlay lat/lon points on a Google layer in OpenLayers 2?. It's for Google Maps but you can just as well use OSM as a background. The rest still applies.

Related Question