[GIS] How to place a couple of html elements on the map

openlayers-2

I need to place html elements for drawing in it some text and graphic by Raphaeljs.

Is it possible?

I'am trying to create an empty marker for each visible feature and then erase icon container and place into it raphael canvas:

var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);

var size = new OpenLayers.Size(1, 1);
var offset = new OpenLayers.Pixel(0, 0);
var icon = new OpenLayers.Icon('/i/b.gif', size, offset);

var marker_items = {}, current_items = {}, centroid, x, y, key, marker, $marker;

layer4.events.register('moveend', layer4, function(e){
    current_items = {};
    for (var i=0, n=layer4.features.length; i<n; i++) {
        centroid = layer4.features[i].geometry.getCentroid(); 
        x = centroid.x, y = centroid.y;
        key = 'll-'+x+'-'+y;
        current_items[key] = true;
        if (marker_items[key])
            continue;

        // create new marker and store it in hash by key
        marker_items[key] = new OpenLayers.Marker(new OpenLayers.LonLat(x, y), icon.clone());
        markers.addMarker(marker_items[key]);

        // erase icon container, add canvas, and draw raphael graphics
        $marker = $(marker_items[key].icon.imageDiv).empty();
        $canvas = $('<div class="chart-canvas"></div>').appendTo($marker);
        Raphael($canvas.get(0), 70, 70).piechart(35, 35, 35, [55, 20, 13, 32, 5, 1, 2, 10]);
    }

    // remove markers that not visible
    for (i in marker_items) {
        if (!current_items[i]) {
            markers.removeMarker(marker_items[i]);
            delete marker_items[i];
        }
    }
});

I have successfully draw graphics, but maybe there is more simple way?

Best Answer

you can achieve this with adding a div in your body tags.

    <div id="graphic"></div>
   </body>
</html>

than you can change it with this way:

OpenLayers.Util.getElement("graphic").innerHTML = yourGraphicElement

i hope it helps you....

Related Question