0

I'm using OpenLayers 3 and I'm trying to load a geojson file and draw it's contents to a map. I'm following the example from OpenLayers website ( http://openlayers.org/en/v3.14.2/examples/geojson.html ) but it doesn't seem to work. I get no errors in the console just I get nothing drawn as well on the map. Here is my code:

var imageForGeoJSON = new ol.style.Circle({
    radius:5,
    fill:null,
    stroke: new ol.style.Stroke({
    color:'red', width:1
    })
});

var geoJSONStyles = {
   'Point': new ol.style.Style({
    image:imageForGeoJSON})
};

var styleFunction = function(feature){
return geoJSONStyles[feature.getGeometry().getType()];
};


//On button click I try to draw the points on the map
$("#getButton").click(function(){
  $.getJSON('http://localhost:8080/path/filePath/myFile.geojson', function(data){

  var geoJSONVectorSource = new ol.source.Vector({
    features:(new ol.format.GeoJSON()).readFeatures(data)
  });

  var geoJSONVectorLayer = new ol.layer.Vector({
      source: geoJSONVectorSource,
      style: styleFunction,
      visible:true
      });

  map.addLayer(geoJSONVectorLayer);

  //I try those ways to load again the map but that doesn't seem to work either

  map.changed();
  map.render();
  map.renderSync();
  geoJSONVectorSource.changed();
  geoJSONVectorLayer.getSource().changed();
 });
});

The problem doesn't seem to be the geojson file as even if I add the geojson from the example it still doesn't work. Also when I console.log the data I seem to get it correctly.

Any ideas??Thanks!

  • You should try the selected solution in the possibly duplicate question (link in other comment). It looks like it's the same issue. – Alvin Lindstam Mar 31 '16 at 06:27
  • Ok so I tried the example. The thing is that i get a really weird error in the console: the error is " : " in ol.js . The code I used is as follows: var geojsonSource = new ol.source.Vector({ url: ' localhost:8080/path/filePath/myFile.geojson ', format: new ol.format.GeoJSON() }) }); var geojsonLayer = new ol.layer.Vector({ source: geojsonSource, style: styleFunction }); addLayer(geojsonLayer); Can anybody help with this please?Thanks!! –  Mar 31 '16 at 09:35
  • Actually going to the link https://stackoverflow.com/questions/32455040/how-to-specify-the-projection-for-geojson-in-openlayers3/32455939#32455939 found at the first answer of the question solved my problem! In addition I used relative path isntead of absolute path for the geojson file. –  Mar 31 '16 at 12:32

0 Answers0