Paper 1513-2017: Integrating SAS-VA with Google Maps for ...support.sas.com/resources/papers/proceedings17/1513-2017.pdf · 1 Paper 1513-2017 Integrating SAS-VA with Google Maps for

1

Paper 1513-2017

Integrating SAS-VA with Google Maps for analysis and information visualization

Marcus Vinicius de Oliveira Palheta ([email protected]), Sérgio da Costa Côrtes ([email protected]), Brazilian Federal Agency for Support and

Evaluation of Graduate Education - CAPES

ABSTRACT Exploring, analyzing, and presenting information are SAS Visual Analytics strengths. However, when there is a need to extend this information overview to an unlimited audience, outside the boundaries of the Organization, it is necessary to aggregate geographic information to facilitate the interactivity and usage of the information. This application uses programming languages like JavaScript, HTML and CSS, in an integrated way with SAS programming, to show information about the 4,239 Brazilian graduate programs, evaluated by the Coordination for the Improvement of Higher Education Personnel - CAPES, in Brazil, with cartographic precision. The visualization of data generated in SAS-VA, integrated with Google Maps and Google Street View. Thus, its users can select postgraduate programs in Brazilian, knowing its information, theses and dissertations, its location in the Brazilian territory and the university campus of the educational institution.

INTRODUCTION The growing demand for information about post-graduation in Brazil makes necessary to expand the visualization of this information to an audience outside the limits of the Organization. For this purpose, the Coordination for the Improvement of Higher Level Personnel (Capes) has used SAS Visual Analytics due to strengths of the tool: exploring, analyzing and presenting information. For analysis and visualization of information, SAS Visual Aanalytics makes use of tables, graphs and maps, offering a large number of options in order to facilitate in an agile way the construction of reports. However, in some cases, in order to facilitate the interaction and use of information by end users, there is a need to aggregate geographic information that is not available among the options offered by the tool.

In this sense, this work presents a way to use the JavaScript, HTML and CSS programming languages, integrated with SAS Stored Process, which allows the visualization of cartographic information in SAS-VA, integrated with Google Maps and Google Street View. Thus, users can select Brazilian postgraduate programs, know their qualitative information, such as location in the Brazilian territory, university campus of the educational institution, address, note and evaluation area. Using Google Maps allows users to view the location of postgraduate programs using Google Street View functionality. In addition, they can learn about the theses and dissertations defended in Brazilian postgraduate programs.

GOOGLE MAPS API API (Application Programming Interface) is a set of methods and tools that can be used to build software applications. The Google Maps API is a free map service provided by Google that gives developers several ways to incorporate Google Maps and all its features into web pages or retrieve data from Google Maps, as well as allowing simple use and customization

Google Maps has several APIs that can be incorporated into the site / application according to each case. The list of available APIs follows below:

Web API's:

- Google Maps JavaScript API

- Google Static Maps API

- Google Street View Image API

- Google Maps Embed API

mailto:[email protected]


2

Web Service API's:

- Google Maps Directions API

- Google Maps Distance Matrix API

- Google Maps Elevation API

Google Maps Geocoding API

- Google Maps Geolocation API

- Google Maps Roads API

- Google Maps Time Zone API

- Google Places API Web Service

Mobile APIs:

- Google Maps Android API

- Google Places API for Android

- Google Maps SDK for iOS

- Google Places API for iOS

According to the needs of the project in process of being developed, one or a combination of these APIs can be used.

The application described in this work uses the Google Maps JavaScript API in its third version, which enables us to customize maps with our own content and images, as well as implementing various features such as marking points of interest with custom icons, drawing circles, Polygons, paths, among others. For full Google Maps JavaScript API documentation, guides, examples, and support, visit https://developers.google.com/maps/documentation/javascript/.

STORED PROCESS IN SAS VISUAL ANALYTICS

