Open Source WebGIS online Tutorial

Making geospatial education and opportunities accessible to all. Use Open Source GIS “Geo for All” is the Open Source Geospatial Foundation’s Committee for Educational outreach and works in close collaboration with ICA, ISPRS, UN-GIS, AGILE, UCGIS , IGU and other partners worldwide in our mission for making geospatial education and opportunities accessible to all.

Attention

This website is open-source. Hosted on github: gislite/webgis-pub . Stars are welcome.

This website is based on https://demo.mapserver.org/tutorial/ and has undergone significant improvements.

Note

Many thanks to JET BRAINS for the free license for the repo of this tutorial. Lots of technologies are involved in WebGIS, the PyCharm IDE is essential and suitable for the project.

Logs:

• August, 2023: Recieved the free license form JET BRAINS for IDE.

• July, 2023: The OS has been upgraded to Debian 12 (Used to be Debian 10). The MapServer has been upgraded to 8.0. Since 2023/7/7 .

• 2022: The source codes of this tutorial are published on Github .

Went through a series of refactoring.

1. Rebuild with PHP, using templates.

2. Integrated into TorCMS to serve as dynamic website.

3. Using Python to write the SSG for Mapfile processing, and using Jinja2 for webpage management.

4. Finally using Sphinx for the management of the pages. And keep the scripts for Mapfiles.

Based on MapServer, and would supply WebGIS relevant technologies.

There are a large number of historical legacy issues that need to be addressed during the conversion process. All the pull requests arc welcome.

Introduction

The Open Source WebGIS Tutorial Website was created by the two authors based on their practical work experience in the process of cooperation. Open-source WebGIS has many meanings and skills for GIS technology and data sharing. As an online tutorial of open source GIS, the design of this website uses examples that can be accessed and operated online to facilitate users to understand the principles and technologies of WebGIS. In addition, it also explains some principles and background of WebGIS, which can be used as a general WebGIS tutorial.

MapServer

MapServer was originally an open source WebGIS software developed by the University of Minnesota and the US Space Agency (NASA). MapServer itself is a program written in C language, providing two development modes, one based on CGI and the other in MapScript mode; You can use any module on the server-side to write a WebGIS program. MapServer as a WebGIS solution is object-based, and the basic configuration files The API organization of the MapFile and MapScript modules is object-based. MapServer supports OGC’s WMS/WFS service specification by implementing several standards of OGC, supporting distributed access and interoperability. MapServer is a WebGIS platform developed based on the fat server/thin client mode to read geographic data. The GD library is used to render the JPeg/PNG/GIF format image and then sent back to the client browser. MapServer supports multiple platforms such as Windows, UNIX, and Linux. Languages supported by MapScript include Python, PHP, Perl, Java, Tcl, C#, and more.

MapProxy

The MapProxy example is a basic WMS slice client. It shows the various layers of the configuration. It doesn’t have the complex features of changing projections, but it’s enough to verify that the service is working.

LeafletJS

Leaflet is a modern, open-source JavaScript library developed for building mobile-friendly interactive maps. It was developed by Vladimir Agafonkin, a team of professional contributors, with a small amount of code, but it has most of the features developers develop online maps. The Leaflet design adheres to the idea of simplicity, high performance and usability, and operates efficiently on all major desktop and mobile platforms. The advantages of HTML5 and CSS3 are exploited in modern browsers, while old browser access is also supported. Support for plugin extensions, a friendly, easy to use API documentation and a simple, readable source code.

OpenLayers

OpenLayers is a JavaScript package for developing WebGIS clients. Sources supported by OpenLayers include Google Maps, Yahoo, Map, Microsoft Virtual Earth, etc. Users can also use a simple image map as a background image to overlay other layers in OpenLayers. In this regard OpenLayers offers a lot of options.

In addition, OpenLayers’ approach to accessing geospatial data is in line with industry standards. OpenLayers supports WMS (Web Mapping Service) and WFS (Web Feature) developed by the Open GIS Association Service service and other network service specifications, which can be done by remote service. Map data published as OGC services is loaded into the browser-based OpenLayers client for display. OpenLayers is developed in an object-oriented way and uses some components from Prototype.js and Rico.

Cesium

WebGL-based front-end 3D JavaScript class library. Cesium launched the 3D Tiles data specification around March 2016, providing LOD capabilities on a glTF basis. Positioning is massive 3D model data in the Web environment. Although the current 3D Tiles is still in the Beta stage, there are quite a few flaws. However, the 3D Tiles data specification began the OGC standardization process on September 30, 2016, and the active component is still very large.

About the website

Author: gislite

Northeast Institute of Geography and Agroecology, Chinese Academy of Sciences. Ph.D, Senior Engineer

Wang Juanle

Institute of Geographic Sciences and Natural Resources Research, Chinese Academy of Sciences. Ph.D, Research Professorship

Director of World Data System (WDS) for Renewable Resources and Environment

• The development of this new website is to promote the use of open source WebGIS;

• The Chinese version of this tutorial is maintained by OSGeo China Center - Open Geospatial Laboratory;

• The first part of the tutorial is the Chinese translation of the MapServer tutorial;

• The original MapServer tutorial runs in a PHP environment and is currently completely rewritten using Python to generate static websites;

