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
            ]
          ]
        ]
      }
    }
  ]
}
3
  • 1
    just return the whole polygon as JSON and render through the template... – ziggy Jul 30 '19 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 '19 at 18:07
  • Hi @ziggy if you add your comments in an answer I vote you – Massimiliano Moraca Nov 22 '19 at 17:09
2

Return the entire Polygon as JSON through the view and pipe it through to maps/reading/single_add_polygon_map.html page where you will have a div setup to render the piped through JSON

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.