Using popular javascript libraries like leaflet, jquery and mapbox a web application can be made using the FEWS PI-JSON REST Web Service.

Using open streetmap to display clustered locations requires the following html/javascript code:

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Delft-FEWS PI-JSON REST Web Service - Leaflet Clusters Open Street Map example</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>

</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>

    // Get all locations from FEWS using the PI_JSON format and show them on a map.
    // Use a clustered display to allow loading many locations.
    var url = 'http://localhost:8080/FewsWebServices/rest/fewspiservice/v1/locations?documentFormat=PI_JSON&documentVersion=1.24';
    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
         }), latlng = L.latLng(52, 0);

   var map = L.map('map', {center: latlng, zoom: 2, layers: [tiles]});
   var markers = L.markerClusterGroup({ chunkedLoading: true });
    var callback = function (status, data) {
        if (status === 'ok') {
            $.each(data.locations, function (key, val) {
                var title = val.shortName;
                var marker = L.marker(L.latLng(val.lat, val.lon));
             marker.bindPopup(title);
             markers.addLayer(marker);
            });
            map.addLayer(markers);
        }
    };
    $.getJSON(url, callback.bind(this, 'ok')).fail(callback.bind(this, 'error'));
</script>
</body>
</html>

Opening the previous javascript in a browser, will get all locations from FEWS and plot them clustered on a map like this:

 

The next example uses mapbox and shows all locations on the map. The second example uses open street map and shows clustered locations, which is required if there are too many locations.

Using mapbox to display all locations requires the following html/javascript code (please use your own mapbox access token):

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Delft-FEWS PI-JSON REST Web Service - Leaflet MapBox example</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="mapid" style="width: 800px; height: 600px;"></div>
<script>

    // Get all locations from FEWS using the PI_JSON format and show them on a map
    var url = 'http://localhost:8080/FewsWebServices/rest/fewspiservice/v1/locations?documentVersion=1.23&documentFormat=PI_JSON';
    var mymap = L.map('mapid').setView([51, 0], 2);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MY_ACCESS_TOKEN', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);
    var callback = function (status, data) {
        if (status === 'ok') {
            $.each(data.locations, function (key, val) {
                L.marker([val.lat, val.lon]).addTo(mymap)
                    .bindPopup("<b>" + val.shortName + "</b>");
            });
        }
    };
    $.getJSON(url, callback.bind(this, 'ok')).fail(callback.bind(this, 'error'));
</script>
</body>
</html>

Opening the previous javascript in a browser, will get all locations from FEWS and plot them on a map like this:

 

  • No labels

Disclaimer