ここのことはなかったことにするかもしれない

仕事がらみの記事を主として扱いますが、あくまで個人ブログです。2013年以前の記事は https://yellow-73.hatenablog.com/ にあります。

GeoDjangoに挑戦中 #5 GeoJSONを読むLeaflet

参照サイト

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>

scriptのsrc属性値は{% 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);
  });
}