geojson data not rendering with openlayers in geodjango

Question

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

Answer 1

In v3.6.0 constructor:

new ol.tilegrid.XYZ(...)

has been replace by static function:

ol.tilegrid.createXYZ(...)

See ol3 upgrade notes.