5 :: Multiple Markers + Geolocation + OpenStreetMap = fail

So I was able to add multiple markers in OpenStreetMap and I was able to use Geolocation in OpenStreetMap but I – so far – have been unable to do both in the same map.

My problem, I’ve come to believe is that I’m still very shakey with JavaScript. My geolocation example of code uses a variety of functions that are called upon…

    <script src="OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

        navigator.geolocation.getCurrentPosition(function(position) {
            document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + "   Longitude: " +
            position.coords.longitude + "<p>";
            var lonLat = new OpenLayers.LonLat(position.coords.longitude,
                                    position.coords.latitude)
                      .transform(
                                  new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
                                              map.getProjectionObject() //to Spherical Mercator Projection
                                            );

            markers.addMarker(new OpenLayers.Marker(lonLat));

            map.setCenter(lonLat, 16 // Zoom level
            );

        });
        //map = new OpenLayers.Map("basicMap");
        //var mapnik = new OpenLayers.Layer.OSM();
        //map.addLayer(mapnik);
        map.setCenter(new
        OpenLayers.LonLat(3,3) // 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
         );
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

      }
    </script>

  </head>

  <body onload="init();">

And in my multiple markers example, the authors used one large “init” function that is called when the HTML body is declared and all the subsequent functions are largely called using variables…

function init() {
map = new OpenLayers.Map({
    div: "map-div",
    projection: new OpenLayers.Projection('EPSG:900913'),
    'displayProjection': new OpenLayers.Projection('EPSG:4326')

});

var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);

var long = -83.011 ;
var lat =    42.291 ;

var centerlonlat = new OpenLayers.LonLat( long , lat );

centerlonlat=centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 12;
map.setCenter(centerlonlat,zoom);

// Step 1: Create new layerstyle : vector
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

// Step 2: Create new pointlayer (for all points)
 pointLayer = new OpenLayers.Layer.Vector("Layer Name", {style: layerStyle});
.....

So, I don’t know if there is a formal computer science term for this but it seems to me – as a layperson, it’s as if the code is being written in two different grammatical tenses, and I don’t have a grip on what the code actually does to make the minor adjustments to make them come together.

Or it could be that the OpenLayers.js is just a “a scary, scary place to be” for new users.

Perhaps instead of cutting my teeth on the complicated JavaScript library of OpenLayers, I should keep trying other libraries until I get a better understanding of how it all works.

Added to the TODO list:

Leave a Reply

Your email address will not be published. Required fields are marked *