Skip to content
Permalink
master
Switch branches/tags

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Spatial IO Module/WFS service explorer.html

Go to file
 
 
Cannot retrieve contributors at this time
245 lines (196 sloc) 9.89 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>WFS service explorer - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This is a simple tool for exploring WFS services on Azure Maps." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, WFS, web feature service, ogc, spatial data, spatial io module" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add reference to the Azure Maps Spatial IO module. -->
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
<script type='text/javascript'>
var map, client, layer, currentServiceUrl;
var proxyServiceUrl = window.location.origin + '/Common/CorsEnabledProxyService.ashx?url=';
//Sample WFS services to let users test with.
var services = [
{ name: 'NOAA Climate outlook', url: 'https://idpgis.ncep.noaa.gov/arcgis/services/NWS_Climate_Outlooks/cpc_mthly_precip_outlk/MapServer/WFSServer?request=GetCapabilities&service=WFS' },
{ name: 'EPA - Snowfall indicators', url: 'https://gispub4.epa.gov/arcgis/services/OAR_OAP/Snowfall_Indicators/MapServer/WFSServer?' },
{ name: 'Massachusetts GIS', url: 'https://giswebservices.massgis.state.ma.us/geoserver/wfs?request=GetCapabilities&service=WFS' },
{ name: 'NZ GNS Science', url: 'https://data.gns.cri.nz/webmaps/geology/wfs' },
{ name: 'CIESIN, Columbia University', url: 'https://sedac.ciesin.columbia.edu/geoserver/grump-v1/ows?request=getcapabilities&service=wfs' },
{ name: 'BC Recreation Polygons', url: 'https://openmaps.gov.bc.ca/geo/pub/WHSE_FOREST_TENURE.FTEN_RECREATION_POLY_SVW/wfs' },
{ name: 'Aerogravity/magnetic 3d surveys', url: 'https://data.geus.dk/geusmap/ows/4258.jsp' },
{ name: 'NSW Villages', url: 'https://openapi.aurin.org.au//public/wfs' },
{ name: 'US Active mines (USGS)', url: 'https://mrdata.usgs.gov/wfs/active-mines' },
{ name: 'Geology of Hawaii (USGS)', url: 'https://mrdata.usgs.gov/wfs/hi?request=getcapabilities&service=WFS&version=1.1.0&' }
];
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);
//Generate a selection list of some predefined WFS services.
var html = ['<option value="-1"></option>'];
for (var i = 0; i < services.length; i++) {
html.push('<option value="', i, '">', services[i].name, '</option>');
}
document.getElementById('servicesDD').innerHTML = html.join('');
});
}
function loadClient(url) {
currentTypeName = null;
currentServiceUrl = url;
document.getElementById('loadingIcon').style.display = '';
document.getElementById('typeNames').innerHTML = '';
datasource.clear();
//Create the WFS client to access the service.
client = new atlas.io.ogc.WfsClient({
url: url,
proxyService: (document.getElementById('useProxyService').checked) ? proxyServiceUrl : null
});
//Check the capabilities of the service.
client.getCapabilities().then(cap => {
currentTypeName = cap.featureTypes[0].name;
//Create a list of feature type sets to choose from.
var html = [];
for (var i = 0; i < cap.featureTypes.length; i++) {
html.push('<option value="', cap.featureTypes[i].name, '"');
if (i === 0) {
html.push(' selected="selected"');
}
html.push('>', cap.featureTypes[i].name, '</option>');
}
document.getElementById('typeNames').innerHTML = html.join('');
processQuery();
});
}
function loadSelectInput() {
var serviceIdx = getSelectValue('servicesDD');
if (serviceIdx >= 0) {
currentServiceUrl = services[serviceIdx].url;
loadClient(currentServiceUrl);
} else {
currentServiceUrl = null;
datasource.clear();
}
}
function proxyOptionChanged() {
if (currentServiceUrl) {
loadClient(currentServiceUrl);
}
}
function processQuery() {
document.getElementById('status').innerText = '';
if (currentTypeName) {
//Create the request for the WFS service.
var request = {
typeNames: getSelectValue('typeNames')
};
var mf = getSelectValue('maxFeatures');
if (mf !== 'Max') {
request.count = parseInt(mf);
}
//Make a request to get features from the WFS service.
client.getFeatures(request).then(fc => {
if (fc) {
//IF there is bounding box information, use it to update the map view.
if (fc.bbox) {
map.setCamera({ bounds: fc.bbox, padding: 50 });
}
//Update the shapes in the data source with the results from the request.
datasource.setShapes(fc);
document.getElementById('status').innerText = `${fc.features.length} features loaded.`;
document.getElementById('loadingIcon').style.display = 'none';
}
}, error => {
document.getElementById('status').innerText = error;
document.getElementById('loadingIcon').style.display = 'none';
});
}
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
</script>
<style>
#myMap {
position: relative;
width: calc(100% - 375px);
min-width: 290px;
height: 600px;
float: left;
}
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
}
#loadingIcon {
position: absolute;
top: 250px;
left: 120px;
}
select {
max-width: 320px;
}
</style>
</head>
<body onload="GetMap()">
<fieldset class="sidePanel">
<legend><h1 style="font-size:16px">WFS service explorer</h1></legend>
This is a simple tool for exploring WFS services on Azure Maps.
<br /><br />
WFS Service:<br /><select id="servicesDD" onchange="loadSelectInput()"></select><br /><br />
<input id="useProxyService" type="checkbox" onclick="proxyOptionChanged()" /> Use Proxy Service
<br /><br />
<b>Max features:</b>
<select id="maxFeatures" onchange="processQuery()">
<option value="100">100</option>
<option value="250">250</option>
<option value="500" selected="selected">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
<option value="Max">Max</option>
</select>
<br /><br />
<b>Property types:</b><br /><br />
<select id="typeNames" onchange="processQuery()"></select>
<br /><br />
<b>Status: </b><span id="status"></span>
</fieldset>
<div id="myMap"></div>
<img id="loadingIcon" style="display:none;" src="../Common/images/loadingIcon.gif" />
</body>
</html>