1

I'm using GeoDjango to render many points on a map based on OpenLayers 5. My points have EPSG 4326 and the map has EPSG 3857, I need to reproject the points. On the OpenLayers API I've founded two parameters that are useful: dataProjection and featureProjection.

I've used they:

var geojsonObject = {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [{% for d in geometry %}
    {
      "type": "Feature",
      "properties": {
        "pk": "{{ d.pk }}"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [{{ d.coord_lon_lat }}]
      }
    {% if forloop.last %}} {% else %}}, {% endif %}{% endfor %}
  ]
}

var vectorLayer = new ol.layer.Vector({
 source: new ol.source.Vector({
   format: (new ol.format.GeoJSON({
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
    })).readFeatures(geojsonObject)
 }),
 style: new ol.style.Style({
 ...
 }),
});

var OpenStreetMap = new ol.layer.Tile({
....
});

var map = new ol.Map({
  layers: [
    OpenStreetMap,
    vectorLayer,
  ],
  target: 'map',
    render: 'canvas',
  view: new ol.View({
    center: [0.0, 0.0],
    zoom: 2,
  })
});

But I don't see any points on the map. Why?

If I use the serialization of GeoJSON I can see all points on the map.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '{% url 'points_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
 style :new ol.style.Style({
     image: new ol.style.Circle({
         radius: 7,
         stroke: new ol.style.Stroke({
           color: 'rgba(255,0,0,1.0)',
           width: 3,
         }),
         fill: new ol.style.Fill({
           color: 'rgba(200,200,200,1.0)'
         })
     }),
 }),
});

GeoJSON

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "pk": "40"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          14.243133533746002,
          40.840827040200026
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "pk": "41"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.16601634025572,
          40.84706035607121
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "pk": "42"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          138.602233864367,
          -34.89944783005726
        ]
      }
    }
  ]
}
  • 1
    Your GeoJSON object looks like some kind of a template. I suppose it has something to do with Geodjango. Are you sure it's correctly rendered to actual GeoJSON? – TomazicM Jul 28 at 14:02
  • I'm sure because I've put the GeoJSON produced with the template on geojson.io and I can see all the points geojson.io/#id=gist:MaxDragonheart/… – Massimiliano Moraca Jul 28 at 14:44
  • Yes, but when is this rendering to final GeoJSON happening? Before .readFeatures gets it, or after? I suspect problem lies here. – TomazicM Jul 28 at 14:54
  • With serialize I have the same GeoJSON. If I use the serialization of GeoJSON I can see all points on the map but If I copy and paste the GeoJSON into geojsonObject(without the template) I don't see any points. The rendering of the GeoJSON happen before .readFeatures – Massimiliano Moraca Jul 28 at 14:54
  • 1
    Can you publish a piece of this GeoJSON with a few points? – TomazicM Jul 28 at 14:58
2

Now that you published your GeoJSON, I finally noticed that error lies in the way you are trying to read GeoJSON. You cannot read it when specifying format, you have to use features option for this. Then you don't have to specify format at all:

var vectorLayer = new ol.layer.Vector({
 source: new ol.source.Vector({
   features: (new ol.format.GeoJSON({
     dataProjection: 'EPSG:4326',
     featureProjection: 'EPSG:3857'
   })).readFeatures(geojsonObject)
 }),
 style: new ol.style.Style({
 ...
 }),
});

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.