TransWikia.com

GeoJSON to Leaflet map using Django template

Geographic Information Systems Asked on October 1, 2021

I have a view that returns this GeoJSON data

{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[-74.6739518440393, 40.7747050657312], [-74.6739608984706, 40.774701470443], [-74.6739723349471, 40.7746977607907], [-74.6739751675288, 40.7746968784469], [-74.6739837541201, 40.7746942303805], [-74.6739935481257, 40.7746907699636], [-74.6740013899782, 40.7746860093379], [-74.6740073655541, 40.7746788091302], [-74.6740121265096, 40.7746701139759], [-74.6740163465814, 40.7746611584664], [-74.674020565505, 40.7746522173678], [-74.6740252548045, 40.7746433025775], [-74.6740306482882, 40.7746345794509], [-74.674037125077, 40.7746260600244], [-74.67404531627, 40.7746171669696], [-74.674055546289, 40.7746073801574], [-74.6740664962855, 40.7745970284899], [-74.6740765608797, 40.7745864998405], [-74.6740844217022, 40.7745753981381], [-74.6740891740435, 40.7745634095419], [-74.6740912184884, 40.7745510530875], [-74.6740912522389, 40.7745431062451], [-74.6740912592608, 40.7745389887446], [-74.6740898573801, 40.7745274759369], [-74.6740874080518, 40.774516334851], [-74.6740842350919, 40.7745039052142], [-74.6740806379698, 40.7744887303232], [-74.6740772899942, 40.7744718808624], [-74.6740745918208, 40.7744548115784], [-74.6740716598383, 40.7744380299347], [-74.6740677904043, 40.7744220052984], [-74.6740641056594, 40.7744077509401], [-74.6740617274588, 40.7743957172631], [-74.6740596382422, 40.7743836561325], [-74.6740567313083, 40.7743696608708], [-74.6740535362175, 40.7743560091677], [-74.6740507803652, 40.7743449784148], [-74.6740486411357, 40.7743346329802], [-74.674046876481, 40.7743225578509], [-74.6740443488904, 40.7743086583796], [-74.6740400676368, 40.7742937042621], [-74.6740344161057, 40.7742797959928], [-74.6740280856495, 40.7742685643951], [-74.6740213071077, 40.7742585834894], [-74.6740142574633, 40.7742482175403], [-74.6740073704415, 40.7742379756267], [-74.6740010091114, 40.7742285290402], [-74.6739952617479, 40.7742192040077], [-74.6739901073244, 40.7742092062419], [-74.6739855487456, 40.7741987410728], [-74.6739818030118, 40.7741883431228], [-74.6739798635669, 40.7741787385697], [-74.6739807816149, 40.7741705436324], [-74.6739848612134, 40.7741636065536], [-74.6739918323364, 40.7741575017619], [-74.6739997064445, 40.7741515063806], [-74.6740066038684, 40.7741448523401], [-74.6740127217719, 40.7741368278785], [-74.6740186544125, 40.7741272663915], [-74.6740243888565, 40.7741180213096], [-74.6740300024878, 40.7741106010017], [-74.674036843766, 40.7741033166322], [-74.6740459920852, 40.7740944221332], [-74.6740562774083, 40.7740854304562], [-74.6740660622271, 40.7740780317735], [-74.6740738262204, 40.7740716105748], [-74.6740786122417, 40.7740652767219], [-74.6740812323746, 40.7740592604413], [-74.6740825371966, 40.7740540161479], [-74.6740814060334, 40.7740495437309], [-74.6740768280652, 40.7740457213346], [-74.6740701215455, 40.774042450607], [-74.6740628024946, 40.7740396067813], [-74.6740551952523, 40.7740370930051], [-74.674047317158, 40.7740347444446], [-74.6740391506585, 40.7740321900838], [-74.6740306926327, 40.7740291417389], [-74.6740219467778, 40.7740261082369], [-74.674012949883, 40.7740235686352], [-74.6740039703984, 40.7740213451131], [-74.6739951722373, 40.7740191492351], [-74.6739863735011, 40.7740167327132], [-74.6739774654974, 40.7740137543881], [-74.6739689684304, 40.7740093615191], [-74.6739646797748, 40.7740056350451], [-74.6739616579912, 40.7740030035779], [-74.6739563321926, 40.7739958753433], [-74.6739538776307, 40.7739895244913], [-74.6739536210559, 40.7739810836627], [-74.6739556885068, 40.7739707318847], [-74.6739589081517, 40.7739592940613], [-74.6739623458013, 40.773948322414], [-74.6739659288001, 40.773937666654], [-74.6739697830071, 40.7739269825668], [-74.6739740897417, 40.7739167507932], [-74.673978381855, 40.7739081806272], [-74.6739833924052, 40.7738980027281], [-74.6739871398759, 40.773888183366], [-74.676322372932, 40.7763416608939], [-74.6763156261991, 40.7763638597837], [-74.6762951846018, 40.7764154586843], [-74.6762703483574, 40.7764659313537], [-74.6762568620317, 40.776489749991], [-74.6762243927602, 40.7765446994232], [-74.6762087518394, 40.7765700100167], [-74.6761796366478, 40.7766116193076], [-74.6761800802631, 40.7766127209501], [-74.6761963152469, 40.7766651770285], [-74.676208002871, 40.7767183271962], [-74.6762084403033, 40.7767212849423], [-74.676152056193, 40.7767557149623], [-74.676046211745, 40.7768210835496], [-74.6759487072312, 40.7768796732066], [-74.6739755084356, 40.7747308337148], [-74.6739518440393, 40.7747050657312]]]}, "properties": {"geom": "0103000020E61000000100000073000000924EEA0622AB52C036AE1C8929634440B26DE42C22AB52C09FDBF36A296344406B40DC5C22AB52C0B470D54B296344408CB6BD6822AB52C0129F6E4429634440CB7EC18C22AB52C02BF1372E296344408DBAD5B522AB52C0DCC03011296344408EDAB9D622AB52C0346341E9286344405A14CAEF22AB52C0290FDBAC28634440D51DC20323AB52C0885BEA63286344405662751523AB52C01E8CCA18286344403A6B272723AB52C02EAFC9CD276344400F84D23A23AB52C0625101832763444091B9715123AB52C0D18BD43927634440B81F9C6C23AB52C092375DF226634440B459F78E23AB52C0FD86C3A726634440EABFDFB923AB52C01582AA55266344400938CDE723AB52C0B178D4FE256344409FFE031224AB52C0795E82A6256344400F7DFC3224AB52C008A5614925634440B046EB4624AB52C09254D0E4246344406C7B7E4F24AB52C0ED0B297D24634440B0B8A24F24AB52C01D557F3A24634440DB42AA4F24AB52C04711F51724634440D200C94924AB52C04F8061B723634440960E833F24AB52C09033EC5923634440021E343224AB52C078C2A7F1226344409DBC1D2324AB52C0EAED5B722263444017E0121524AB52C0E1FC03E521634440D5BBC10924AB52C0C3FAD355216344409F8A75FD23AB52C092AC0DC920634440B3C43AED23AB52C09907A14220634440BC4DC6DD23AB52C040070ECB1F634440EFBACCD323AB52C05BE71B661F634440727309CB23AB52C0B0D2EE001F6344408A27D8BE23AB52C0343A888B1E634440AB7371B123AB52C00D6B03191E634440C260E2A523AB52C0840E7BBC1D634440D465E99C23AB52C0B267B2651D6344403D9D829523AB52C0294367001D6344406DA2E88A23AB52C00160CE8B1C63444065ACF37823AB52C0F7A65C0E1C6344405B633F6123AB52C00EDFB0991B634440CE1CB24623AB52C0EC32793B1B6344406CB5432A23AB52C0FC5DBFE71A634440ED35B20C23AB52C033A9CA901A634440CA53CFEF22AB52C0A751E03A1A634440AFE620D522AB52C0CEEDA1EB1963444070B705BD22AB52C0F992689D196344404B3267A722AB52C019898A4919634440B275489422AB52C08BC1C0F1186344403A82928422AB52C01454879A18634440AC0B707C22AB52C02CB5F54918634440C9CA498022AB52C0BF36370518634440483A669122AB52C058F305CB17634440FB69A3AE22AB52C09D02D09717634440562CAACF22AB52C0E306856517634440C83998EC22AB52C07095B32D176344404A46410623AB52C0052F63EA166344401F66231F23AB52C0F40B2E9A1663444015B6303723AB52C06D62A04C166344404E4DBC4E23AB52C00565610E166344408A116E6B23AB52C0895446D1156344405F00CD9123AB52C0008AA9861563444075C8F0BC23AB52C04B0F3C3B15634440F826FBE523AB52C076822BFD1463444032AD8B0624AB52C025174EC714634440B7A09E1A24AB52C0B03E2C92146344405DF99B2524AB52C07361B45F146344401A04152B24AB52C0AA58B633146344405470562624AB52C06AE7310E1463444003E2221324AB52C0D45E21EE13634440EACF01F723AB52C05089B1D213634440860A4FD823AB52C09A77D6BA13634440AED366B823AB52C0852CC0A5136344409CC95B9723AB52C0BBAD0C921363444052131B7523AB52C0083B9F7C13634440E456A15123AB52C0B3F50C63136344409A8CF22C23AB52C057909A4913634440FD34360723AB52C08ACF4C34136344400F8F8CE122AB52C056D5A52113634440F39AA5BC22AB52C0A4383A0F13634440C208BE9722AB52C0ADC7F4FA126344405923617222AB52C023E0F8E1126344405B7BBD4E22AB52C0DD421FBD12634440AE92C03C22AB52C01EB8DC9D1263444021F5133022AB52C0BAAFC98712634440C26CBD1922AB52C050EBFD4B12634440EBDB710F22AB52C08091B716126344402D5D5E0E22AB52C0E706E9CF11634440C0450A1722AB52C0C4C012791163444001578B2422AB52C0DA36201911634440EE7CF63222AB52C0F6C716BD1063444024B4FD4122AB52C0F3B5B363106344407E20285222AB52C0E5CE130A10634440B072386422AB52C0DF3D3FB40F634440CE11397622AB52C04AF35A6C0F6344405C1B3D8B22AB52C01614FA160F63444043ECF49A22AB52C0AE289BC40E634440F352A2DD48AB52C0E707DE295F634440211356C148AB52C09EC815E45F634440A613996B48AB52C03694ED9461634440C65C6D0348AB52C0A8CF523C63634440CB87DCCA47AB52C0FEF120046463444067EAAC4247AB52C0D0F313D165634440D49A120147AB52C0BE0966A566634440E767F48646AB52C0544F710268634440F2BBD08846AB52C0B211AF0B6863444050EAE8CC46AB52C0C5A3B7C369634440F667EEFD46AB52C079C192816B6344406D18C4FF46AB52C09477629A6B634440371E461346AB52C0415F34BB6C634440E381545744AB52C02B588EDF6E63444037D55DBE42AB52C0BDAC0ACB706344404CC22B6A22AB52C0020145612A634440924EEA0622AB52C036AE1C8929634440", "open_water_acres": 4.45, "ssn": "1407", "block": "10", "lot": "92"}}]}

