Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am trying to load set of markers dynamically from a text file using OpenLayers.Layer.Text. The problem is that no markers is shown after rendering the page. Below is the JavaScript file that is responsible for drawing the layers and loading the markers.

var mapPanel, tree;
function drawmap() {
var argv = drawmap.arguments;
var source=argv[0];
var target=argv[1];
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size,    offset);

mapPanel = new GeoExt.MapPanel({
    border: true,
    region: "center",
    map: new OpenLayers.Map({allOverlays: false}),
   center: [44.3869825, 33.3209735],
    zoom: 13,
    layers: [

             new OpenLayers.Layer.WMS("BaseMap", "http://localhost:8080/geoserver/wms",
                {
                    layers: 'Layers:baselayer',
                    isBaseLayer: true,
                    visibility: true
                },
                {
                    buffer: 0,
                    visibility: false
                }
            ),
new OpenLayers.Layer.WMS( "Path", "http://localhost:8080/geoserver/wms",
                    {
                        transparent: 'TRUE',
                        layers: 'layers:roadlayer', 
                        viewparams: 'source:'+source+';target:'+target, 
                        isBaseLayer: false, 
                        visibility: true
                    } 
                )
   ]
});

 var textlayer= new OpenLayers.Layer.Text( "MarkersText", {   location:"./markers.txt",projection: mapPanel.map.displayProjection});
mapPanel.map.addLayer(textlayer);                                                        

var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());

 var treeConfig = new OpenLayers.Format.JSON().write([{
    nodeType: "gx_baselayercontainer"
}, {
    nodeType: "gx_overlaylayercontainer",
    expanded: true

}], true);

// create the tree with the configuration from above
tree = new Ext.tree.TreePanel({
    border: true,
    region: "west",
    title: "Layers",
    width: 200,
    split: true,
    collapsible: true,
    collapseMode: "mini",
    autoScroll: true,
    plugins: [
        new GeoExt.plugins.TreeNodeRadioButton({
            listeners: {
                "radiochange": function(node) {
                    alert(node.text + " is now the active layer.");
                }
            }
        })
    ],
    loader: new Ext.tree.TreeLoader({
        // applyLoader has to be set to false to not interfer with loaders
        // of nodes further down the tree hierarchy
        applyLoader: false,
        uiProviders: {
            "layernodeui": LayerNodeUI
        }
    }),
    root: {
        nodeType: "async",
        // the children property of an Ext.tree.AsyncTreeNode is used to
        // provide an initial set of layer nodes. We use the treeConfig
        // from above, that we created with OpenLayers.Format.JSON.write.
        children: Ext.decode(treeConfig)
    },
    listeners: {
        "radiochange": function(node){
            alert(node.layer.name + " is now the the active layer.");
        }
    },
    rootVisible: false,
    lines: false,
    bbar: [{
        text: "Show/Edit Tree Config",
        handler: function() {
            treeConfigWin.show();
            Ext.getCmp("treeconfig").setValue(treeConfig);
        }
    }]
});

// dialog for editing the tree configuration
var treeConfigWin = new Ext.Window({
    layout: "fit",
    hideBorders: true,
    closeAction: "hide",
    width: 300,
    height: 400,
    title: "Tree Configuration",
    items: [{
        xtype: "form",
        layout: "fit",
        items: [{
            id: "treeconfig",
            xtype: "textarea"
        }],
        buttons: [{
            text: "Save",
            handler: function() {
                var value = Ext.getCmp("treeconfig").getValue()
                try {
                    var root = tree.getRootNode();
                    root.attributes.children = Ext.decode(value);
                    tree.getLoader().load(root);
                } catch(e) {
                    alert("Invalid JSON");
                    return;
                }
                treeConfig = value;
                treeConfigWin.hide();
            }
        }, {
            text: "Cancel",
            handler: function() {
                treeConfigWin.hide();
            }
        }]
    }]
});

new Ext.Viewport({
    layout: "fit",
    hideBorders: true,
    items: {
        layout: "border",
        deferredRender: false,
        items: [mapPanel, tree, {
            contentEl: "desc",
            region: "east",
            bodyStyle: {"padding": "5px"},
            collapsible: true,
            collapseMode: "mini",
            split: true,
            width: 200,
            title: "Description"
        }]
    }
});
};

Additionally, the marker text file is :

lat lon title   description icon
 33.3253191  44.3850879  title   description     http://www.openlayers.org/dev/img/marker.png    

Thank you in advance for your help.

share|improve this question
    
Can you add your code on jsfiddle.net? –  Aragon May 1 '12 at 10:01

1 Answer 1

Each column should be delimited by a tab space.

from http://dev.openlayers.org/docs/files/OpenLayers/Layer/Text-js.html

It appears yours aren't.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.