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 id="location_2" style="display: none;">
    <input type="hidden" id="latitude_2" value="15.43189">
    <input type="hidden" id="longitude_2" value="76.447167">

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.

1 Answer 1


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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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