Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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()));
share|improve this question
    
Hi @Ben, welcome to our site! I removed the "newbie" from your title because questions ought to stand on their own quality; you have done a great job formulating your question and simplifying the code (which is very non-newbie behavior); and you don't seem to be asking for watered-down answers. –  whuber Jul 21 '11 at 13:43
    
@whuber Fair Enough. Thanks. –  Ben Jul 21 '11 at 13:44

1 Answer 1

up vote 6 down vote accepted

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

share|improve this answer
    
Thanks. Through your answer I added the .transform() to the point location and it works –  Ben Jul 21 '11 at 13:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.