A Stored Process is a SAS program stored on a server and it can be run when required by an application request. Stored Process can be used for web reports, analysis, creation of Web application, delivery of packages to clients or to the middle tier and publishing results to channels or repositories. In addition, a Stored Process can also access any SAS data source or external files and create new data sets, files, or other data types supported by SAS.

Storing a SAS program on a server provides an effective method for managing and controlling of changes, giving the code manager the ability to change programs and, simultaneously, ensuring that each client that calls a Stored Process has the latest version available. This concept becomes more powerful when it is considered that the same Stored Process can be requested from different SAS applications.

These programs can be created from the SAS Enterprise Guide or SAS Management Console and can be registered on the metadata server via the SAS Management Console or by using the SAS code itself. To explore Stored Process properties stored on a server, you can use the SAS Management Console. The Display 1 shows the properties screen for a Stored Process.

https://developers.google.com/maps/documentation/javascript/

3

Display 1. Stored Process Properties in SAS Management Console

From the execution of a Stored Process you can obtain one of the following two results: the Stored Process can run in the background and manipulate the data, not being visible and its results are not returned to the user, so the program run without the user knowing this. In the other case, the result is visible to the user, in package format or streaming. It is from this second form that the Stored Process is used in this work.

Stored Processes can be used to increase the capabilities of SAS Visual Analytics by producing specific graphs, maps, and calculations that can not be performed through SAS Visual Analytics Designer. There are two simple ways to add a Stored Process to a report from SAS Visual Analytics Designer.

The first is simply dragging the Stored Process from the Objects tab and adding it to the report, as shown in the Display 2.

Display 2. Insert Stored Process from Objects Tab

4

Another way is to add the Stored Process as an external link, so, user can define parameters from another object in the report. External links can be created from report objects such as charts, tables, images, and texts.

In this work, the Stored Process was inserted by dragging from Objects tab. The image below illustrates how the Stored Process can be inserted as an external link from a chart and a text. In case of text option, it may be indicated as a link to the url of the Stored Process. For more information on the Stored Process, please read https://support.sas.com/documentation/cdl/en/stpug/68399/PDF/default/stpug.pdf.

Display 3. Insert Stored Process from Chart and Text

INTEGRATING GOOGLE MAPS AND SAS VISUAL ANALYTICS

SAS Visual Analytics provides several ways to present information by letting user explore data quickly and easily. Google Maps, in addition to being widely used, has a number of features, such as Google Street View, which greatly enhance the display of information through the use of a map. So imagine how great it would be to combine the functionality of these tools to present information. This work shows a way to use information stored in loaded tables on SAS LASR server and display them on a Google map that can be viewed from a report created in SAS Visual Analytics.

To integrate a Google Maps map with SAS VA, first you must create a Stored Process that returns the information you want in a format that can be read by the programming language that generates the map. In the case of this work, the JSon format was chosen and, for this, the JSON procedure was used with SAS.

User, then, create a Stored Process with the code that generates the map and use it embedded in a SAS VA report, which will display the map and its features. Thus, the process is described in more detail below.

Initially, a Stored Process was created to show the information of Brazilian postgraduate programs in JSon format. This information could be showed in another format, such as XML, however, the JSon format was chosen because of its structure and ease of understanding. To show the information in JSon format, it was used the PROC JSON, which creates JSon files in several formats from a data source in the SAS. The complete Stored Process code can be found at the end of this work.

https://support.sas.com/documentation/cdl/en/stpug/68399/PDF/default/stpug.pdf

5

This Stored Process receives several parameters so it can return information only from the postgraduate programs consulted. The Erro! Fonte de referência não encontrada. shows the parameters created in the case of the Stored Process used for this work.

Display 4. Parameters Created for the Stored Process which Generates Data in Json Format

This data returned in JSon format had been used to create the markers on the map, as well as displaying information about each of the programs, when clicking on a particular marker.

The data used as the data set for creating the map markers were stored in a table loaded within the SAS Visual Analytics Public LASR, but could be on another server to which users are allowed to access and view the data. In this work, the map is accessed with the guest user permission, so the same must have permission to access and view the data on the server in question. This table has been previously prepared so that it returns information resulting from the various filters that can be applied to the data and also contains the latitude and longitude information of each postgraduate program so that they can be plotted correctly on the map.

After creating the Stored Process that returns the desired information in JSon format, it was created another Stored Process with the code using CSS, HTML and Javascript language to generate the map of Google Maps with the spatial distribution of Brazilian postgraduate programs. See the Google Maps API for more information on how to create a code to use a Google Maps map.

The complete code for generating the map can be found at the end of this work, however the main part of it is demonstrated below:

$.get({url:"http://analisevisual.des.capes.gov.br:7980/SASStoredProcess

/guest?_program=%2FDTI%2FDistribuicao_espacial_dos_PPG_brasileiros%2FStored_p

rocess%2FGenerate_Json_To_Google_Map&PRINCIPAL_IES=S&UF="+filtros.uf+"&EVAL_F

IELD="+filtros.area+"&INPUT_GRADE1="+(filtros.conceitos[0]==undefined ? 0

:filtros.conceitos[0])+"& INPUT_GRADE2="+(filtros.conceitos[1]==undefined ? 0




:filtros.conceitos[4])+""}).then(function(result){

dados = result;

6

In this code snippet, it is referenced the Stored Process, previously created, that accesses the desired data table and returns this information in JSon format.

With the controls added to the code that creates the map, the Stored Process send all the required parameters to the Stored Process that shows the JSon format, so it gives only the required information. Thus, it is possible to visualize the spatial distribution of the postgraduate programs in Brazil, in addition, it is possible to make filters to select States, municipality, area of evaluation of Capes and note of the program.

To insert stored process, named Google Map, just drag it from the Objects tab, add to the report and select the stored process in the folder in which it was saved, as shown in Display 5.

Display 5. Add "Google Map" Stored Process to SAS VA Report

In this way, you can use the features offered by the Google Maps API to map the data stored in a table loaded on the SAS VA LASR server. In addition, using the Stored Process enables these maps to be embedded and used within reports created with Visual Analytics Report Designer, showing how great the potential of SAS Visual Analytics is for data presentation and analysis. The result of our work can be known by accessing the link http://goo.gl/uAjvGw.

http://goo.gl/uAjvGw

7

Display 6. Google Map Embedded within SAS Visual Analytics Report

CONCLUSION

SAS Visual Analytics is a powerful tool for visualizing and analyzing data. Through it, users can create dashboards quickly and easily which allows faster insights and faster and more accurate decision making. Linking the features of this tool with Google Maps features to display data only increases the analytical power offered by SAS VA.

Use information stored in loaded tables on a SAS LASR server and display them on an embedded map created with the Google Maps API, viewed and manipulated within a report created in SAS Visual Analytics with HTML language And Javascript, further enhances SAS VA's analytical power. This shows the great potential of SAS Visual Analytics as a data presentation and analysis tool.

REFERENCES

SAS Stored Processes. 2016. “SAS 9.1.3 Integration Technologies: Developer’s Guide.” Accessed February, 2016. http://support.sas.com/rnd/itech/doc9/dev_guide/stprocess/index.html

Google Maps APIs. 2016. Accessed January, 2016. https://developers.google.com/maps/documentation/javascript/

Base SAS(R) 9.4 Procedures Guide, Sixth Edition – JSON Procedure. 2016. Accessed February, 2016. http://support.sas.com/documentation/cdl/en/proc/69850/HTML/default/viewer.htm#n0nejfk9q0pzmnn181l92qk3ah2e.htm

RECOMMENDED READING

SAS® 9.4 Stored Processes: Developer’s Guide, Third Edition

SAS® Visual Analytics 7.3: User’s Guide

CONTACT INFORMATION

Your comments and questions are valued and encouraged. Contact the author at:

http://support.sas.com/rnd/itech/doc9/dev_guide/stprocess/index.html

https://developers.google.com/maps/documentation/javascript/

http://support.sas.com/documentation/cdl/en/proc/69850/HTML/default/viewer.htm#n0nejfk9q0pzmnn181l92qk3ah2e.htm

http://support.sas.com/documentation/cdl/en/proc/69850/HTML/default/viewer.htm#n0nejfk9q0pzmnn181l92qk3ah2e.htm

8

Marcus Vinícius Oliveira Palheta Brazilian Federal Agency for Support and Evaluation of Graduate Education – CAPES [email protected] Sérgio da Costa Côrtes [email protected]

SAS and all other SAS Institute Inc. product or service names are registered trademarks or trademarks of SAS Institute Inc. in the USA and other countries. ® indicates USA registration.

Other brand and product names are trademarks of their respective companies.

APPENDIX 1

Below is the complete SAS code to return data in JSon format

PROC JSON OUT=_WEBOUT NOSASTAGS PRETTY;

EXPORT MAP.MAPA_PROGRAMAS_SAS

(WHERE=((IN_IES_PRINCIPAL = "&PRINCIPAL_IES" AND SG_UF_PROGRAMA =

"&UF" AND NM_EVALUATION_FIELD = "&EVAL_FIELD") AND

((CD_CONCEITO_PROGRAMA = &INPUT_GRADE1) OR

(CD_CONCEITO_PROGRAMA = &INPUT_GRADE2) OR



(CD_CONCEITO_PROGRAMA = &INPUT_GRADE5))

));

RUN;

APPENDIX 2

Below is the complete SAS code to generate Goggle Map

data _null_;

format infile $char1000.;



9

input;

infile = resolve(_infile_);

file _webout;

put infile;

cards4;

<html>

<head>

<title>Buscar programas</title>

<meta name="viewport" content="initial-scale=1.0, user-

scalable=no">

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="estilo.css">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"

></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery

.blockUI.js"></script>

</head>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

height: 100%;

width: 100%;

}

.controls {

border: 1px solid transparent;

border-radius: 20px 2px 20px 2px;

box-sizing: border-box;

-moz-box-sizing: border-box;

height: 32px;

outline: none;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}

.controls2 {





height: 32px;

outline: none;

10


}

.controlsUF {





height: 32px;

outline: none;


}

.controlsAval {





height: 30px;

outline: none;


}

.controlcheck {





outline: none;


}

#findprog {

position: absolute;

margin-top: 12px;

background-color: #fff;

font-family: Roboto;

font-size: 14px;

font-weight: 300;

margin-left: 125px;

padding: 7px 0px 0 0px;

text-overflow: ellipsis;

width: 147px;

z-index: 5;

}

#locationField {

position: absolute;

width: 190px;

height: 25px;

left: 140px;

11

top: 2px;

z-index: 5;

}

#dropUF {

position: absolute;

margin-top: 11px;



font-size: 15px;

font-weight: 300;

margin-left: 580px;



width: 145px;

z-index: 5;

}

}

#UF {

width: 100%;

}

#type {

position: absolute;

left: 2px;

top: 50px;

z-index: 5;

}

#autocomplete {



font-size: 15px;

font-weight: 300;

margin-left: 136px;

margin-top: 10px;

padding: 0 11px 0 13px;


width: 300px;

z-index: 5;

}

#autocomplete:focus {

border-color: #4d90fe;

}

#controles {

position: absolute;

z-index: 5;

color: #fff;

background-color: #4d90fe;

padding: 0px 11px 0px 11px;

12

margin-left: 5px;

margin-top: 130px;

}

#cluster {

position: absolute;

margin-left: 870px;

margin-top: 11px;

color: #fff;


font-size: 15px;

z-index: 5;

}

#uncluster {

position: absolute;

margin-left: 730px;

margin-top: 11px;

color: #fff;


font-size: 15px;

z-index: 5;

}

#dropAval {

position: absolute;

margin-top: 70px;

margin-left: 5px;



font-size: 15px;