I am rendering it to an HTML document that contains JavaScript to add it to my Leaflet map

var blah= "{{ data }}";
console.log(blah)
var intersection =new L.GeoJSON(blah);

with quotes "{{ data }}" I get this error:

leaflet.js:8 Uncaught Error: Invalid GeoJSON object.
    at Function.geometryToLayer (leaflet.js:8)
    at e.addData (leaflet.js:8)
    at e.initialize (leaflet.js:8)
    at new e (leaflet.js:5)
    at Object.our_layers [as callback] ((index):314)
    at Function.L.Map.djangoMap (leaflet.extras.js:234)
    at loadmap ((index):337)

without quotes {{ data }} I get Uncaught SyntaxError: Unexpected token & on that JS line

2 Answers

var raw_data = '{{data|escapejs}}';
var data = JSON.parse(raw_data);

Correct answer by ziggy on October 1, 2021

in your views

def diseases_datasets(request):
    disease=serialize('geojson',Diseases.objects.all())
    return HttpResponse(disease,content_type='application/json')

url.py

url(r'^diseases_data/$',views.diseases_datasets,name='disease'),

html
<html>
{% load static %}
{% load leaflet_tags %}


<head>
    {% leaflet_js %}
    {% leaflet_css %}
      <title>Kenya</title>
    <style type="text/css">
        #map{
            width: 77%;
            height: 560px;
        }
    </style>
<!-- adding ajax  -->
    <script type="text/javascript" src="{% static '/leaflet.ajax.js' %}"></script>


</head>
<body>
</body>

<script>

      function our_layers(map,options){
            var disease = new L.GeoJSON.AJAX("{% url 'disease' %}",{

                    });
}
</script>

{% leaflet_map "map" callback="window.our_layers" %}


</html>

Answered by Francis Odero on October 1, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP