Building the web app

Creating the web page

First simple example of our web app has only heading and description text

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Quick Start Guide - Leaflet - a JavaScript library for interactive maps</title>
    <meta charset="utf-8" />
</head>

    <h1>ISPRS web app</h1>
    <div>Simple application or ISPRS summer school - publishing spatial data
            with open sourcetools.
    </div>
<body>

Adding javascript code and map container

Add container div for the map and some javascript library as well as reference to our code in second simple example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>Quick Start Guide - Leaflet - a JavaScript library for interactive maps</title>
    <meta charset="utf-8" />

    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

</head>

    <h1>ISPRS web app</h1>
    <div>Simple application or ISPRS summer school - publishing spatial data
            with open sourcetools.
    </div>
    <div id="map" style="width: 600px; height: 800px">
    </div>
<body>

Writing simple Leaflet map

Let's now create file called 03_simple.js, which will contain the JavaScript code.

1
2
3
4
5
6
var mymap = L.map('mapid').setView([49.1839233, 15.4544358], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 19
}).addTo(mymap);

And let's embed this javascript code to our web page 03_simple.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <title>Quick Start Guide - Leaflet - a JavaScript library for interactive maps</title>
    <meta charset="utf-8" />

    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

</head>

    <h1>ISPRS web app</h1>
    <div>Simple application or ISPRS summer school - publishing spatial data
            with open sourcetools.
    </div>
    <div id="mapid" style="width: 800px; height: 600px">
    </div>

    <!-- isprs script -->
    <script src="03_simple.js"></script>
<body>

Add some WMS from our server

Let's add new WMS layer 04_wms.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var mymap = L.map('mapid').setView([49.1839233, 15.4544358], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 19
}).addTo(mymap);


var wmsLayer = L.tileLayer.wms(
    'http://147.32.26.113:91/cgi-bin/qgis_mapserv.fcgi?map=cepicky/ISPRS_summerschool_ospublication.qgs',
    {
      layers: 'Ortophoto',
      format: 'image/png',
      opacity: 0.9,
      transparent: true
    }).addTo(mymap);

And have a look at our web page 04_wms.html

Add some JSON data

Note

Mark parameters OutputFormat=GeoJSON and TypeName=HY_Watercourse_LineString

  1. Get the data as JSON via WFS and save the to file hydrology.json

  2. Add new JSON layer to our script 05_json.js

    Add Leaflet-Ajax plugin to the page

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    <head>
        <title>Quick Start Guide - Leaflet - a JavaScript library for interactive maps</title>
        <meta charset="utf-8" />
    
        <!-- Leaflet -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script src="https://rawgit.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>
    
    </head>
    
        <h1>ISPRS web app</h1>
        <div>Simple application or ISPRS summer school - publishing spatial data
                with open sourcetools.
        </div>
        <div id="mapid" style="width: 800px; height: 600px">
        </div>
    
        <!-- isprs script -->
        <script src="05_json.js"></script>
    <body>
    

    Add the vector layer to the web page and load the data in the background in asynchronous mode.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    var mymap = L.map('mapid').setView([49.1839233, 15.4544358], 13);
    
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 19
    }).addTo(mymap);
    
    
    var wmsLayer = L.tileLayer.wms(
        'http://147.32.26.113:91/cgi-bin/qgis_mapserv.fcgi?map=cepicky/ISPRS_summerschool_ospublication.qgs',
        {
          layers: 'Ortophoto',
          format: 'image/png',
          opacity: 0.9,
          transparent: true
        }).addTo(mymap);
    

    and see the result on 05_json.html