Tutorial 6: WebApp Layer geoJSON

Introduction

This tutorial shows how to load GeoJSON data asynchronously in a web application , convert it into an SVGMap DOM using the SVGMap framework library, and then display it.

To see the actual operation, click on geojson1.html.

File Structure

Tutorial 6 directories
geojson1.html: Loading of related libraries (SVGMapGIS)
Container.svg: Clickable layering settings
geoJsonExample1.svg: How to specify a web app that manipulates a layer with a UI.
geoJsonExample1.html:
geoJsonExample1.js: Converting GeoJSON data into SVGMap content using svgMapGIStool

Tutorial

Click here to see how it works.
The file used is a ZIP archive file.

geojson1.html

The only difference from the HTML in Tutorial 2b is the SVG content that is loaded.

<!DOCTYPE html>
<html>
<title>SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port</title>
<!-- Definition that the viewport display area is the entire screen -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Loading the SVGMap core API -->
<script type="module">
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgmap=svgmap
</script>

<!-- Loading stylesheet for the layer list UI -->
<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">

<body bgcolor="#ffffff" style="overflow:hidden;" >
<!-- Loading a container file (Container.svg) containing multiple map SVG files (layers) -->
 <div id="mapcanvas" data-src="Container.svg"></div>
 <div id="gui">
<!-- Zoom-up button -->
  <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="./img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
<!-- Zoom down button -->
  <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="./img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
<!-- GPS button -->
  <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="./img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
<!-- Title to be displayed in the upper right corner of the screen -->
  <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port</font>
<!-- Display in the lower right corner of the screen -->
  <font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</font>
<!-- Cross mark displayed in the center -->
  <img id="centerSight" style="opacity:0.5" src="./img/Xcursor.png" width="15" height="15"/>
<!-- Latitude and longitude displayed as a crosshair in the lower left corner of the screen (title) -->
  <font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
<!-- The crosshairs displayed in the lower left corner of the screen show the latitude and longitude (initial display of actual values) -->
  <font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
<!-- Display the layer list UI -->
  <div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
 </div>
</body>
</html>

Container.svg

The theme layer displaying GeoJSON and the background map (OpenStreetMap) are loaded using the animation element.
Since GeoJSON data is vector data, the clickable attribute is specified in the class attribute.
For everything else, I'm using layering techniques based on these key points.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />

<!-- Load OpenStretMap background map as the display state -->
<animation xlink:href="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap" visibility="visible"/>

<!-- Load various GeoJSON data (Point Feature) as display state -->
<animation xlink:href="geoJsonExample1.svg" x="-3000" y="-3000" width="6000" height="6000" title="GeoJson Layer" class="poi clickable" visibility="visible" opacity="0.7"/>
</svg>

geoJsonExample1.svg

The data-controller attribute of the document root element (the svg element) specifies the webApp that will operate this layer .
- data-controller="geoJsonExample1.html#exec=appearOnLayerLoad
- exec=appearOnLayerLoad This setting causes the webApp window to appear when the layer becomes visible. (See here for details)
The defs element defines the markers (icons) used when visualizing point features in geoJSON.

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  data-controller="geoJsonExample1.html#exec=appearOnLayerLoad"
  viewBox="12375.0 -4500.0 2250.0 2250.0"
  go:dataArea="12375.0 -4500.0 2250.0 2250.0"
  property="name,address,phone,url"
>

<defs>
<g id="p0">
<circle cx="0" cy="0" r="10" fill="blue" stroke="none"/>
</g>
</defs>

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100.0,0.0,0.0,-100.0,0.0,0.0)" />
<g id="mapContents"></g>
</svg>

geoJsonExample1.html, geoJsonExample1.js

This is a webApp ( layer-specific UI ) linked to geoJsonExample1.svg . WebApps linked to layers allow you to use their own APIs.

geoJsonexample1.html