• The development of the tutorial uses some English tutorials and official website cases;

• A separate MapServer server is configured to provide map services;

• Please send any questions and suggestions to bukun (at) osgeo.cn and correct them in time.

Technical Environment

• Operating system：Debian Linux 12 (bookworm), 64bit

• Apache 2.4.57-2

• cgi-mapserver 8.0.0-3+b8

• MapProxy 1.15.1-2

Building Environment

Build under Python 3.11.2 , using the flollowing modules：

• beautifulsoup4==4.11.1

• Jinja2==3.1.2

• lxml==4.8.0

• mappyfile==0.9.7

• Markdown==3.3.7

• PyYAML==6.0

Catalog

Part Ⅰ Fundation

• 1. Principle
  • 1.1. Map and WebGIS
  • 1.2. Basic concept of WebGIS
  • 1.3. Introduction to major open source WebGIS
  • 1.4. Principle and method of HTTP
• 2. WebGIS related standards and specifications
  • 2.1. WebGIS related standards of OGC
  • 2.2. OpenGIS map service specification
  • 2.3. Geographic Web service
  • 2.4. Interoperability and geospatial Web service standards
  • 2.5. Preliminary understanding and Reading of WMTS Service

Part Ⅱ MapServer

• 1. Installation and configuration of MapServer
  • 1.1. Introduction to MapServer
  • 1.2. Install and configure MapServer
  • 1.3. Start using Mapfile
  • 1.4. Release remote sensing images
  • 1.5. Labeling on remote sensing images
  • 1.6. Use DEM data in MapServer
  • 1.7. Usage process of MapServer
• 2. Cartographic Application of MapServer
  • 2.1. Add a grid layer
  • 2.2. Add a graticule
  • 2.3. Change the output format of the map
  • 2.4. Publish a vector layer
  • 2.5. Static map with two layers
  • 2.6. Build a map with multiple layers
  • 2.7. Display layers by attribute category
  • 2.8. Annotations in a map
  • 2.9. Use custom styles in Mapfile
  • 2.10. Define projection and extent
  • 2.11. Add a scale bar
  • 2.12. Add Legend
• 3. CGI interaction of MapServer
  • 3.1. MapSever interaction using CGI
  • 3.2. Interactive Map and Browse Model
  • 3.3. MapServer interaction: browse and zoom control
  • 3.4. MapServer interaction: layer control
• 4. Query and Retrieval of MapServer
  • 4.1. MapServer query mechanism
• 5. Use of WMS in MapServer
  • 5.1. OWSlib Introduction and Installation
  • 5.2. WMS service with GetCapabilities access
  • 5.3. Use WMS Services GetMap in MapServer
  • 5.4. WMS GetFeatureInfo access
  • 5.5. Use MapServer as a WMS client
  • 5.6. Draw maps with style layer
  • 5.7. WMS layers use SLD
  • 5.8. WMS layer metadata
• 6. Use of WFS in MapServer
  • 6.1. Geographic Web Services
  • 6.2. Use MapServer as the WFS client
  • 6.3. Access WFS using LeafletJS
  • 6.4. Leaflet render WFS with custom styles
• 7. Use of WCS in MapServer
  • 7.1. WCS Map Service
• 8. Other MapServer references
  • 8.1. About Beginning MapServer
  • 8.2. MAP Object
  • 8.3. LAYER Object
  • 8.4. Symbols

Part Ⅲ GeoServer

• 1. Introduction and Install GeoServer
  • 1.1. Introduction to GeoServer
  • 1.2. Install and configure GeoServer
  • 1.3. Introduction and installation of PostGIS
• 2. Explore the management interface
  • 2.1. Understand the interface of GeoServer

Part Ⅳ Front End(Client)

• 1. Leaflet lightweight WebGIS front-end class library
  • 1.1. Introduction to Leaflet
  • 1.2. Custom callout icon
  • 1.3. Use GeoJSON and Leaflet
  • 1.4. Interactive Choropleth Map
  • 1.5. Layer group and layer control
  • 1.6. Zoom Level
  • 1.7. Use WMS with TMS services
  • 1.8. Use the map panes
• 2. OpenLayers class library
  • 2.1. Intruduction for OpenLayers
  • 2.2. Map drag and zoom
  • 2.3. ZoomToExtent Control
  • 2.4. ArcGIS REST MapService
  • 2.5. Map drawing
  • 2.6. Layer clipping
  • 2.7. Cartodb Map
  • 2.8. Map move animation
  • 2.9. WMS
  • 2.10. Map modification feature
  • 2.11. Control Color
  • 2.12. CanvasPattern
  • 2.13. Export
  • 2.14. XYZ Esri
  • 2.15. Mouse position
  • 2.16. Constrained scaling
• 3. Cesium front-end 3D GIS class library

Part Ⅴ Tiles and Tools

• 1. WebGIS related tools
  • 1.1. Introduction and installation of OWSlib
• 2. Map slicing technique
  • 2.1. Principle of map tiles
  • 2.2. Use GetMap to generate slices
  • 2.3. Installation and use of MapProxy
  • 2.4. MapProxy case: a layer
  • 2.5. MapProxy case: multiple layers
  • 2.6. MapProxy case: layer merging
• 3. Introduction of GISLite Project
  • 3.1. Introduction to GISLite