font-weight: 300;



width: 384px;

z-index: 5;

}

#Aval {

width: 100%;

}

</style>

<body>

<div id="findprog" class="controls">

13

Zoom in locality:

</div>

<div id="locationField">

<input id="autocomplete" class="controls" placeholder="Name of

the city" type="text" />

</div>

<div id="dropUF" class="controls2">

<select id="UF" class="controlsUF UF">

<option value="TD"selected>All states</option>

<option value="AC">Acre</option>

<option value="AL">Alagoas</option>

<option value="AM">Amazonas</option>

<option value="AP">Amapá</option>

<option value="BA">Bahia</option>

<option value="CE">Ceará</option>

<option value="DF">Distrito Federal</option>

<option value="ES">Espírito Santo</option>

<option value="GO">Goiás</option>

<option value="MA">Maranhão</option>

<option value="MT">Mato Grosso</option>

<option value="MS">Mato Grosso do Sul</option>

<option value="MG">Minas Gerais</option>

<option value="PA">Pará</option>

<option value="PB">Paraíba</option>

<option value="PR">Paraná</option>

<option value="PE">Pernambuco</option>

<option value="PI">Piauí</option>

<option value="RJ">Rio de Janeiro</option>

<option value="RN">Rio Grande do Norte</option>

<option value="RS">Rio Grande do Sul</option>

<option value="RO">Rondônia</option>

<option value="RR">Roraima</option>

<option value="SC">Santa Catarina</option>

<option value="SP">São Paulo</option>

<option value="SE">Sergipe</option>

<option value="TO">Tocantins</option>

</select>

</div>

<div id="dropAval" class="controlsAval">

<select id="Aval" class="controlsAval areas" >

<option value="0" selected>CHOOSE EVALUATION

FIELD</option>

<option value="ALL">ALL EVALUATION FIELDS</option>

<option value="PUBLIC ADMINISTRATION, ACCOUNTING

SCIENCES AND TOURISM">PUBLIC ADMINISTRATION, ACCOUNTING SCIENCES AND

TOURISM</option>

<option value="AGRICULTURAL SCIENCES">AGRICULTURAL

SCIENCES</option>

14

<option value="ANIMAL SCIENCE/FISHING

RESOURCES">ANIMAL SCIENCE/FISHING RESOURCES</option>

<option

value="ANTHROPOLOGY/ARCHEOLOGY">ANTHROPOLOGY/ARCHEOLOGY</option>

<option value="COMUNICATION AND

ADMINISTRATION">COMUNICATION AND ADMINISTRATION</option>

<option value="ARCHITECTURE, URBANISM AND

DESIGN">ARCHITECTURE, URBANISM AND DESIGN</option>

<option value="ARTS/MUSIC">ARTS/MUSIC</option>

<option

value="ASTRONOMY/PHYSICS">ASTRONOMY/PHYSICS</option>

<option value="BIODIVERSITY">BIODIVERSITY</option>

<option value="BIOLOGICAL SCIENCES">BIOLOGICAL

SCIENCES</option>

<option value="BIOTECHNOLOGY">BIOTECHNOLOGY</option>

<option value="CHEMISTRY">CHEMISTRY</option>

<option value="COMPUTER SCIENCE">COMPUTER

SCIENCE</option>

<option value="ECONOMY">ECONOMY</option>

<option value="EDUCATION">EDUCATION</option>

<option value="ENGINEERING">ENGINEERING</option>

<option value="ENVIRONMENTAL SCIENCES">ENVIRONMENTAL

SCIENCES</option>

<option value="FOOD SCIENCE">FOOD SCIENCE</option>

<option value="GEOGRAPHY">GEOGRAPHY</option>

<option value="GEOSCIENCES">GEOSCIENCES</option>

