I'm working with GeoExt and Openlayers and HTML, and I need to draw a line when the user clicks an HTML button. I created a Function Prueba, but nothing happens. If I want to add a control with my function, it works perfectly. Thanks for your help. Here is my js code:

    enabled: true,
    disableCaching: false,
    paths: {


Ext.onReady(function() {
    var me = this,layers = [];
      var apiKey =   "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

        //Mapa OpenLayer
        map = new OpenLayers.Map('map');

        //Mapas OpenLayer WMS:Web Map Service////
        var Wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'});
        var OpnSt= new OpenLayers.Layer.OSM.Mapnik("Mapa OpenStreet");

        //Mapas de Google/////
        var gphy = new OpenLayers.Layer.Google(
            "Google Fisico",
            {type: google.maps.MapTypeId.TERRAIN}
        var gmap = new OpenLayers.Layer.Google(
            "Google Calles",
            {numZoomLevels: 20}
        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrido",
            {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
        var gsat = new OpenLayers.Layer.Google(
            "Google Satelite",
            {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
        //Mapa Bing
        var bing =new OpenLayers.Layer.Bing({
            key: apiKey,
            type: "AerialWithLabels",
            name: "Bing Aereo + Texto",
            transitionEffect: 'resize'

        var bingRoad = new OpenLayers.Layer.Bing({
            key: apiKey,
            type: "Road",
            // custom metadata parameter to request the new map style - only useful
            // before May 1st, 2011
            metadataParams: {
                mapVersion: "v1"
            name: "Bing Caminos",
            transitionEffect: 'resize'

     //Creamos el Panel Switcher 
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.addControl(new OpenLayers.Control.MousePosition({prefix:'Longitud | Latitud: ', separator: ' | '}));
    //Agregamos los tipos de Mapas

    var mapPanel = Ext.create("GeoExt.panel.Map", {
        renderTo: "DivMap",
        layout: 'fit',
        width: "100%",
        height: "100%",
        map: map,
        zoom: 2


function Prueba(){
    var vector = new OpenLayers.Layer.Vector("Lineas");
    var line= new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path);

and here is my HTML code when user clicks:

<td class="op"><input type="checkbox"  value="line" onclick="Prueba()" name="type"/></td>
  • I'm not sure what you are trying to do. In the Given Function, you are adding the control, but not activating it. Even if it was activated, the user will have to draw the line; It will not be drawn automatically, without the user-interaction. Commented May 19, 2013 at 4:25
  • Thanks Devdatta How can i activate it? i do not understand. I believed that when i call the function prueba, would activate the line drawing control. But the mouse pointer has no changes.
    – user18097
    Commented May 19, 2013 at 21:09
  • What do you want to do? DO just want to activate the control and allow the user to draw the line, or do you want to draw the line programatically? Commented May 20, 2013 at 3:05
  • Hi Devdatta i just want to activate the control and allow the user to draw the line. I have been doing this before but using the GEoExt Action, with no problem. but now i want to activate the control with my function Prueba, once again when the control is activate , the user should be able drawing a line. I've been testing activate e.g function Prueba(){ new OpenLayers.Control.ScaleLine() } and this works perfectly, thanks.
    – user18097
    Commented May 20, 2013 at 14:25

2 Answers 2


Some controls in OpenLayers are used to interact with objects in the map. These controls need to be activated.

You can have only one such active control at one time.

To activate the Draw Feature control in your code, your function should be:

function Prueba(){
    var vector = new OpenLayers.Layer.Vector("Lineas");
    var line= new OpenLayers.Control.DrawFeature(vector,OpenLayers.Handler.Path);
   line.activate(); //you have forgotten this

Some controls are not used to directly interact with objects in the map. These controls need not be activated. Examples of adding such controls:

map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());

Here is a link which may help you.

  • Would you be able to expand upon your Answer, please? It is fine (often good) to include links but if this one were to break there is nothing in your Answer that would help subsequent readers.
    – PolyGeo
    Commented May 19, 2013 at 8:31
  • Thanks PlyGeo, i'm based in the link example you give me, but i do not know what i doing wrong, thanks.
    – user18097
    Commented May 19, 2013 at 19:50

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.