2

I've got another problem here :( I'm following the foss4g_w12 tutorial for building a pgRouting WebApp using openlayers, everything goes well until I added the following statement to my code:

controls = {
          start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
          stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
        }

the map suddenly showed up like this: enter image description here

I already refresh the browser and it didn't change, after I delete the code it goes normal again. here is my entire javascript code:

    var SinglePoint = OpenLayers.Class.create();
    SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
createFeature: function(evt) {
    this.control.layer.removeFeatures(this.control.layer.features);
    OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
    }
    });

    var start_style = OpenLayers.Util.applyDefaults({
        externalGraphic: "start.png",
        graphicWidth: 18,
        graphicHeight: 26,
        graphicYOffset: -26,
        graphicOpacity: 1
    }, OpenLayers.Feature.Vector.style['default']);

    var stop_style = OpenLayers.Util.applyDefaults({
        externalGraphic: "stop.png",
        graphicWidth: 18,
        graphicHeight: 26,
        graphicYOffset: -26,
        graphicOpacity: 1
    }, OpenLayers.Feature.Vector.style['default']);

     var result_style = OpenLayers.Util.applyDefaults({
         strokeWidth: 3,
         strokeColor: "#ff0000",
         fillOpacity: 0
     }, OpenLayers.Feature.Vector.style['default']);

     var map, parser, start, stop, downtown, result, controls;
     function init() {
map = new OpenLayers.Map({
    div: "map",
    projection: "EPSG:900913",
    displayProjection: "EPSG:4326",
    numZoomLevels: 18,
    // approximately match Google's zoom animation
    zoomDuration: 10
});

// create Google Mercator layers
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);

// create Bing layers

// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

var veroad = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Road",
    wrapDateLine: true
});
var veaer = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Aerial",
    wrapDateLine: true
});
var vehyb = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "AerialWithLabels",
    wrapDateLine: true
});

// create OSM layers
var mapnik = new OpenLayers.Layer.OSM();

// layer WMS Lokal
var admin1 = new OpenLayers.Layer.WMS("Administrasi Kota Tangerang Selatan",
            "http://localhost:9090/geoserver/wms",
            {layers: "rute:admin1", format: "image/png", transparent: true},
            {maxScale: 150}
        );
var jalan1 = new OpenLayers.Layer.WMS("Jalan Kota Tangerang Selatan",
            "http://localhost:9090/geoserver/wms",
            {layers: "rute:jalan1", format: "image/png", transparent: true},
            {maxScale: 150}
        );
start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
downtown = new OpenLayers.Layer.Vector("Downtown data area", {style: result_style});
result = new OpenLayers.Layer.Vector("Routing results", {style: result_style});

// create a vector layer for drawing
//var vector = new OpenLayers.Layer.Vector("Editable Vectors");

map.addLayers([
    gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, admin1, jalan1, start, stop, downtown, result
]);
parser = new OpenLayers.Format.WKT();
var feature = new OpenLayers.Feature.Vector();
    downtown.addFeatures([feature]);
    controls = {
          start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
          stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
        }
map.setCenter(new OpenLayers.LonLat(11879804.55, -700076.0324),12);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
//map.zoomToMaxExtent();

}

please help me, because my routing function can't started yet

regards

  • that seems to be a projection problem – Gery Jan 24 '14 at 11:43
  • am I have to change the projection of all layers into EPSG:900913? – iqnaul Jan 24 '14 at 11:46
  • the necessary ones, not sure if all your layers are in 900913, follow this example: http://openlayers.org/dev/examples/google-v3-alloverlays.html, first try to get your basemap layers working, then add your layers above. – Gery Jan 24 '14 at 11:51
  • still no luck, my layers did not showed up :( – iqnaul Jan 24 '14 at 12:05
  • post the error messages, are you using firebug? if not, install it and then check the Net tab. Since you're using geoserver, likely you need to put projection stuff there. – Gery Jan 24 '14 at 12:12
1

I found that var SinglePoint = OpenLayers.Class.create(); is deprecated in OpenLayers 2.13 that I used. I added the deprecated.js script as one of the script source in my HTML head section. I thought it goes well now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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