<option value="HISTORY">HISTORY</option>

<option

value="INTERDISCIPLINARY">INTERDISCIPLINARY</option>

<option value="LAW">LAW</option>

<option

value="LETTERS/LINGUISTICS">LETTERS/LINGUISTICS</option>

<option value="MATERIAL SCIENCE -

ENGINEERING">MATERIAL SCIENCE - ENGINEERING</option>

<option value="MATHEMATICS/PROBABILITY AND

STATISTICS">MATHEMATICS/PROBABILITY AND STATISTICS</option>

<option value="MEDICINE">MEDICINE</option>

<option value="NURSING">NURSING</option>

<option value="NUTRITION">NUTRITION</option>

<option value="ODONTOLOGY">ODONTOLOGY</option>

<option value="PHARMACY">PHARMACY</option>

<option value="PHILOSOPHY">PHILOSOPHY</option>

<option value="PHYSICAL EDUCATION">PHYSICAL

EDUCATION</option>

<option value="POLITICAL SCIENCE AND INTERNATIONAL

RELATIONS">POLITICAL SCIENCE AND INTERNATIONAL RELATIONS</option>

<option value="PSYCHOLOGY">PSYCHOLOGY</option>

<option value="PUBLIC HEALTH">PUBLIC HEALTH</option>

<option value="REGIONAL AND URBAN

PLANNING/DEMOGRAPHY">REGIONAL AND URBAN PLANNING/DEMOGRAPHY</option>

<option value="SOCIAL WORK">SOCIAL WORK</option>

<option value="SOCIOLOGY">SOCIOLOGY</option>

15

<option value="TEACHING">TEACHING</option>

<option value="THEOLOGY">THEOLOGY</option>

<option value="VETERINARY MEDICINE">VETERINARY

MEDICINE</option>

</select>

</div>

<div id="controles" class="controlcheck">

<label><b> Filter by grade </label>

<br/>

<label> of programs </b> </label>

<br/>

<label><input class="conceitos" type="checkbox"

checked=":checked" value="3"></input> Grade 3 </label>

<br/>


checked="checked" value="4"></input> Grade 4 </label>

<br/>



<br/>



<br/>



</div>

<table style="width:100%; height:100%;">

<tr>

<td style="width:90%;">

<div id="map" style="width:100%; height:100%; border: 2px solid

#3872ac;"></div>

</td>

<td valign="top" style="width:10%;">

<u><b>Legend:</b></u><br />

<img alt=""

src="http://maps.google.com/mapfiles/ms/icons/purple.png" />

Grade 3<br />

<img alt=""

src="http://maps.google.com/mapfiles/ms/icons/blue.png" />

Grade 4<br />

<img alt=""

src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />

16

Grade 5<br />

<img alt=""

src="http://maps.google.com/mapfiles/ms/icons/green.png" />

Grade 6<br />

<img alt=""

src="http://maps.google.com/mapfiles/ms/icons/red.png" />

Grade 7<br />

</td>

</tr>

</table>

<script>

var map, places;

var autocomplete;

var gmarkers1 = [];

var markers1 = [];

