Unable to use OpenLayer - web

Question

I'm very new with web language and I have to integrate a map in a page. I'm using cshtml with Visual Studio 2015
To do this I have take a code using ol.js. The map have to be displayed, and for each value in my table I localize the city/country from IP and I display for each countries, the number of item.
There is my Index.cshtml
<script type="text/javascript">
var map;
var countriesLayer;
var citiesLayer;
function newCountriesLayer(start, end, item, result) {
return new ol.layer.Vector({
minResolution: 2500,
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '#Url.Action("GetCountries")'
+ '?StartDate=' + start
+ '&EndDate=' + end
+ '&Item=' + item
+ '&Result=' + result
}),
style: function (f, r) {
return [
new ol.style.Style({
text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
})
];
}
});
}
function newCitiesLayer(start, end, item, result) {
return new ol.layer.Vector({
maxResolution: 2500,
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '#Url.Action("GetCities")'
+ '?StartDate=' + start
+ '&EndDate=' + end
+ '&Item=' + item
+ '&Result=' + result
}),
style: function (f, r) {
return [
new ol.style.Style({
text: new ol.style.Text({ text: f.get("title"), fill: new ol.style.Fill({ color: '#673B8F' }), scale: 1.2 }),
image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: 'white' }) }),
})
];
}
});
}
$(document).ready(function () {
var start = $('#startDate').val();
var end = $('#endDate').val();
var item = $('#item').val();
var result = $('#resultat').val();
countriesLayer = newCountriesLayer(start, end, item, result);
citiesLayer = newCitiesLayer(start, end, item, result);
map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers:
[
new ol.layer.Tile({
//source: new ol.source.TileWMS({
// url: 'http://maps.opengeo.org/geowebcache/service/wms',
// params: { LAYERS: 'openstreetmap', VERSION: '1.1.1' }
//})
source: new ol.source.OSM(),
}),
countriesLayer, citiesLayer
],
view: new ol.View2D({
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
zoom: 1,
})
});
});
</script>
In my Controller.cs I have 2 functions:
public ContentResult GetCities(string StartDate, string EndDate, string Item, string Result){...}
public ContentResult GetCountries(string StartDate, string EndDate, string Item, string Result){...}
both return :
return new ContentResult()
{
Content = geoJson.ToString(),
ContentEncoding = System.Text.Encoding.ASCII,
ContentType = "text/json"
};
Value for geoJson is :
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
"id":"CN-30-Guangzhou",
"title":"2",
},
"geometry": {
"type": "Point",
"coordinates": [113.25,23.1167]
}
},
{
"type": "Feature",
"properties": {
"id":"CN-23-Shanghai",
"title":"1",
},
"geometry": {
"type": "Point",
"coordinates": [121.3997,31.0456]
}
},
]}
In the project that I took this code, it works. The map contain 2 points in china : a "1" is displayed in Shanghai and a "2" in Guangzhou.
In my project I have an error :
Uncaught TypeError: Cannot read property 'a' of null
at xl (ol.js:266)
at wl (ol.js:265)
at Bl (ol.js:268)
at Al (ol.js:269)
at nr (ol.js:471)
at pr.mr.f (ol.js:470)
at td (ol.js:38)
at N (ol.js:37)
at Xq.q (ol.js:467)
As I said, I'm very new to web and I lost with that error. If try to check ol.js but it is unreadable. Maybe I'm missing a library or a package but I don't know how to know.