OpenLayers Anzeige mit GET

Hallo Comunity,
ich arbeite gerade an einer Taxi Racing App mit meinem Team.

Jetzt habe ich die Karte mit dem Code



<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Taxi Racing App : Gruppe Alpha</title>
    <link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
    <style type="text/css">
        
        .olControlTextButtonPanel.vpanel { 
          top: 8px;
          right: 8px;
          left: auto;
        }
        
        .olControlTextButtonPanel.hpanel { 
          top: auto;
          bottom: 8px;
          left: 8px;
          right: auto;
        }
        
        .button1ItemInactive:after,
        .button1ItemActive:after {
            content: "1";
        }
        
        .button2ItemInactive:after,
        .button2ItemActive:after {
            content: "2";
        }
        
        .button3ItemInactive:after,
        .button3ItemActive:after {
            content: "3";
        }
        
        .button4ItemInactive:after,
        .button4ItemActive:after {
            content: "4";
        }
        
        .button5ItemInactive:after,
        .button5ItemActive:after {
            content: "5";
        }
        .button6ItemInactive:after,
        .button6ItemActive:after {
            content: "6";
        }
        .button7ItemInactive:after,
        .button7ItemActive:after {
            content: "7";
        }
        .button8ItemInactive:after,
        .button8ItemActive:after {
            content: "8";
        } .button9ItemInactive:after,
          .button9ItemActive:after {
              content: "9";
          }
        .button10ItemInactive:after,
        .button10ItemActive:after {
            content: "10";
        }


        
    </style>
    <script src="http://dev.openlayers.org/lib/Firebug/firebug.js"></script>
    <script src="http://dev.openlayers.org/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 6.8558292;
        var lat = 50.8417126;
        var zoom = 5;
        var map, layer;
        var untiled;
        var tiled;
        var pureCoverage = false;

        function init(){
            map = new OpenLayers.Map( 'map', {} );
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                  "[url]http://193.70.60.44:8080/geoserver/taxi/wms[/url]", {layers: 'strassenundtaxiroute'} );
            map.addLayer(layer);

            var bounds = new OpenLayers.Bounds(
            6.8558292, 50.8417126,
            6.9573767, 50.9428714
        		);
            var b1 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 1 clicked!") },
                displayClass: "button1"
            });
            
            var b2 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 2 clicked!") },
                displayClass: "button2"
            });
            
            var b3 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 3 clicked!") },
                displayClass: "button3"
            });
            
            var b4 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 4 clicked!") },
                displayClass: "button4"
            });
            
            var b5 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 5 clicked!") },
                displayClass: "button5"
            });
            var b6 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 6 clicked!") },
                displayClass: "button6"
            });
            var b7 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 7 clicked!") },
                displayClass: "button7"
            });
            var b8 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 8 clicked!") },
                displayClass: "button8"
            });
            var b9 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 9 clicked!") },
                displayClass: "button9"
            });
            var b10 = new OpenLayers.Control.Button({
                trigger: function() { alert("Button 10 clicked!") },
                displayClass: "button10"
            });

            var vpanel = new OpenLayers.Control.TextButtonPanel({
                vertical: true,
                additionalClass: "vpanel"
            });
            vpanel.addControls([
                b1, b2,b3,b4,b5
            ]);
            
            var hpanel = new OpenLayers.Control.TextButtonPanel({
                additionalClass: "hpanel"
            });
            hpanel.addControls([
                b5, b6, b7,b8,b9,b10
            ]);

            var pois = new OpenLayers.Layer.Text( "Taxen",
                { location:"./textfile.txt",
                    projection: map.displayProjection
                });
            map.addLayer(pois);


            map.addControl(vpanel);
            map.addControl(hpanel);
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));


            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom)
       		 map.zoomToExtent(bounds);
;
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Taxi Racing App : Gruppe Alpha</h1>
    <div id="tags">
        Taxi Racing App : Gruppe Alpha
    </div>
    <p id="shortdesc">

    </p>

    <div id="panel"></div>
    <div id='map' style='width: 1300px; height: 550px;'></div>

    <div id="wrapper">
        <div id="location">Location</div>
        <div id="scale">
        </div>
    </div>
  </body>
</html>


dargestellt und ich kriege per API → app.get(‘/taxi_server/api/v1.0/taxi’, taxiController.list);
ein Objekt zurück, dass mir die Koordinaten von den Taxis zurückgibt. Wie kann ich das implementieren angehen, habt ihr da Ideen?
Wie kann ich diese Taxis anzeigen auf der Map?

'use strict';
module.exports = function(sequelize, DataTypes) {
  var taxi = sequelize.define('taxi', {
    idtaxi:{
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true,
      field: 'idtaxi'
  },
    state:{
      type: DataTypes.INTEGER,
      field: 'state'

  },
    position:{
      type: DataTypes.JSON,
      field: 'position'
  },
    driver_name:{
      type: DataTypes.STRING,
      field: 'driver_name'
    },
  }, {
    tableName: 'taxi',
    classMethods: {
      associate: models => {
        // associations can be defined here
      }
    }
  });
  return taxi;
};

So sieht die API aus

Hmm, bin leider nicht der OL Experte, aber es müsste ja sowas wie Icon sein, wobei das dort gleich als “Feature” hinzugefügt wird. Und wenn du sehr viele Taxen hast, und die vielleicht clustern möchtest, dann hilft dir Cluster. Anonsten dürfte, auch wenn es noch OL2 ist, dir definitiv das Sammelsurium von Netzwolf hilfreich sein, v.a. der Punkt “Karte mit Markern aus CSV oder JSON-Datei” … ich hoffe doch mal, dass es sich um ein JSON Objekt handelt, was du von der API zurückbekommst.

Ich habe das Problem mit den Markern gelöst,
ich kriege jetzt von dieser URL → http://193.70.60.44:3000/geoserver/taxi_server/api/v1.0/taxi die Positionen der Taxis

z.B mit der Variable Taxen.position.coordinates[1] → Lattitude z.B

Aaaber ich weiß nicht wie ich in JavaScript das implementiere, also wie ich von der APi mit einem GET das Objekt hole und das in eine Variable schreibe, kann mir da jemand behilflich sein ?

Die Zeile
projection: map.displayProjection
ist null. Die displayProjection sollte vorher definiert sein.

Die Kartendarstellung sieht merkwürdig aus. Ich vermute den Fehler im wms.
Köln sieht eigentlich so aus: http://www.openstreetmap.org/#map=12/50.9212/6.9739

auch wenn das nicht mehr OSM relevant ist: z.B. mit http://api.jquery.com/jquery.ajax/ ?!

Ich kriege von dort keine (vernünftige) Antwort.
Könntest du mal eine Musterantwort verfügbar machen ?
Dann könnte dir auch sagen, wie man es abfragt.

Zur Formatierung deiner Karte:
Ich gehe davon aus, dass du in Koeln bist, dann folgende Aenderungen uebernehmen:

-oben
lon=6.95530;lat=50.93456;zoom= 13;

-Anfang von function init()
map = new OpenLayers.Map( ‘map’, {
projection: “EPSG:3857”,// oder projection: “EPSG:4326”,
displayProjection: “EPSG:4326”,
} );

-Stück dahinter
var bounds= new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);

-am Ende von script
//map.setCenter(new OpenLayers.LonLat(lon, lat), zoom)
//map.zoomToExtent(bounds);
var lonlat = new OpenLayers.LonLat(lon, lat);
lonlat.transform(map.displayProjection,map.getProjection());
map.setCenter(lonlat, zoom);

Damit wird die Karte mit den korrekten Koordinaten angezeigt.
Gruß Axel