How to display multiple markers with separate framecloud popups in openlayers?

I want to display multiple markers and when I click on each marker it should open a framecloud popup with custom data.

I haven't been able to find any tutorial regarding the framecloud popup open when the marker is clicked.

please help me on this.

+3


source to share


1 answer


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

<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 point placement vector layer (which you can create with a custom shape style map or using graphic handles . The vector layer has an associated SelectFeature Control that calls the code to add FramedCloud popups to the map.

+4


source







All Articles