Mapbox Analytics API

hello my name is Ed Gonzalez today I'd
like to demonstrate two custom controls
I created that bringing advanced
geo-mapping functionality into Cognos
analytics interactive reports I do this
by tapping into the power of the map by
API
of course map box is already integrated

into Cognos analytics however the use of
it is still limited to simple dashboard
components and it is not yet found its
way into report development the key
phrase there is not yet
iBM has been improving an adding
functionality with each subsequent
release of Cognos analytics
however in the meantime we can use
custom controls to tap into the power of
the map Box API the simplest way to do
this is to review examples of map box
API JavaScript code and there are plenty
of examples on the matte box website
then copy and refactor the code into the
format expected by Cognos and you can
find that expected format by reviewing
sample of JavaScript code shipped with
canvas analytics then finally use a
custom control to integrate it into our
interactive reports now this may sound
like a slight oversimplification of the
process but at its core it is basically
the approach I used when creating the
example that I'm about to demonstrate
now to become more familiar with custom
controls I would highly recommend
checking out the IBM analytics
communities online this is a link to a
pretty good introduction of custom
controls and JavaScript and interactive
reports now with that being said let's
go ahead and jump right into a demo so
here we are in Cognos analytics and
first thing I'm going to do is open up a
template that I restarted I started a
report that I had with my content and I
named a template one and when I open it
and we run it we can see that I get a
very basic report nice and simple here
and the data that I'm using comes from
the ghost sales the ghost sales sample
database
they come shipped with with Cognos
analytics and the data in the list is
basically a filtered down list of all
the retailers that are in the United
States along with the latitude and
longitude for each of the retailers and
that latitude and longitude is what the
map API is going to use to plot them out
onto the map so the first example I have
is simply simply taking that latitude
and longitude and putting dots on the
map so let's go ahead and jump right
into a page design here so we can add
our controls so from the toolbox we go
to advanced
we take our custom control and drop it
right onto the report we're going to
leave that highlighted there so we can
view its properties so the properties
are fairly simple we have a description
with it which is optional we have the UI
type and then we have three different UI
types I'm going to go ahead and leave it
with the with the default which is UI
without event propagation and then the
module path now this is very important
this is actually the path to the
JavaScript that we created using the
Maps API samples so on my server I have
this located and localhost so this would
be H TCP localhost and I have it in the
folder called controls now of course
there's going to be different I'm your
server one thing that is very common is
to put these controls in the install
directory of cognos underneath web
content so this is basically their path
to our JavaScript file so I'm going to
go ahead and hit OK there and then just
for formatting purposes I'm going to go
ahead and set the height and width of
this control I'm going to go ahead and
set the height to 700 and I'm going to
set our width to 1250 let's make this
nice and big here okay so now we have
our property set the Olin property that
I didn't mention was configuration now
when we create these custom controls you
can allow your
to accept some variables so that a user
or power user can set them at the report
level in some of the examples there
would be some colors maybe a password
maybe a key for your API but for now in
my examples here I don't use any of that
configuration so back to the custom
controller itself we have our property
set now we want to access some of the
data we'll do this by clicking on the
plus sign and we get to add data set
option now by highlighting that data set
option we can see that it automatically
creates a query force and this is
exactly the same functionality you get
when you drop a list report on or you
drop a chart on to your report what it
does is it automatically creates a query
for you to populate but in our case we
want to tie these two together and we
want to take advantage of the
interactive functionality so we're going
to go ahead and we're going to use the
same query that populates the table that
already exists and that was query 1 so
now that we have that I'm going to go
and go to the data items for query 1 and
again these are the data items that
populate the list I'm going to go ahead
and I'm just going to grab the city I'm
going to grab the longitude and then
grab the latitude and populate those
three items city isn't that really
necessary my code expects a text field
to be passed in and I have that in there
for future use but what's really
important here of course is the
longitude and latitude so now that I
have that populated you can see that I
set for the custom control
I set a couple of simple properties
pointed to some data and now by running
this I should get a map that displays
all of the retailers in the United
States and there there we go we can see
now that on our right-hand side we have
a map of the US with a bunch of timely
red dots in each one of those red dots
represents one of our retailers in our
list report here and now because we are
in interactive reports we can take
advantage of some of the interactivity
that Cognos has
built into their report and specifically
for this example I'm going to use the
filtering capability so simply by
selecting a field and on my list report
I can filter this to include only
California and then by doing so I not
only filter my list but I also filter my
map and I'm only displaying the fields
I'm sorry only displaying the retailer
state exist in California and I can take
that down another level hair by
including only Los Angeles and then
there we can see that we map only the
retailers located in the Los Angeles
area and then finally we can go down
even further and filter by a single
store or a single retailer and this one
happens to be at century Boulevard here
and we zoom in automatically all the way
down to that one individual location so
now I'm going to go ahead and I'm going
to remove all the filters and that is
basically it for this first sample so
the first example I simply took a list
of stores and Plaza them out onto the
map now I'm going to give you an example
of one that just a slightly bit more
advanced but still basically the same
principle so I'm going to go ahead and
I'm going to go back to welcome here
back to my content my template and as we
can see we have the exact same template
on the screen here Singh example this
report same exact format so once again
I'm going to jump in to page design go
to my controls my toolbox take custom
control drop that onto this screen now
that you get highlighted check out its
properties and then add the path to my
JavaScript code now this one is in the
same location but with a slightly
different name
yes so again as you can see I'm simply
in this model path just pointing to the
JavaScript code that I'm going to use to
populate this classroom control I hit OK
and I'm bringing it up not only the
other properties is exactly the same as
the last time and I'm going to set the
height and width once more again the
height I'm going to set to 700 and I'm
going to set the width to 1250 give us a
nice big map on the screen there okay
and then I'm going to add my data once
again I want to make sure that I'm
sharing the same query as the list
report just to make sure that
everything's pies together go back to
our data items and once again I'm going
to bring in a city name the longitude
and the latitude and then I'm going to
go ahead and simply run the report
now as this runs we can see they look
very similar to the previous report the
only real difference we see here is that
on the map itself our dot or our point
are a different color and on the list
report the JavaScript code added another
column for us and that is to help us
yeah and that is for it to help us
interact with the map itself so one a
couple of the advanced features that
I've added over the previous version is
the now when I highlight individual rows
on the list report the points on the map
become highlighted as well you can see
as I move over one that's our last guns
you know that's highlighted and go down
here to Phoenix Arizona I have that
highlighted
and Fayetteville now another cool
feature that I added in this and then
it's advance copy is now because I have
these icons here I can click on them and
it will take me directly to that point
so whereas before in the previous
example I needed to filter all the way
down to get to the individual retail
location now simply by clicking this
icon the map automatically zooms in to
that particular location and in addition
I have added a pop-up tooltip to the to
the point now right now it doesn't have
any real information except for the
latitude and longitude but that now
gives us a nice place to add any kind of
additional information if this is a data
report our an analytic report we can for
information is such as sales or we can
even embed a chart into that tooltip and
we can see that we can take that and we
can as we click around the entire map
will move and zoom into the new location
there we went from Arizona to Alaska and
then we can go back down here to
California down into Berkeley and the
zoom moves right in and we and we are
still in an in a an interactive report
so we can take this report and filter
down to an individual state so I'm going
to include California there and it takes
us right down to California then once
again in California we can zoom in to
individual locations and hop back and
forth now we do have a reset here and
this reset is going to take us up to our
filtered level so if we click on the
reset it's going to zoom out to
California because California was the
last zoom that we had on the map itself
so if we will go down to Los Angeles and
we were to filter on the Los Angeles we
see all of our points for our retail
locations in it in Los Angeles and then
once again I can go down to our century
Boulevard retail location zoom right
into that and then bounce around to the
different Los Angeles locations and then
finally hit the reset take us back up to
our last resume for our last filtered
level and then finally we can take this
off remove all of our filters takes us
back to our full map then once again if
I were to zoom in to a specific location
like this this case Phoenix I can click
on the reset which will zoom all the way
out and take us back to the full map of
the United States and show us all of our
retail locations and that is basically
all the demo I have for you today
so in conclusion here I just want to
point out a couple of things here even
though what I showed you is very cool
we really barely scratch the surface of
what we can do with the map Box API and
of course with custom controls and also
because we are using custom controls and
creating these functionality ourselves
we are not tied to the matte box API if
you're interested in mapping API s we
can use other ones like Google
OpenStreetMaps leaflet and even being
and then finally as I mentioned before
none of this is a secret it is created
using information examples and code
that's publicly available and you can
use those and look at them to get you
started and the screen here are a couple
of links one again of course was to that
analytics community and IBM and the
other one is to the map box.com examples
now that being said I do have to say
that you do need to have some JavaScript
experience in order to create this so if
this is something that you're interested
in and you don't have the capability of
creating yourself or if you happen to
get stuck and you need some help feel
free to give me a call and I'm more than
happy to have a conversation with you
and how I
can help push this forward to you and
then finally if you did like this video
and be sure to subscribe to this channel
this is the first video I am doing and
cutting with analytics but there will
certainly be many more to come and if
you're interested I'd like to keep you
posted on it that's it and thank you
very much