var UFS = {

"PA": {

center: {lat: -3.732, lng: -51.877},

zoom: 6

},

"PB": {

center: {lat: -7.24, lng: -36.781},

zoom: 7

},

"PR": {

center: {lat: -25.252, lng: -52.021},

zoom: 6

},

"PE": {

center: {lat: -8.814, lng: -36.954},

zoom: 6

},

"PI": {

center: {lat: -7.718, lng: -42.729},

zoom: 6

},

"RJ": {

center: {lat: -22.907, lng: -43.173},

zoom: 8

},

"RN": {

center: {lat: -5.402, lng: -36.954},

zoom: 6

},

"RS": {

center: {lat: -30.035, lng: -51.218},

zoom: 6

},

17

"RO": {

center: {lat: -11.506, lng: -63.581},

zoom: 6

},

"RR": {

center: {lat: 2.737, lng: -62.075},

zoom: 6

},

"SC": {

center: {lat: -27.086, lng: -50.878},

zoom: 6

},

"SP": {

center: {lat: -23.550, lng: -46.633},

zoom: 6

},

"SE": {

center: {lat: -10.574, lng: -37.386},

zoom: 6

},

"TO": {

center: {lat: -10.175, lng: -48.298},

zoom: 6

},

"TD": {

center: {lat: -14.2, lng: -51.9},

zoom: 4

},

"AC": {

center: {lat: -9.023, lng: -70.811},

zoom: 6

},

"AL": {

center: {lat: -9.571, lng: -36.781},

zoom: 6

},

"AM": {

center: {lat: -3.417, lng: -65.856},

zoom: 6

},

"AP": {

center: {lat: 0.902, lng: -52.003},

zoom: 6

},

"BA": {

center: {lat: -12.58, lng: -41.701},

zoom: 6

},

"CE": {

center: {lat: -5.498, lng: -39.321},

zoom: 6

},

18

"DF": {

center: {lat: -15.827, lng: -47.922},

zoom: 10

},

"ES": {

center: {lat: -19.183, lng: -40.309},

zoom: 6

},

"GO": {

center: {lat: -15.827, lng: -49.836},

zoom: 6

},

"MA": {

center: {lat: -4.861, lng: -45.274},

zoom: 6

},

"MT": {

center: {lat: -12.682, lng: -56.921},

zoom: 6

},

"MS": {

center: {lat: -20.772, lng: -54.785},

zoom: 6

},

"MG": {

center: {lat: -18.512, lng: -44.555},

zoom: 6

}

};

markers1 = [];

var markerGroups = {

3: [],

4: [],

5: [],

6: [],

7: []

};

/* variable used to store query data */

var dados = [];

/* variable used to store map points */

var markers = [];

/* define the color mark to program grade */

var cores = {

3:"purple",

4:"blue",

5:"yellow",

6: "green",

19

7:"red"

};

var filtros = {

conceitos: [3, 4, 5, 6, 7],

area: "0",

uf: "TD"

};

function initMap() {

/* create map*/

map = new google.maps.Map(document.getElementById("map"), {

zoom: UFS["TD"].zoom,

center: UFS["TD"].center,

mapTypeControl: true,

panControl: false,

zoomControl: true,

streetViewControl: true

});

/* places service */

places = new google.maps.places.PlacesService(map);

/* info window used to show marker data */

var infowindow = new google.maps.InfoWindow({content:""});

/* Configure zoom components */

/* auto complete for cities*/

autocomplete = new

google.maps.places.Autocomplete(document.getElementById("autocomplete"

), { types: ["(cities)"], componentRestrictions: {country: "br"}});

autocomplete.addListener("place_changed", function(){

var place = autocomplete.getPlace();

if (place.geometry) {

map.panTo(place.geometry.location);

map.setZoom(13);

search();

} else {

document.getElementById("autocomplete").placeholder = "Name of

the city";

map.setZoom(4);

map.setCenter({lat: -14.2, lng: -51.9});

}

});

/* listener for State */

document.getElementById("UF").addEventListener("change", function()

{

var UF = document.getElementById("UF").value;

if (UF == "TD") {

autocomplete.setComponentRestrictions([]);

map.setCenter({lat: -14.2, lng: -51.9});

20

map.setZoom(4);

} else {

autocomplete.setComponentRestrictions([]);

map.setCenter(UFS[UF].center);

map.setZoom(UFS[UF].zoom);

}

});

/* Configue filter behavior*/

/* Configure select grade component */

$(".conceitos").change(function(){

var conceito = $(this).val();

if ($(this).is(":checked")){

filtros.conceitos.push(conceito);

} else {

filtros.conceitos =

filtros.conceitos.filter(function(item){ return item != conceito });

}

buscar();

});

/* Configure handler to run filter by area*/

$(".areas").change(function(){

filtros.area = $(this).val();

buscar();

});

/* Configure handler to run filter by State*/

$(".UF").change(function(){

filtros.uf = $(this).val();

buscar();

});

console.log(filtros);

function buscar(){

$.blockUI({ message: "Loading..." });

$.get({url:"http://analisevisual.des.capes.gov.br:7980/SASStoredP

rocess/guest?_program=%2FDTI%2FDistribuicao_espacial_dos_PPG_brasileir

os%2FStored_process%2FGerar_Json_Mapa_PPG_no_Brasil_(Ingles)&PRINCIPAL

_IES=S&UF="+filtros.uf+"&EVAL_FIELD="+filtros.area+"&INPUT_GRADE1="+(f

iltros.conceitos[0]==undefined ? 0 :filtros.conceitos[0])+"&

INPUT_GRADE2="+(filtros.conceitos[1]==undefined ? 0

:filtros.conceitos[1])+"&

21






:filtros.conceitos[4])+""}).then(function(result){

dados = result;

/* Clear the actual filter markers */

markers.forEach(function(marker){

marker.setMap(null);

});

markers = [];

for (var dado in dados){

addMarker(dados[dado]);

}

$.unblockUI();

}).fail(function() {

$.unblockUI();

alert( "An error occurred on the server, try again later"

);

});

}

