Django elasticsearch ionic creates GIS mobile application — Architecture Design


Search engine is a good thing, and GIS is also a good thing. Currently, there are Django and ionic. Final rendering

Django elasticsearch ionic creates GIS mobile application -- Architecture DesignDjango elasticsearch ionic creates GIS mobile application -- Architecture Design

architecture design

After a brief reflection on our requirements, we designed some simple architectures below.

Django elasticsearch ionic creates GIS mobile application -- Architecture Design

GIS architecture description – server

Brief description:

  • Users create data in the foreground or background.
  • When the model saves data, it will call Google’s API to parse GPS
  • Set real-time update in haystack configuration to automatically update the index when data is created
  • The data is indexed by elasticsearch

The following is a brief introduction to the framework


DjangoIs an open source web application framework written in Python. MVC software design mode is adopted, that is, model M, view v and controller C. It was originally developed to manage some news content based websites of Lawrence publishing group. It was released under the BSD license in July 2005. The frame is named after Django Reinhardt, a Belgian gypsy jazz guitarist.

DjangoThe main goal of is to make it easy to develop complex, database driven websites. Django pays attention to the reusability and “pluggability” of components, agile development and dry law (don’t repeat yourself). Python is widely used in Django, even including configuration files and data models.

The first reason to consider Django rather than other node or Ruby frameworks is:

  • Built in authentication system
  • Built in CSRF

Of course, this is also owned by other frameworks. The main features include:

  • A form serialization and validation system for the conversion between HTML forms and data suitable for database storage.
  • A basic framework to assist in the creation of geographic information systems (GIS)

The last one is the highlight. Although the built-in GIS is not used much, it is at least convenient in deployment.


Haystack provides modular search for Django. It features a unified, familiar API that allows you to plug in different search backends (such as Solr, Elasticsearch, Whoosh, Xapian, etc.) without having to modify your code.

Haystack provides a search module blablabla… For Django. Its main feature is that it can

write your search code once and choose the search engine you want it to run on

In other words, you just need to write your code and choose your search engine to work.


Haystack above provides a bunch of search engines. Of course, only those that support location searchSolrandElasticSearch, they support spatial search:

  • within
  • dwithin
  • distance
  • order_by(‘distance’)
  • polygon

Solr’s polygon search is not written in the document, but it is actually supported (see this article for details:Google map Solr polygon search

As for why elastic search is used, it is because Solr has been used before…

GIS architecture description – client

Brief description – get

  1. When we access the map view, we will call HTML5 to get the user‘s location
  2. Set the zoom according to the user’s position positioning
  3. Issue an elasticsearch request according to the user’s location, and bring the distance in the returned result
  4. display

Brief description – Post

  1. The data filled in by the user will be sent to the Django API and verified
  2. When successful, it is stored in the database and the index is updated.


Ionic provides a free and open source mobile optimized HTML, CSS and JS component library to build highly interactive applications. Based on sass construction and angularjs optimization.

Angularjs is mainly used. He has written three apps before.

Django REST Framework

Compared with Django tastypie, the main advantage of DRF lies in the debugging of web interface.


Because we chose a familiar technology stack, it only took less than two days of spare time to complete it. Perhaps this is the advantage of full stack programmers.

Server code:

Client code: