How can I use jQuery Droppable to drag and drop an Icon over an openlayers polygon vector and select the polygon while over on hover? I have managed create a create a popup when over a div element, but I can't figure out how to do the same for a polygon inside the "map" div. Hope that makes sense.

Here is a link to show the concept:


Here is a bit of code to show specifically the bit of code I am struggling with. I can currently select a polygon by clicking... but want to select by dropping an icon on the polygon.

$(function() {

$( "#cow" ).draggable({ revert: true});
$( "#map" ).droppable({
  drop: function( event, ui ) {

    **\\How do I select a polygon on drop here?**
    alert( "Dropped!" );

1 Answer 1


Here is the code I figured out how to use jquery drag and drop to select a polygon. This assumes you have a select control on the map and activated:

 $( "#cow" ).draggable({ revert: true});
    $( "#map" ).droppable({
    drop: function( event, ui ) {
    var farmid = 448; 
    var point = map.getLonLatFromPixel( map.events.getMousePosition(event, ui ) )
    var lon =  point.lon.toFixed(3);
    var lat =   point.lat.toFixed(3);
    var dropPosition = point.lon.toFixed(3) + ' ' + point.lat.toFixed(3);

    type: "GET",
    url: "../php/position.php", 
    contentType: "application/json; charset=utf-8",
    data: "{'farmid':'"+ farmid +"', 'position':'"+ dropPosition +"'}",
    success: function(returnval){ 

    var pid = parseInt(returnval); 
    var selectB = new OpenLayers.Control.SelectFeature([farmbounds]);
    for(var f=0;f<farmbounds.features.length;f++) {
                                    if(farmbounds.features[f].fid == 'farmpaddocks.'+pid+'') {

And here is the php code:

$farmid= $_GET["farmid"];
$position = $_GET["position"];
$db = pg_connect("host=localhost dbname=postgis user=aaaaa password=bbbbb" ); 
$sql = "SELECT * FROM public.farmpaddocks WHERE farmid = '$farmid' AND st_contains(farmpaddocks.the_geom,ST_GeomFromText('POINT($position)',3111)) ='t'";
$resultD = pg_query($db,$sql); 
$paddockid= $rowD[0];
echo $paddockid;


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.