Home/ Questions/Q 7728025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T05:36:44+00:00

I want to display multiple markers, and when i click on each marker it

  • 0

I want to display multiple markers, and when i click on each marker it has to open framecloud popup with customized data.

I couldn’t find any tutorial regarding open framecloud popup when on click of marker.

please help me regarding this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This link is helpful. From it I created this code as a demonstration:

    <html>
<head>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, mappingLayer, vectorLayer, selectMarkerControl, selectedFeature;

        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("tempId", feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     selectedFeature.attributes.salutation + " from Lat:" + selectedFeature.attributes.Lat + " Lon:" + selectedFeature.attributes.Lon,
                                     null, true);
            feature.popup = popup;
            map.addPopup(popup);
        }

        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }   

        function init(){
            map = new OpenLayers.Map( 'map');
            mappingLayer = new OpenLayers.Layer.OSM("Simple OSM Map");

            map.addLayer(mappingLayer);
            vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {projection: "EPSG:4326"}); 
            selectMarkerControl = new OpenLayers.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
            map.addControl(selectMarkerControl);

            selectMarkerControl.activate();
            map.addLayer(vectorLayer);
            map.setCenter(
                new OpenLayers.LonLat(0, 0).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject())

                , 1
            );    
        }

        function placeRandomMarker(){
            var randomLat = Math.floor((Math.random()*180)-90);
            var randomLon = Math.floor((Math.random()*180)-90);
            var randomLonLat = new OpenLayers.Geometry.Point( randomLon, randomLat);
            randomLonLat.transform("EPSG:4326", map.getProjectionObject());
            var randomFeature = new OpenLayers.Feature.Vector(randomLonLat,
                                    { salutation: "hello world", Lon : randomLon, Lat : randomLat});
            vectorLayer.addFeatures(randomFeature);
            var popup = new OpenLayers.Popup.FramedCloud("tempId", new OpenLayers.LonLat( randomLon, randomLat).transform("EPSG:4326", map.getProjectionObject()),
                       null,
                       randomFeature.attributes.salutation + " from Lat:" + randomFeature.attributes.Lat + " Lon:" + randomFeature.attributes.Lon,
                       null, true);
            randomFeature.popup = popup;
            map.addPopup(popup); 
        }


    </script>


</head>
<body onload="init()">

<div id="map" style="height:600px; width: 1000px;"></div>
<button onclick="placeRandomMarker()">Place Marker</button>
</body>
</html>

    It has a vector layer for placing points (which you could style with a style map to be custom shapes or using graphic markers. The vector layer has an associated SelectFeature Control which calls code to add FramedCloud popups to the map.

    • 0