About me, I'm Martin Klepper, most of you and now me,
because I'm one of the organizers of the H.I. Jazz.
I've more on company court Ubi-Labs.
We are located at new dosis, near the Sternchanzer.
And we are focusing on map-based applications and do like browser,
applications and do like browser, applications, mainly,
based on the Google Maps.
Yeah, was script API. We have some big clients,
just to listen to pue. And that's because we are
the German partners or the partner for the German speaking countries in Europe,
not in Europe,
but the German speaking countries for the Google Maps enterprise,
And, ja, via listed,
a working we did close with the Google Team to see what's going on,
what's the new and latest editions and we build amazing stuff,
they one to show, for example,
but a mazing up the last point from this side that was released about to week the go,
this one of the Telekom-Projects we did,
they shoose it as the key visual for their like amazing apps thing.
Yeah, you know, we from the Yamascript,
my last iss likes,
where not about what I'm do we at work,
it's was more like about this crazy stuff,
what you can do in 100 with in 40 bytes of Yamascript and this time,
I'm going to show you, what we are really doing.
So, doing the day. Okay. About to google maps,
API, and has a lot of features. It's one of the most used,
yavascript APIs in the web. I think,
more than, well, all must fire,
half of the APIs used in the web or a google maps based.
I think the second is flicker, and then there's some bing stuff,
but this is willy being used a lot.
And it has a lot of features,
this is just one of the delist of our features,
but most of of the time people only does,
use as small porsion.
So when you we do want to build a map,
I think, this for things, what you need basically?
You have to create a map,
this thing like to done to they mention out think,
you have to use a market, it's displayed on the map, info
window that the peers are suon as you click the map,
which could provide use I'm more information about,
what's going on there.
And all like the coordinates are a based on the let long instance.
Oh, class. That I used to say,
where this
is happening
But for this talk, I'm going to focuse on the last editions.
This is divisualization library, the heat map layer and the
vited location, this is not that new.
I think it's in there since about a year,
but there weren't that much application you see around.
Okay, but I'm gonna show your some more new features,
just to give your impression, what's possible now with the Google Maps, API?
So we all know, this is the default style of Google Maps, Maps,
what you can do is to high several features of the Google Maps, layers.
So only showing watter from example, you can specified you colors,
you can say, how are think to boundaries are,
you can make a dark for example, sign,
new colors and this is Feature, that everyone should use, if you're
gonna start in my application, because it has ability to treat
the start, so that it fits to your side.
And kind of like, if you have a CI,
and you're going to use several colors,
and you're not allow to use others.
Denn this is a nice way to make a google map,
looks like your map. And it also quite cool,
cause you can high several information it that are not needed.
So for example, here, you see, the Autobahn-Labels,
sometimes you don't need to show it them.
So you can you would use to the styles and
focus on the important stuff that it's net,
this is harry for your application
This is one protect we did for the Telekom and just mention it.
Here we do out everything all all roads and only show
or the boundaries of the states and the or not the states
or the back to countries and made the call us looks really like DCI of the Telekom website and general.
Another feature is this, oh, this is how it
google maps looked, like half a year go.
You don't get a quite good impression of what's going on here,
but they addit the national house a call I'm not partsure,
but there it out this dischates.
So you can physical layer, yeah. And it
gives a really good impression about how tour it its where
a mountain located and how do what a look like?
And other way, one other feature, this is quite common,
is the direction aPI. You can say, okay,
drive me form point 8 to be. And now you can also say,
okay, used that public transultation and it gives you a root,
that shows you disstops in bit ween in this cases,
the ICE, or ICE and RB, Brains for some cities,
I think Berlin and Munich, they have the public transportation in the city.
Unfortunately is not available in Hamburg, wright now.
But I think it's getting more more over time.
What you can also do is like request,
if you make several points, you can request,
the high information or the attitude information.
So you can reask it week as, this for you,
I think, it's, who was in court,
I last springs, our years rock in Australia and you see, how told it is.
So you you get back Jason string and it has some
information about the heights
Dieses a nice addition course, if you ever work with
time zone, it's really a pain.
And it changes so often course,
every country has it own day saying times and there are
time zones that are only shifted a quarter of in hour.
And but the new API, the time sounds,
API you can cent a coordinate and that unique times,
unique times cent and it gives to back the local time
and the times on information for that point.
And other edition
was the better layer
You can show the current clouds. So this is really not,
when I took the screenshot was at the time,
how the clouds look like, you can overlay Icons and the crease.
And you can choose, I think, if you want
to display it, as a selsius or as feinheit information.
And this, for the clouds, it's working for a
some zoom levels and for the temperatured works really clouds,
we can zoom into Hamburg and see, like for a different station.
This is also quite new with, it's the jigo locate
You might know the Gio Code API,
there you can pass are a latitude or and address and
you back the coordinates for this points.
And but this API you can cent the signal information at
a round aspecific place. So you know, this wi-fi
, hotspot. And specific cell idea, what's around and
you can pass this drength of the signal.
And you can back or you get back,
latitude and long itude information. So this is quite,
useful, if you want to code your
own geolocate device
Okay, now to some basics, before I switch to
the visualization stuff. I can simples. So you might
now that you can replace the default, Google Maps,
I can whatever you like. So this is an example,
we did for a pliza.de, a speed rap,
danter base and we have like one one to it
in 50 or different kinds of Icons.
And you just pass and a part to an to an
image and it use this information to display it on a math.
So you can replace
did default maybe ugly ugly radmarker
But now you can also use something quite simples,
this is this is a basic simple, so with a has like,
I think, square, circle, error something.
And you can, we place up it this circle.
But you can also pass and SVG. So Vector,
Information and use, instand of using PNG,
it uses SVG, and it has a forback for different browser
to reynold in SVG or house it court in Internet Explorer,
VWML, VML, ja.
And you can part several, style information like
the full call and circaller and also the scale
And what you can do is work sampled switching this
kind of map, they you have the airports.
And don't have a clue about did the really like their
mount of lights coming and on out.
We place up with something like this,
where you have a scale, as guilt circle,
but or that represence, the amount of like incoming outgoing flights.
So this is quite teasure. And I was way to overlay vector,
information would have been to use to key or mount up
link which.
This is used in Google Earth
Something where you can defined shapes, you can also like
defined they high and make 3D models out of it.
You can at Images or whatever. But it's in my pinny
and quite ugly ugly ugly language, curse it's based on XML.
And it has a lot of information that you don't need.
So this is the information, you really need to display something.
So I'm one can out with the Format we we love.
It's Jason. It's could geod Jason and it has the
syntax. We are used to ups. And now
the internet.
A Shaunt Break. Ich weiß nicht. Ohoho. So.
It is not working. Oder wenn es Gericht geht,
kann ich mich da auch da direkt dranhängen oder so.
Ah, not we're back. Back to Jason. So,
you have different feature types and the and the main thing
we have to talk about this to geometry part and you
can fill this with difference information like.
This is a poly gone and has to coordinates and you
can put in
The most off,
but it's still, the bit heavy from the size,
so if you really have to work with the large file,
it has too much information, that it's like band wide, friendly.
And this goes now to topo Jason and this is a special
Format where you're really can like put a lot of coordinates and there.
You can put many points and the difference is that it
uses uses like shared arcs, it's quite.
So instead of the finding a pudding on all the time it just says,
okay, we have this amount of light segments and this
shape take this one and this one and it only has like references.
And if one mind looks something like this,
you see it's quite short, cause it doesn't dort the location itself,
but only different this between the locations.
And you have meter information, like Germany,
the ESOC code and the continent.
And it has these arks. So this arks,
I just a reference to the list of coordinations and there.
And it has a nice commode line interference.
I think it's based on no just.
So you can in store it as in a NPM,
package and but you think some more tools,
like Python, tools are needed to run this.
And you can convert shape fights,
which are quite coman in the geographic everyone
Okay, now something to show off.
This is two we're currently working on. I hope.
Eu, yeah, it's working. Now, it's not fraging.
It's the wrong monitor. How do I do this,
no, a galaxy? Okay. And now,
I, okay. Okay, this is like as more
right solution, ducually, you have some more space.
It's a two based on chrome. Maybe if you You're going to
slight your most over there you see it's not webcat on
that you're, who has the heard about not webcat?
I give it short into to this. This is a really cool thing,
cause it raps, the randowing engine, so webcat,
but with out you and like navigation bar, whatever needed,
and only give you the end to pure randora and includes all the no-jS dependencies.
So you have eppy end executeable that grounds on line ups
on my macOS and on windows.
And you can't run this and have like an native application,
but only using other script.
And we use this to createst, it's like this
Not backball in the house is styles court,
this bootstrap, default bootstrap, Application style.
And you can import, excel cheat, excel cheats,
CSV-Files and this is a project file.
And you can like overlay at dots and this case and
you can define a gradiant.
It's say, I want to make this more purple.
And you can say, okay,
decise as based on something else
You can also assigned buckets for specific like ranges,
or you can define and explicit value, which doesn't make sense here.
You can say, okay, I don't want to circle,
but I want something else, I'm not sure,
I'm get something, but I want a cup for example.
And rule notes. No, which's broken, okay.
So, okay, you get the idea.
And on the internsity level, we have shapes,
so you can zoom in quite far,
and you can define the callors of this shapes
When you switch to the intensity attapp and make this dependent
on some other values. Yeah, that's for now.
Okay. How do you you switch do key not so?
Okay. But this was just a example of the new features,
like to the Director of things and the Simbles.
And now we come to the question and how to display,
like a lot of features in the prowser.
One option to do this would be, okay,
instead of placing a single marker for every location.
I could use are use are something called clusterer.
So it collects all points in an area and combined this into a single marker that has in Informationen,
in diskutieren, ist es 3 different colors,
it has displue for only small torsion,
this creen one from summore and the red one,
we has the most pointer.
Sorry. Okay, I can't use the most, do you see?
Okay. But you get it and there are some numbers in there to,
give you an idea have, how many pointer in this area?
This is what you used like to do, sometime a go. And then something come out court fusion tables,
it was a tool from Google and you can upload,
a big table of like million points and it converts this into tiles,
so it randers images and you can say, okay,
I want red dots, or you can say,
I want to show this as a heat map,
so it gives you,
like it kind of feeling of the dancity.
But unfortunately this fusion table, it's now, that I'm faturing it,
it's now going to be replaced with a new tools,
court, Google Maps Engine.
And this, let's you upload, like millions of points shapes,
so vactor information and even image files and you can come
vine them to several liers.
And yeah, surf them to full application or a full
map to the browser
So, das ist ein Example, so eine Background,
you have your own, immatery, you have vactopfize,
you can style them, using a webbizard,
and that's quite cool and sudy fast to render.
Cause it surfs this all as an image, rerandered,
and the browser don't have to care about the rendering performance.
But now we going to there, I think,
the most cooler stuff, divisualization library.
So, when you include a google maps aPI,
you tilly do it like this. So,
you have an API and point,
but you have to past to sensor, Parameter,
which should always befores in only if your vehicles moving or peer moving location should be true.
And then you have Google Maps. whatever on the your
name space. But what you can do is,
also at editional libraries,
Google decided to only like shippers smart porsion to make it,
we slow in the vide.
And you can ads geomitty different stuff and visualization visualization is one of the libraries.
And then you have like for extra classes to use.
The Maps Angelayer, let's heo you like reference in
idea and that you get from their maps engine project
And it's howst you as an as an a editional layer on the map.
And what's really nice is the heat my player and the vited location?
So this is what I'm doing to talk about, now?
Who? It's going on? Das ist die Beamers not
all my effects hier. Okay, this is something you
can do. I think it's an example of cap
driving around and cap striming around in San Francisco.
You can just parts a lot of points and it
gives you this heat map styles.
You can modified this decise and the ecologym of this.
And you simply, you have to a create and arry
of lat long
Coordinations, they are slightly different. You see this only
the last numbers our changing here. And then you paste
to the heat map layer and it shows you a heat map.
And there you can past like thousands all, like fans,
maybe 100.000 of point. Okay, this is quite cole,
but if you go in four animators, I think, the google maps
APIs bit lated. But what you can do it this is an project?
You see, it's from the Google Maps Utility library,
repository this is a public library or public repository,
value can contribute and do your own extension.
And This is quite simple, cause you create this,
and then you have several händlers.
And you have access to the context,
that you can use to draw and you stuff your use to,
with them with the canvers, API.
So you have just in plan thing and these update händlers,
the just sent you a notificationment,
about the user pants or moves the or zooms the map
and you can like weetra all the information on top of this.
Ups. So this is something we did.
You don't see the map in a background,
but you had like really you starters had,
I think, so like 10 Gigabytes of Data.
And the client just wanted to visualite, how this looks
on the doing the day. So the different colors,
so yellow like Streets when that cast are driving fast
and the plue ones, aber they not that fast.
And be used this can was thing to plot this information in the browser.
And other thing we did was the Video for Capoling or Mitfahrgelegenheit,
gemeint, I'm this name and it shows you the rights doing one week.
And the actually like, oh,
we had the Destination and Origin and computed all the apparth in
between had a time stand and this is how do we be looks like in a week in Germany?
And yeah, I think, if you,
if it's going now to a friday, you see,
like 20, 1000 or like 14, 1000 rights at one point of time.
And I think, oh. Sorry. Der war so
ein anderer Video. I'm not sure, why I we not
this? Okay. But you get an idea of this
Canras was squiet cool, but and it's really nice to
rock that, cause it's state less somehow.
You can put in more information we used web Socket, Functionati,
so it just push is somemore data, entweder browser,
and forgets about it just draws it on canverse.
And then it's going, so you really have don't have
to care about the year to rummitself.
But it has also some limits, if you have
the same information like moving and being fast.
So we had a look at the web GL,
think, you might know about this, and created ufel,
Aber das ist, this is not a beamer.
It's a true. No. It hast du not like
this, sorry. Okay. Looks like and around,
but it's just a sample, that you can,
so this are boxers and the it's are really like several
objects that you can move around in real time.
So it moving with like 60 frames per second.
And this was a quick demo von Google,
that it's possible. I didn't have the code and there.
But we will something on top off it.
It's under our our git hub repository.
And it's quite we jazz layer. So you can used
three JS to put in different information, whatever you like.
So you can put in, like real models of cast,
that moving around or like using a
particket system, as we use, see here.
And then you can put this on top of the Google Maps.
And you got and this possibilities. So I'm gonna show
you the heatmap tool. So this is the screenshot and case
it's not working. Just to give you an impression.
And let's see, no, this is a ortsdom.
Okay. Ja, Foodscreen, Foldscreen
So, wie gesagt, das ist für eine Client,
und wir werden nicht alle touren Shows oder Hists,
Data, cause it use it to really got some insights,
but we are loud to use the our show the tool and what you can do,
I think in this, it's like, okay,
it's not that much, but you can put in,
about it like on million of points,
and make this visualization,
so you can zoom into any location and see what's going on.
So this is a data set from Tweets in Easternburg,
over a week
I think. And which and you can modified some effects here to increase decise
or tweek to apposity. There's a blumenfilter for you.
You can talk out different layers. But the que thing
is that you can modified to dot on that's behind.
So this is did chose your graph over time and you can see
lect the porsion of the time and see where people are tweeting.
And if you have have a been to easemble, you see the difference,
Okay, in this area, there all the sites.
So this is very a two his goal,
over the day, and you're on the day.
And if you move this to the end of the night,
it all goes up here, so this is die Party street,
wheref you want to going all side.
And the thing we use, here as the crossfilter,
you also see as soon as you move to slides,
this week, caraph is updating, you so you see,
okay, doing the night,
it's especially on sunday and and sunday,
where people are to really treating a lot.
And ups, yeah,
I don't want to this
We have this feature of this. It's like a mirror
, one of the mirror. It's a lance,
lance thing. So you can specified is in Area.
And you can move this around to see,
how the data looks at this aspect location.
So this is now the party location, so no body streeting there in a morning,
but if you move this down, you see, okay,
and this is when all it true is are doing that day.
And this is now, ja, dann in diamascript,
in real time, using web JL,
what is squad cool
No. Yeah. Okay, bevor wir hören,
ist just one to mention some other project that be used here,
is the D3 crossfilter library, which is super fast,
it uses typed en ways, and some really cool,
fast and enways salting always,
to get you to salt and fitter, specific,
areass of data.
And we also use, on this is another project,
project for the three,
it has different map projections,
I had this light to impress
the kartograph symposium
In there, you can compute some differences and stuff.
Okay, and that's are must everything. I just want
to show you this project, it's a bit off topic,
but chance I'm common slaugh, who are sweat about this, challenge?
You, okay. The guys going my company. Der Frauenhofer-Institut,
or this, there's an conference, I think in next
months in texas and it's quite the eBS distributed event way systems,
conference, what is what I are?
And they always do a kind of competition,
where they provide you with a huge starter set and you
have to fright at thesers or the teasers, mut a paper.
I signed typic paper and you have to sort of something.
So this year was focused on real time, soccer data.
So they captured assocer game and had sensors for every player in
every fruit and in the hands for they ball keeper.
And this nutter restream but I think one millimeter, das heißt Genauigkeit.
Accuracy, one millimeter accuracy and the ball for example updates
with 200 Events per seconds and the sensor in the foods with to Huntwerks proseconds.
And this is just a round data.
So you have a time stand and we do exact position,
the time same was in peaco seconds.
And then you have to do some computations.
So you have to analyze the movement,
you have to get the port position,
you have to create a heat map over different timewindows.
You have to check of their goal was hitten and stuff like that.
And I decided to do this in Ops in note
and Wir haben G11. No. Okay. Jetzt broken again
. Macke Kontakt. Quelle erkannt? Suchen ein Signal,
okay. Schluck, schluck Bier, okay.
Okay. In dieses Wort came out. Trying to do
a live dämo now. Kannst du das einfach hinlegen?
Ich stehe jetzt auf den Boden
So, this is running an notes and serves a browser.
Jockerhaus, nein. 1000. Here have the field of
the game. And you see, I think,
I have to what sure what I have to kick.
So you see, people moving around. This,
ich weiß glaub, this you see the Yellow Thing is what,
I think,
the last two seconds of the ball itself,
and the greenline is the estimated position
of the time in
the next
One in a half seconds and this is for example a
case, where a shot on goal was detected.
You see this and this is now like running and you
can you can speed up the playback and it's running with like.
Wer ist das? It's not in there. What like
factor on two out to we. And you have steads
40 players. So you see in how fast people a specific person is running,
you see a highlight for the player with got the ball position and some
steads over time, when is like not moving that
fast or really like sprinting
Ja. Und ich denke,
dass Original Data Satas like a 4 Gigabyte File and you
can do this a note and in the prowser in like
half of the time of the original game.
And that's it.
So. Any questions
Oh Mann, ich weiß es schon.
Okay. Maybe just, just things behind the...
Was sagt man unter der Haube? What's going on? So,
if you really have to work with the Lord of Data,
then typed Arrays are are a quite cool,
that you are knows about this,
but you don't have types in the Amberscript,
but you have typed Arrays.
There can say, okay, this is an unsigned intedure,
16 bytes Array and you can, you have to specify
the lanks of this. And then you have really memory
slots by you put in data and it's super fast to
access them
So, das ist, like the core magic behind this.
Denn webgy all is super fast in the prowser,
you can like animate millions of points and especially if you
using the particle system, it's fast.
And, ja, note is fast and quite useful,
event based things. Ja. Now, simul questions,
no. Okay. So, let's have a short break
and then cregor is going to talk about note ends.
Should be do it nower before? Ja, okay.
So, you