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.

    and see the result on 05_json.html