[mapguide-users] Custom widget in Task pane

Thu Aug 4 00:02:35 PDT 2016

Hi,

I want to create a custom widget in Fusion that opens in Task pane on
clicking. The widget is to implement Google Places search on the map. I
found a result on the mailing list that involves changing the Taskpane.html
file. But that opens in the task pane instants rather than as a widget.

The code for the Taskpane.html is:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="
https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="proj4js-1.1.0/lib/proj4js-compressed.js"></script>

<SCRIPT LANGUAGE="JavaScript">
//Proj4js.defs["EPSG:4326"]="+proj=longlat +ellps=WGS84 +datum=WGS84
+no_defs"
var source = new Proj4js.Proj('EPSG:4326');
Proj4js.defs["EPSG:3857"]="+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0
+lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs"
var dest = new Proj4js.Proj('EPSG:3857');

var geocoder = new google.maps.Geocoder();

function extraire_xy_geocode()
{

  var address =
window.document.getElementById("adresse_google_texte").value;

  if (address == "")
  {
    alert("Erreur : Veuillez fournir une adresse dans la case à cette
fin!");
  }
  else
  {
    geocoder.geocode
   ( {'address': address}, function(results, status)
        {

          if ((status == google.maps.GeocoderStatus.OK) && (results.length
== 1))
          {

   var map = parent.Fusion.getWidgetById('Map');
            var coordll = results[0].geometry.location;
            var lat = coordll.lat();
            var lng = coordll.lng();
       var p = new Proj4js.Point(lng,lat);
            Proj4js.transform(source, dest, p);
       var pt = new parent.OpenLayers.LonLat(p.x,p.y);
            if
 (window.document.forms["origine"].elements["radio_ech_larg"].item(0).checked
== true)
       {
         // selon échelle (scale of map)
                  map.oMapOL.setCenter(pt,map.oMapOL.getZoom(),false,false);

 map.oMapOL.zoomToScale(parseInt(window.document.forms["origine"].elements["txt_echelle"].value),false);
       }
   else
   {
     // selon largeur (width of map)
     map.oMapOL.setCenter(pt,map.oMapOL.getZoom(),false,false);
       var largeur =
parseInt(window.document.forms["origine"].elements["txt_echelle"].value);
     var centreXY = map.oMapOL.getCenter();
     var fenetre = new parent.OpenLayers.Bounds (centreXY.lon - (largeur /
2.0), centreXY.lat - (largeur / 2.0), centreXY.lon + (largeur / 2.0),
centreXY.lat + (largeur / 2.0));
     map.oMapOL.zoomToExtent(fenetre,false);
   }

        var olMap = map.oMapOL;
        var oldmarkers = olMap.getLayersByName ( "Markers" );
        if (oldmarkers[0] != undefined)
{olMap.removeLayer(olMap.getLayer(oldmarkers[0].id))};
        var markers = new parent.OpenLayers.Layer.Markers( "Markers" );
        olMap.addLayer(markers);
        var size = new parent.OpenLayers.Size(21,25);
        var offset = new parent.OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new parent.OpenLayers.Icon('
http://www.openlayers.org/dev/img/marker.png', size, offset);
        markers.addMarker(new parent.OpenLayers.Marker(pt,icon));
        markers.addMarker(new parent.OpenLayers.Marker(pt,icon.clone()));
        }
       else
       {
   if (results.length > 1)
              alert("Le géocodage a échoué, car plus d'un résultat.");
            else
     alert("Le géocodage a échoué pour la raison suivante :  " + status);
          }
        }
    );
  }
}

</SCRIPT>

<style type="text/css">
    @import url(TaskPane.css);
</style>

</head>

<BODY >

<P>
<STRONG><EM>Zoom centre:</EM></STRONG>
</P>

<P>
<FORM  name='googleform' action="javascript:extraire_xy_geocode()" >
<INPUT  type=submit value="Adresse Google" style="line-height: 22px; width:
110px "  />
<input  autocomplete="on" id="adresse_google_texte"
name="adresse_google_texte" type="text" style="WIDTH: 150px; HEIGHT: 22px;
TEXT-ALIGN: left" />
</FORM>
</P>

<FORM autocomplete="on" name='origine' style="BORDER-TOP-WIDTH: 1px;
BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: red; BORDER-BOTTOM-WIDTH: 1px;
BORDER-BOTTOM-COLOR: red; COLOR: red; BORDER-TOP-COLOR: red;
BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: red"    >

<P>
<INPUT type=radio value="echelle" name="radio_ech_larg"  CHECKED>
Echelle</INPUT>
<br>
<INPUT type=radio value="largeur" name="radio_ech_larg"> Largeur</INPUT>
<br>
<INPUT id=txt_echelle style="HEIGHT: 22px; TEXT-ALIGN: right" size=5
value=2000 name=echelle title=Echelle vrml=""></INPUT>
</P>
</FORM>
</P>

</BODY>
</html>

How can i convert this to a widget that i can attach to a toolbar an work
with only when needed ?
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/mapguide-users/attachments/20160804/74e464dc/attachment.html>