Maps with Django (2): GeoDjango, PostGIS, Leaflet를 참고해서 작성된 게시글이다.
위에 블로그에너무 정리가 잘 되어 있어서 그저 잘 따라하기만 하면 지도를 만들어 낼수 있었다. 이번에 인턴하는 회사가 지도 기반으로 맵을 만드는 회사여서 지도를 다룰 일이 많았기에 전에 한번 django에서는 어떻게 지도를 만들어내는지 경험해 보았다. 우선은 지도를 만들기 위해서 여러 라이브러리가 필요했다. 실습에 쓰일 라이브러리들을 소개해보겠다.
🍃 Leaflet
Leaflet은 웹 매핑 응용프로그램을 구축하는데 사용되는 오픈 소스 Javascript 라이브러리이다. 자세한 설명과 사용법은 Leaflet 웹사이트를 참조한다.
🌐 Geodjango
GeoDjango는 django project의 일종으로 위치 데이터를 다룰 수 있게 해준다. 위치 데이터는 보통 구글맵을 이용한 좌표 데이터를 의미한다고 봐도 된다. 그 외에도 3d나 2d 좌표를 이용한 계산 등의 기능도 가능케 한다. 자세한 설명은 GeoDjango 공식문서를 참고한다.
🗄 Postgis
PostGIS는 객체 관계형 데이터베이스 시스템인 PostgreSQL의 확장 프로그램으로, 데이터베이스에 GIS(지리정보 시스템) 객체를 저장할 수 있게 해준다. PostGIS는 GiST 기반 R-Tree 공간 인덱스를 지원하며, GIS 객체의 분석 및 공간 처리를 위한 기능을 포함하고 있다. 자세한 내용은 공식문서를 참고한다.
앱 생성
우선 프로젝트를 하나 생성해준다음 원하는 앱을 만들어준다.
>django startproject dis_map
>django startapp markers
그 후 INSTALLED_APPS에 생성한 앱 이름을 추가해준다.
dis_map/dis_map/settings.py
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"markers",
]빈 지도 만들기
앞에 단계를 완료 했으면 이제 아무것도 표시되어있지 않은 빈 지도를 만들어 보겠다.
우선 views.py에 지도를 위한 TemplateView를 만들어준다.
dis_map/markers/views.py
from django.views.generic.base import TemplateView
class MarkersMapView(TemplateView):
"""Markers map view."""
template_name = "map.html"지도를 만들어 주기 위해서 위에서 말한 map.html 템플릿을 dis_map 안에서 만들어주어야 한다. 이때 템플릿은 한곳에 모아줄 것이기 때문에 dis_map안에서 templates 파일을 만들어준다.
mkdir templates
dis_map/markers/templates/map.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Markers Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
</body>
</html>마지막으로 지도를 보기 위해 url설정을 해주어야 한다.
dis_map/markers/urls.py
from django.urls import path
from markers.views import MarkersMapView
app_name = "markers"
urlpatterns = [
path("map/", MarkersMapView.as_view()),
]
상위 url에서 markers/urls.py를 바라보도록 설정해주어야 한다.
dis_map/dis_map/urls.py
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path("admin/", admin.site.urls),
path("markers/", include("markers.urls")),
]이제 서버를 돌리고 http://127.0.0.1:8000/markers/map/ 으로 들어가 보면 빈 지도가 보일것이다.
python manage.py runserver
Leaflet 사용해서 지도 만들기
우선 map 템플릿을 수정해주어야 한다.
dis_map/markers/templates/map.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Markers Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{% static 'map.css' %}" />
<link rel="stylesheet" type="text/css" href="https:///unpkg.com/leaflet/dist/leaflet.css" />
<script src="https:///unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script src="{% static 'map.js' %}"></script>
</body>
</html>
그후 css와 js도 만들어야 하기 때문에 dis_map 내에 static이라는 디렉토리를 생성해준다.
mkdir static
그 후 map.css를 만들어준다. 지도를 보여주기 위한 최소한 css만 넣었다.
dis_map/markers/static/map.css
html,
body {
height: 100%;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}마지막으로 map.js를 만들어준다.
dis_map/markers/static/map.js
const copy = "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const osm = L.tileLayer(url, { attribution: copy });
const map = L.map("map", { layers: [osm] });
map.fitWorld(); # 이 부분이 전체 나라들을 보여주는 map view를 설정하고 최대 확대/축소 수준도 설정해준다.정의된 변수들을 통해 OpenStreetMap 레이어를 설정하고 이를 '지도'에 연결한다.
이후에 서버를 실행하면 빈 지도가 보여진다.
python manage.py runserver