function addMarker(data) {

var category = data.CD_CONCEITO_PROGRAMA;

var avaliacao = data.NM_AREA_AVALIACAO;

var pos = new google.maps.LatLng(data.NR_LATITUDE,

data.NR_LONGITUDE);

var content = data.NM_PROGRAMA_IES;

var cor = cores[data.CD_CONCEITO_PROGRAMA];

cor = cor == undefined ? "blue-dot": cor;

var icon = "http://maps.google.com/mapfiles/ms/icons/" + cor +

".png";

var marker = new google.maps.Marker({

title: "Click for more informations",

position: pos,

category: avaliacao,

info : data,

map: map,

icon: new google.maps.MarkerImage(icon)

});

/*Configure infowindow maker*/

marker.addListener("click", function() {

var data = this.info;

var sContent =

"<p>" +

"<b>" +

22

"Brazilian program name:"+" "+data.NM_PROGRAMA_IES+

"<br>" +

"</b>"+

"Program name:"+" "+data.NM_PROGRAMA_IDIOMA+

"<br>" +

"Degree:"+" "+data.NM_GRAU_PROGRAMA_IDIOMA +

"<br>" +

"Evaluation field:"+" "+data.NM_EVALUATION_FIELD_MAPA+

"<br>" +

"University:"+" "+data.NM_INSTITUICAO_CAPES+

"<br>" +

"Grade:"+" "+data.CD_CONCEITO_PROGRAMA +

"<br>" +

"State:"+" "+data.SG_UF_PROGRAMA_MAPA +

"<br>" +

"City:"+" "+data.NM_MUNICIPIO_PROGRAMA +

"<br>" +

"Adress:"+" "+data.DS_ADRESS +

"<br>" +

"Zip Code:"+" "+data.NR_CEP_PROGRAMA +

"<br>"+

"<a target=_blank href=" + data.DS_URL + ">" + "Website" +

"</a>"

"</p>";

infowindow.setContent(sContent);

infowindow.open(map, this);

});

markers.push(marker);

}

}

</script>

<script

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDADNRHArM_NxZ_C

m91R3iDOPLsbtXySUQ&signed_in=true&libraries=places&callback=initMap"

async defer></script>

</body>

</html>

;;;;

run;

Documents

Paper 1513-2017: Integrating SAS-VA with Google Maps for ...support.sas.com/resources/papers/proceedings17/1513-2017.pdf · 1 Paper 1513-2017 Integrating SAS-VA with Google Maps for