[GIS] Creating markers(vectors) in openlayers

google mapsmarkersopenlayers-2vector

I'm new to OpenLayers,currently in existing project they have created markers in openlayers map by using following code,

// vector layer creation
vLayer = new OpenLayers.Layer.Vector(layerName, {
        projection: map.displayProjection,
        extractAttributes: true,
        styleMap: new OpenLayers.StyleMap({'default' : MarkerStyle}),
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: listurl,
            format: new OpenLayers.Format.GeoJSON()
        })
    });

map.addLayer(vLayer); // Adding the vector layer to the map

To display markers,coordinates are fetching from the url, but now we are having coordinates information in a hidden block of HTML like as follows

<div id="location_1" style="display: none;">
    <input type="hidden" id="latitude_1" value="17.43189">
    <input type="hidden" id="longitude_1" value="78.447167">
</div>
<div id="location_2" style="display: none;">
    <input type="hidden" id="latitude_2" value="15.43189">
    <input type="hidden" id="longitude_2" value="76.447167">
</div>

Now instead of fetching coordinate information from url,I want to use above information(which is in hidden block of HTML) to show markers,how can we modify existing code ?
I've chance to modify HTML code according our convenience.

Best Answer

For example:

lat1 = document.getElementById("latitude_1").value;
lon1 = document.getElementById("longitude_1").value;
point1 = new OpenLayers.Geometry.Point(lon1, lat1);

// If your base layer have different SRS you should reproject your geometries manually
point1.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:3857'));
feature1 = new OpenLayers.Feature.Vector(point1);
vLayer.addFeatures([feature1]);
Related Question