1

I can't render a single polygon from a GeoJSON.

I use this model:

class AddGeometryBase(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name


class AddLine(AddGeometryBase):
    geom = models.LineStringField()

    @property
    def coord_lon_lat(self):
        return str(self.geom.x) + ', ' + str(self.geom.y)

    def get_absolute_url(self):
        return reverse("single_added_line", kwargs={"pk":self.pk})


class AddPoint(AddGeometryBase):
    geom = models.PointField()

    @property
    def coord_lon_lat(self):
        return str(self.geom.x) + ', ' + str(self.geom.y)

    def get_absolute_url(self):
        return reverse("single_added_point", kwargs={"pk":self.pk})


class AddPolygon(AddGeometryBase):
    geom = models.PolygonField()

    @property
    def coord_lon_lat(self):
        return str(self.geom.x) + ', ' + str(self.geom.y)

    def get_absolute_url(self):
        return reverse("single_added_polygon", kwargs={"pk":self.pk})

I use the same strategy for render a single geometry, for example a line:

<div id="map" class="map"></div>

var geojsonObject =   {
    "type": "Feature",
    "geometry": {
      "type": "LineString",
      "coordinates": [{{ line_details.coord_lon_lat }}]
    },
    "properties": {
      "name": "{{ line_details.name }}",
      "pk": {{ line_details.pk }}
    }
  }

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(255,0,0,1.0)',
        lineDash: null,
        lineCap: 'butt',
        lineJoin: 'miter',
        width: 2,
    }),
    text: new ol.style.Text({
        font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
        placement: 'line',
        fill: new ol.style.Fill({color: '#fff'}),
        stroke: new ol.style.Stroke({color: '#000', width: 2}),
    }),
});

var styleFunction = function(feature) {
  style.getText().setText(feature.get('name'));
  return style;
}

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: styleFunction,
});

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],
    zoom: 2,
  })
});

So, with a polygon I change only the geojsonObject in a specific template:

var geojsonObject =   {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [{{ polygon_details.coord_lon_lat }}]
    },
    "properties": {
      "name": "{{ polygon_details.name }}",
      "pk": {{ polygon_details.pk }}
    }
  };

With this strategy something is wrong with the polygons because I see this error when I try to render a single polygon in a template:

AttributeError at /map/add-polygons-map/4

'Polygon' object has no attribute 'x'

I think that the problem is the coord_lon_lat function, but how I can render a single polygon without this function?

views.py

def addPolygonsMap_Single(request, pk):
    polygon_details = get_object_or_404(AddPolygon, pk=pk)
    context = {
        "polygon_details": polygon_details,
    }
    template = 'maps/reading/single_add_polygon_map.html'
    return render(request, template, context)

urls.py

path("add-polygons-map/<int:pk>", views.addPolygonsMap_Single, name='single_added_polygon'),

Full GeoJSON

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "publishing_date": "2019-07-30T17:47:09.357",
        "updating_date": "2019-07-30T17:47:09.401",
        "timestamp": "2019-07-30T17:47:09.370",
        "name": "Repubblica d'Irlanda",
        "pk": "4"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -6.923950240015981,
              55.36038057233306
            ],
            [
              -7.385376021265981,
              55.39783145936032
            ],
            [
              -7.868774458765982,
              55.2227570880221
            ],
            [
              -8.440063521265982,
              55.059495230495855
            ],
            [
              -8.725708052515982,
              54.74364976592378
            ],
            [
              -8.879516646265982,
              54.47642158429293
            ],
            [
              -9.802368208765982,
              54.32293114326348
            ],
            [
              -10.175903365015984,
              54.02713344412541
            ],
            [
              -10.066040083765982,
              53.33743343712966
            ],
            [
              -9.670532271265984,
              53.23234504341257
            ],
            [
              -9.253051802515984,
              53.20603255157843
            ],
            [
              -9.978149458765984,
              52.44931414086969
            ],
            [
              -10.615356490015984,
              52.20760667286522
            ],
            [
              -9.868286177515982,
              51.364921488259526
            ],
            [
              -8.374145552515982,
              51.624837461743205
            ],
            [
              -6.858032271265984,
              52.15371445951162
            ],
            [
              -6.286743208765982,
              52.12674385964288
            ],
            [
              -6.242797896265983,
              52.32862548843016
            ],
            [
              -5.957153365015983,
              52.862497459709466
            ],
            [
              -6.001098677515981,
              53.21919081798935
            ],
            [
              -6.154907271265982,
              53.74221377343121
            ],
            [
              -6.264770552515983,
              53.94962061777841
            ],
            [
              -6.286743208765982,
              54.1431323347603
            ],
            [
              -6.616333052515982,
              54.05293900056246
            ],
            [
              -6.967895552515982,
              54.37415844505571
            ],
            [
              -7.275512740015982,
              54.18172660239092
            ],
            [
              -7.649047896265983,
              54.207436119874764
            ],
            [
              -8.044555708765982,
              54.42532191246644
            ],
            [
              -7.671020552515982,
              54.68018309709999
            ],
            [
              -7.297485396265981,
              54.857639595549
            ],
            [
              -6.923950240015981,
              55.36038057233306
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "publishing_date": "2019-07-31T08:06:13.456",
        "updating_date": "2019-07-31T08:06:13.496",
        "timestamp": "2019-07-31T08:06:13.462",
        "name": "test",
        "pk": "5"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              81.16992115974428,
              -20.138470312451155
            ],
            [
              56.20898365974429,
              -50.84757295365389
            ],
            [
              137.06835865974426,
              -64.69910544204765
            ],
            [
              138.1230461597443,
              -12.382928338487408
            ],
            [
              87.49804615974428,
              -2.28455066023697
            ],
            [
              81.16992115974428,
              -20.138470312451155
            ]
          ]
        ]
      }
    }
  ]
}
  • 1
    just return the whole polygon as JSON and render through the template... – ziggy Jul 30 at 18:05
  • 1
    have a div setup on the maps/reading/single_add_polygon_map.html that the JSON will be piped through – ziggy Jul 30 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.