Answered - OpenLayers.Layer.Text doesn't add Markers

Nathan_Jaynes · 2008-11-18T17:00:13.000Z

Answered - With other issues that will take furthur efforts on my part to solve!:rolleyes:

What did I learn (please correct me if I am wrong here):

The text file was being cached by my browser, so when I made changes, I could not see the results.
A drive letter path to the text file will not work. So using “C:\textfile.txt” is out.
If you are going to put the icon file name in the text file and you only want to put it on the last line then you still need the extra tab on the end of the other lines.

Example of working file. See the “” text?:
point title description icon
35,-81 aaa bbb
36,-81 ccc ddd
34,-81 eee ffff
10,20 my orange title my orange description
2,4 my aqua title my aqua description
42,-71 my purple title my purple description
is great. http://www.openlayers.org/api/img/zoom-world-mini.png

Now to create an aspx page to stream back the data from the SQL Server data source. (I know that sounds craze, but I am in a Microsoft shop!!!)

Original question starts here…

Newbie on this end…

I have sucessfully created a map centered on me!

I can add a marker using OpenLayers.Layer.Markers and addMarker.

I would prefer to use the functionality of OpenLayers.Layer.Text to add a long list of markers, but I have been unsucessful at getting any of the examples that I have seen to work.

Here is my Marker example and it works:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 100%;
        height: 100%;
        border: 0px;
        padding: 0px;
        position: absolute;
     }
body {
        border: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
     }
    </style>

    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript yourself) -->
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    
    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity,
        // but maybe you want to get from URL params)
        var lat=35.380000
        var lon=-81.38000
        var zoom=12
        
        var map; //complex object of type OpenLayers.Map

        //Initialise the 'map' object
        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                            maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'mi',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );


            // Define the map layer(s)
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerOsmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerOsmarender);
        
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter (lonLat, zoom);
            
            //Add a Marker
            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('red.png',size,offset);
            layerCenterMap = new OpenLayers.Layer.Markers("Breakdowns");
            map.addLayer(layerCenterMap);
            
            layerCenterMap.addMarker(new OpenLayers.Marker(lonLat,icon));
            
        }
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Here is my OpenLayer.Layer.Text example and it does not work:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 100%;
        height: 100%;
        border: 0px;
        padding: 0px;
        position: absolute;
     }
body {
        border: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
     }
    </style>

    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript yourself) -->
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    
    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity,
        // but maybe you want to get from URL params)
        var lat=35.380000
        var lon=-81.38000
        var zoom=12
        
        var map; //complex object of type OpenLayers.Map

        //Initialise the 'map' object
        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                            maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'mi',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );


            // Define the map layer(s)
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerOsmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerOsmarender);
            
            var pois = new OpenLayers.Layer.Text( "My Points", { location:"./textfile.txt", projection: new OpenLayers.Projection("EPSG:4326")} );
            layerMyPoints = new OpenLayers.Layer.Text( "My Points", { location:"cherryville.txt"});
            map.addLayer(pois);
            
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter (lonLat, zoom);
                
        }
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Here is the file text that I am using:
lat lon icon iconSize
35.380000 -81.38000 blue.png 24,24
35.300000 -81.38000 red.png 16,16

All of the files (HTML and PNGs) are in the same directory.

Can someone point me in the right direction?

Ultimately I would like to pull the layers from a SQL Server table with a CSV or XML file.

Thanks ahead of time!
Nathan Jaynes
nathanj@fleetnetamerica.com

emj · 2008-11-20T00:00:22.000Z

Thanks interesting, it should be easy to output that from MSSQL.