[Go to Part I, Part II, Part III, Part IV, Part V, Part VI]
So, whilst KML works great for the Google Maps API, our second solution, Simile Exhibit Map uses JSON.
Now, JSON has a lot in common with KML … they’re both just a flat file representation of data. They simply differ in format.
Our JSON file will look something like this
{types: {
"Program" : {pluralLabel: "Programs"},
"Country" : {pluralLabel: "Countries"}
},
"items": [
{ "label": "2010 Summer Athens",
"type": "Program",
"semester": "10J",
"label-link": "http://international.udel.edu/studyabroad/programs/database.asp?PWDID=670",
"photo-link": "http://international.udel.edu/studyabroad/photo/greece/md/md_corinthian.jpg",
"country": ["Greece"],
"department": ["FLLT","UNIV"],
"course": ["UNIV 370-010","FLLT 320","FLLT 267"]
},
{ "label": "2010 Summer Granada",
"type": "Program",
"semester": "10J",
"label-link": "http://international.udel.edu/studyabroad/programs/database.asp?PWDID=671",
"photo-link": "http://international.udel.edu/studyabroad/photo/spain/castle.gif",
"country": ["Spain"],
"department": ["SPAN","UNIV"]
"course": ["UNIV 370-015","SPAN 107","SPAN 206","SPAN 208"]
},
{ "label": "Spain",
"type": "Country",
"index": "Spain",
"flagURL": "http://international.udel.edu/flags/spain.gif",
"latLng": "40.4637,-3.7492"
},
{ "label": "Greece",
"type": "Country",
"index": "Greece",
"flagURL": "http://international.udel.edu/flags/greece.jpg",
"latLng": "39.0742,21.8243"
}
]}
The thing I really like about this Simile Exhibit project is that we start using different TYPES of data. The file above has 2 Countries and 2 Programs. And a Program can be in multiple countries.
And you’ll note that longitude and latitude only appear in the countries, so you need to use those to figure out where to place said programs on the map.
Also, note at the top of the JSON file, we explain how to pluralize the different data types. That’s used by the Simile Exhibit later on.
Now, we generate the JSON in much the same way we generated the KML in previous posts…
Via Classic ASP, we just build the darn file.
types: {
“Program” : {pluralLabel: “Programs”},
“Country” : {pluralLabel: “Countries”}
},
“items”: [
<%Response.ContentType=”text;charset=utf-8″
Function ReplaceStr (TextIn, SearchStr, Replacement, CompMode)
Dim WorkText, Pointer
If IsNull(TextIn) Then
ReplaceStr = Null
Else
WorkText = TextIn
Pointer = InStr(1, WorkText, SearchStr, CompMode)
Do While Pointer > 0
WorkText = Left(WorkText, Pointer – 1) & Replacement & Mid(WorkText, Pointer + Len(SearchStr))
Pointer = InStr(Pointer + Len(Replacement), WorkText, SearchStr, CompMode)
Loop
ReplaceStr = WorkText
End If
End Function
DIM CONNECT, ProgramWebData, Courses, Departments, SemesterString
Set Connect = Server.CreateObject(“ADODB.Connection”)
Connect.Open “IPSS”
IF Request.QueryString(“Semester”)=”” THEN
SemesterString=””
ELSE
SemesterString=”AND Program.Semester='”&Request.QueryString(“Semester”)&”‘”
END IF
Set ProgramWebData=Connect.Execute(“SELECT Semester.Semester,ProgramWebData.Country,ProgramWebData.PWDID,ProgramWebData.PhotoLink,Program.Descriptive,ProgramWebData.Longitude,ProgramWebData.Latitude FROM (ProgramWebData INNER JOIN Program ON ProgramWebData.ProgramID=Program.ProgramID) INNER JOIN Semester on Program.Semester=Semester.Semester WHERE Semester.Upcoming” & SemesterString)
do until ProgramWebData.EOF
Set Courses=Connect.Execute(“SELECT Department,CourseNumber FROM Courses WHERE PWDID=” & ProgramWebData(“PWDID”))
Set Departments=Connect.Execute(“SELECT Department FROM Courses WHERE PWDID=” & ProgramWebData(“PWDID”) & ” GROUP BY Department”)
%>
{
“label”: “<%=ProgramWebData(“Descriptive”)%>”,
“type”: “Program”,
“semester”: “<%=ProgramWebData(“Semester”)%>”,
“label-link”: “http://international.udel.edu/studyabroad/programs/database.asp?PWDID=<%=ProgramWebData(“PWDID”)%>”,
“photo-link”: “<%=ProgramWebData(“PhotoLink”)%>”,
“country”: [“<%=ReplaceStr(ProgramWebData(“Country”),”,”,”””,”””,0)%>”],
“department”:
[
<%DO UNTIL Departments.EOF%>
“<%=Departments(“Department”)%>”
<%Departments.MoveNext
IF Departments.EOF=FALSE THEN%>,<%END IF
LOOP%>
],
“course”:
[
<%DO UNTIL Courses.EOF%>
“<%=Courses(“Department”)&” “&Courses(“CourseNumber”)%>”
<%Courses.MoveNext
IF Courses.EOF=FALSE THEN%>,<%END IF
LOOP%>
]
},
<% ProgramWebData.MoveNext
IF ProgramWebData.EOF=FALSE THEN%>,<%END IF
LOOP
Set Country=Connect.Execute(“SELECT * FROM Country”)
do until Country.EOF%>
{
“label”: “<%=Country(“Country”)%>”,
“type”: “Country”,
“index”: “<%=Country(“Country”)%>”,
“flagURL”: “<%=Country(“flagURL”)%>”
<%IF Country(“Latitude”)<>”” AND Country(“Longitude”)<>”” THEN%>
,
“latLng”: “<%=Country(“Latitude”)%>,<%=Country(“Longitude”)%>”
<%END IF%>
}
<%Country.MoveNext
IF Country.EOF=FALSE THEN%>,<%END IF
LOOP%>
]
}
And the only reason the page is longer than it’s KML counterpart is because we’re building two different types of data, Countries and Programs.
NOTE: The remainder of this post is unfinished and I will come back to complete it later
We’re then using the following template files to generate the same JSON file in Drupal. Please refer to Part III for the full concept on generating flat data files from Drupal Views…
template.php updated to add
if ( isset($_GET[‘json’]) && $_GET[‘json’] == 1 ) {
$vars[‘template_file’] = ‘page-json’;}
}
page-json.tpl.php
{
“items”: [
<?php print $content ?>
]
}
views-view-fields–json_test–page.tpl.php
foreach ($fields as $id => $field):
switch ($field->label) {
case “Name”:
print “\”label\”: \””;
break;
case “Description”:
print “\”description\”: \””;
break;
case “Latitude”:
print “\”latLng\”: \””;
break;
case “Longitude”:
print “,”;
break;
}
print $field->content;
switch ($field->label) {
case “Name”:
print “\”,”;
break;
case “Description”:
print “\”,”;
break;
case “Longitude”:
print “\””;
break;
}
endforeach;
?>
views-view–json_test–page.tpl.php
<?php print $rows; ?>
<?php elseif ($empty): ?>
<?php print $empty; ?>
<?php endif; ?>
views-view-unformatted–json_test–page.tpl.php
<?php print $title; ?>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
{
<?php print $row; ?>
},
<?php endforeach; ?>
