1

map.html javascript code

var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

       var vectorSourceJsonp  = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {


            $.ajax({
                        <!-- url: "{% url 'geojson_provinces' %}", -->
                        url:'/geojson_provinces/',
                        dataType: 'json',
                    });
                },
                strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
                    maxZoom: 19
                })),
                projection: 'EPSG:4326'
            });
             // Executed when data is loaded by the $.ajax method.
            var loadFeatures = function(response) {
                vectorSourceJsonp.addFeatures(vectorSourceJsonp.readFeatures(JSON.parse(response)));
            };
            // Vector layer
            var vectorLayerJsonp = new ol.layer.Vector({
                source: vectorSourceJsonp,
                projection : 'EPSG:4326',
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'green',
                        width: 2
                    })
                })
            });
            var mapJsonp = new ol.Map({
                target: 'mapJsonp',
                renderer: 'canvas',
                layers: [osmLayer, vectorLayerJsonp],
                view: new ol.View({
                    center: [-75.923853, 45.428736], 
                    maxZoom: 19,
                    zoom: 11
                })
            });

views.py

def geojson_provinces(request):
    conn = psycopg2.connect(dbname="geodjango",host='localhost',user='postgres', password='postgres', port=5433)
    dict_cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur=conn.cursor()
    res = dict_cur.execute("SELECT ST_AsGeoJson(geom) AS json FROM pft_pft LIMIT 10;")

    points=dict_cur.fetchall()
    print (points)
    json_res  = []
    for row in points:
        json_obj  = row['json']
        print (json_obj)
        json_res.append(json_obj)
        print(json_res)
    #json = simplejson.dumps(data)

    dict_cur.close()
return render_to_response('map.html',
                          {'json_res': json.dumps(json_res)},
                         context_instance=RequestContext(request))

urls.py

url(r'^geojson/$', geojson_provinces, name='geojson_provinces'),

only map is getting displayed . When I use the debugger in chrome this is what i get enter image description here

and finally i get Uncaught TypeError: ol.tilegrid.XYZ is not a function please help! I even tried changing the url to "{% url 'geojson_provinces' %}", but not working

2

In v3.6.0 constructor:

new ol.tilegrid.XYZ(...)

has been replace by static function:

ol.tilegrid.createXYZ(...)

See ol3 upgrade notes.

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.