[GIS] OpenLayers + GeoJSON from a django server does not display features

geodjangoopenlayers-2

I'm having trouble with the vector layer for my little project,

here's the snippet of the javascript block

var map;
        function init(){
            map = new OpenLayers.Map('map', {
              projection: new OpenLayers.Projection("EPSG:3857")
            });
            var osm_layer = new OpenLayers.Layer.OSM("OpenStreetMap");
            map.addLayer(osm_layer);

            var path_layer = new OpenLayers.Layer.Vector("Path Layer", {
                  projection: "EPSG:4326",
                  strategies: [new OpenLayers.Strategy.Fixed()],
                  protocol: new OpenLayers.Protocol.HTTP({
                  url: "{% url 'path_json' route.id %}",
                  format: new OpenLayers.Format.GeoJSON()
                })
                });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addLayer(path_layer);
            map.setCenter(
            new OpenLayers.LonLat(121.032, 14.594).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 12);
            if(!map.getCenter()){
                map.zoomToMaxExtent();
            }
        }

and here's the view that responds with the GeoJSON object:

def get_path_json(request, route_id):
    route = get_object_or_404(Route, pk=route_id)
    geoj = GeoJSON.GeoJSON()
    path = route.path.all()

    path_format = Django.Django(geodjango="path", properties=['mode'])
    path_json = geoj.encode(path_format.decode(path))

    return HttpResponse(path_json, content_type="application/json")

the object is parsed in geoJSON format via vectorformats.

so.. what am i doing wrong? or am i missing something? The map displays but the vector layer doesn't have the features described in the GeoJSON?

Best Answer

Just in case, I opted to use a different approach, since using the above method wasn't working out.

var map = new OpenLayers.Map('map');
    geojson_parser = new OpenLayers.Format.GeoJSON();
base_layer = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayer(base_layer);

path_layer = new OpenLayers.Layer.Vector("Path Layer");
train_path_layer = new OpenLayers.Layer.Vector("Train Path Layer");

path_layer.addFeatures(geojson_parser.read(path_geojson_data));
map.addLayer(path_layer);

train_path_layer.addFeatures(geojson_parser.read(train_path_geojson_data));
map.addLayer(train_path_layer);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(
new OpenLayers.LonLat(121.032, 14.594).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 12);
if(!map.getCenter()){
  map.zoomToMaxExtent();
}

and my view just passes the geoJSON along with the other objects to the template.

Related Question