参照サイト

https://homata.gitbook.io/geodjango/geodjango/tutorial#geojson-serializer

jqueryとleafletのURL

jqeury (js)

https://code.jquery.com/ から適切なバージョンと圧縮タイプを選ぶと、URLとコピーボタンが現れるので、コピーしてペーストします。

leaflet (js, css)

https://leafletjs.com/examples/quick-start/ はたぶん最新でないかと考えて、ここから、<script>タグと<link>タグをコピペしました。

前提

http://(ホスト名):(ポート)/(アプリ名)/geojson で GeoJSONを吐くものとします。

ファイル

index.html

ローカルのパスは(アプリ名)/templates/(アプリ名)/index.htmlです。
URLは/(アプリ名)/ になっています((アプリ名)/urls.pyによる)。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Map</title>  
{% load static %}  
<meta viewport="width=device-width,initial-scale=1">  
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>  
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"  
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="  
  crossorigin="" />  
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"  
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="  
  crossorigin=""></script>  

<style>  
HTML, body, #MAP {  
  margin: 0;  
  padding: 0;  
  width: 100%;  
  height: 100%;  
  position: relative;  
}  
</style>  
<script src="{% static "(アプリ名)/js/index.js" %}"></script>  
<body>  
<div id="MAP"></div>  
</body>  
</html>  

scriptsrc属性値は{% static "(アプリ名)/js/index.js" %}となっていますが、適切なURLに置換されます。

index.js

ローカルのパスは(アプリ名)/static/(アプリ名)/js/index.js です。
URLは/static/(アプリ名)/js/index.js です。

window.onload = function() {  
  var lyr_stdmap = L.tileLayer(  
    "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",  
    {  
      "id": "stdmap",  
      "attribution": "<a href=\"http://portal.cyberjapan.jp/help/termsofuse.html\" target=\"_blank\">国土地理院</a>"  
    }  
  );  

  var map = L.map(  
    "MAP",  
    {  
      "layers": [lyr_stdmap]  
    }  
  );  
  map.setView([34.5, 133.39], 16);  
  // GeoJSONレイヤ  
  // HTMLのURLが http://.../(アプリ名)/ になっているので  
  // http://.../(アプリ名)/geojson/ にアクセス  
  $.getJSON("geojson/", function(data) {  
    L.geoJson(data).addTo(map);  
  });  
}