Marker from User Input

Application which shows a marker at user provided input

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
<div id="map"></div>

CSS

#map {
    width:400px;
    height:400px;
}

JavaScript

// your JS code 
console.log("Hola, all!");
alert("Hello JS World!");

// my data is a label/ID for what we store, which is the object stored in variable d, 
// whose value is {"k1":[{"a":5, "b":-6}]}, which consists of a key called k1 
// with an array as its value: [{"a":5, "b":-6}]
var d = {"k1":[{"a":5, "b":-6}]};
localStorage.setItem("myData",JSON.stringify(d));
// you'd need to modify the above, to store all your points


//next [presumably after closing the browser, and reloading our html]
// we can fetch the stored data, just by supplying its key:
var dataStored = JSON.parse(localStorage.getItem("myData"));
// verify that we fetched our data correctly
console.log(dataStored); 
// we can iterate through our array [of points], like so:
var a = dataStored.k1; // 'a' will contain our array
for(var indx in a) { // indx is 0,1,2...
  console.log(a[indx]); // this could be a single point
}

// load and setup map layers
initMap();

// here's how to plot just ONE [lat,long] on the map! 
addMarker(35,-118); 
    
    
    
    

function initMap() {
        map = new OpenLayers.Map('map');
        basemap = new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayer(basemap);
        markers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);
        map.setCenter(
            new OpenLayers.LonLat(-71.147, 42.472).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ), 12
        );
}// initMap()


function addMarker(latitude, longitude) {
        var lonLat = new OpenLayers.LonLat(longitude, latitude)
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
        );
        var point = new OpenLayers.Marker(lonLat);
        markers.addMarker(point);
        map.setCenter(lonLat, 8);
        //console.log(latitude + ", " + longitude);
}//...