The HTML consists of a common library (svgMapLayerLib.js) for initializing the layer-specific UI , a script code section describing the layer-specific processing geoJsonExample1.js, and the UI (HTML, CSS, etc.).

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>A sample demonstrating how to render geoJSON in the webApp layer of an SVGMap</title>
</head>
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
<script src="geoJsonExample1.js"></script>
<body>
<h3>area layer</h3>
<p>Visualizing geoJSON</p>
<select id="dataSelect" onchange="changeData()"></select>
</body>
</html>

geoJsonExample1.js

Layer-specific UI: As described in the extended API documentation, svgImage and svgMapGIStool objects are automatically incorporated into the window.
A web app that is linked to geoJsonExample1.svg and can control its DOM.
This app has a simple UI and dataPaths allows you to select from several geoJSON data sets that you have configured.
loadJSON(url) Asynchronous loading of GeoJSON data using await fetch
This code uses functions from the SVGMap GIS library (svgMapGIStool) drawGeoJson to convert geoJSON to SVGMap content (its DOM).
- The variable layerID is a built-in variable (see the documentation #layerID).
- While it is certainly possible to convert geoJSON to SVGMap content DOM manually, Tutorial 6 uses a library.
- drawGeoJson For details on the function, please refer to the documentation #drawGeoJson.
svgMap.refreshScreen() If the DOM needs to be redrawn at a time other than during scaling/scrolling, you must explicitly request a redraw.
- Reference information

var dataPaths = {
	"A34b-180316.geojson": "World Heritage Site Component Area Polygon (Representative Point)",
	"A34a-180316.geojson": "World Heritage Site Component Area Polygon Data",
	"A34d-180316.geojson": "World Heritage Site Component Boundary Line (Representative Point)",
	"A34c-180316.geojson": "World Heritage Site Component Boundary Line Data",
	"A34e-180316.geojson":"World Heritage Component",
	"A34f-180316.geojson": "World Heritage Buffer Zone Polygon Data",
	"A34g-180316.geojson":"World Heritage Buffer Zone Polygon (Representative Point)",
	"C28-20_Airport.geojson":"Airport Data Airport",
	"C28-20_AirportReferencePoint.geojson":"Airport data reference point",
	"C28-20_SurveyContent.geojson": "Airport Data Survey Content",
	"C28-20_TerminalBuilding.geojson":"Airport Data Terminal Building",
	"N02-20_RailroadSection.geojson":"Railway Data Railway",
	"N02-20_Station.geojson":"Railway data station"
};

addEventListener("load", function(){
	buildDataSelect();
	changeData();
});

function changeData(){
	var path = dataSelect.options[dataSelect.selectedIndex].value;
	loadAndDrawGeoJson(path);
}

async function loadAndDrawGeoJson(dataPath){
	var gjs = await loadJSON(dataPath);
	var parentElm = svgImage.getElementById("mapContents");
	removeChildren(parentElm);
	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm);
	svgMap.refreshScreen();
}

function buildDataSelect(){
	var first = true;
	for ( var dataPath in dataPaths){
		dataSelect.insertAdjacentHTML('beforeend', '<option value="' + dataPath +'" >'+dataPaths[dataPath]+'</option>');
	}
}

async function loadJSON(url){
	var dt = getDateStr(new Date(),10);
	var response = await fetch(url+"?time="+dt); // Add some dummy query part to always get the latest data. Bad Tips...
	// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
	// https://stackoverflow.com/questions/9692665/cache-busting-via-params
	var json = await response.json();
	return ( json );
}

function getDateStr(dateData , tStep){
	var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep );
	var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind);
	return ( ans );
}
function pad( inp ){
	return (("0"+inp).slice(-2));
}

function removeChildren(element){
	while (element.firstChild) element.removeChild(element.firstChild);
}

Introduction​

File Structure​

Tutorial​

geojson1.html​

Container.svg​

geoJsonExample1.svg​

geoJsonExample1.html, geoJsonExample1.js​

geoJsonexample1.html​

geoJsonExample1.js​