Servoy NG Client Component – Google Maps 2.0 Servoy Tech Webinar No. 56

Broadcast is now starting all attendees are in listen only mode Welcome to the Servoy tech webinar my name is Jan Ayemann. I’m the founder of for Servoy and I’m joined by Sean Devlin who has been presenting this webinar for quite some time. I welcome shop Good morning, Jan and everybody let’s get ready with your favorite drink of the day in my case espresso and Get ready for webinar number 56 quite a few have been done already It was a popular request On the forum that said can we also number them because we often refer to them So we’ve started as of the previous on numbering them And hopefully you find some time to catch up on the previous ones as well to to go back and give them all a number so you can easily find On the webinar when we when we refer to them if you have any questions during this session feel free to post them in the questions channel We’re here to answer any of your questions if you Have questions after this webinar the forum is the the right place to go and Again before we start serve or world 2019 quite a few people have already subscribed if you want to go then Now is the time I think the bird is ending in a week or so. Is it right Jan? The yeah, it’s valid until the end of the month Okay, so make sure to Get it before the end of the month Also the hotel we understood this started to fill up so if you want to be in the main conference hotel And don’t forget to to book this next week Or otherwise obviously there are hundreds of hotels in Amsterdam or Airbnb’s that’s what you prefer and you can do that as Well, all right, we’ve had out of our way. Let’s get started. Jump. Okay. That’s multi type over not Doing the ng crits here. We did that last week So this is number 56 We did over the past few weeks Some updates regarding the the q1 or the 2019.3 launch We’re kind of past all that now, but there’s still because that consumes so much bandwidth There’s a lot of things that sit around either finished but not announced or 90% finished but not not released so with the q1 build out of the way gave us a bit of breathing space to go through and Clean up and prepare some things To be released. So today I’m happy to announce That we released just this morning the G maps update so this is the G maps package which allows you to do geocoding and Mapping in a Servoyapplication very easily and we announced version 2.0 today And I’m going to show you what’s new in that because It’s been a while since that that extension has been released So as is the tradition will start with demos and then If we have time We’ll do some overview and slides and take some questions today’s demo should be Should be pretty brief just a few things that we want to show you that we’ve added And talk a bit about what could be coming in the future So the first demo I’m going to show how to do a data bound Map that’s without any code and for showing a single marker In a map. This is something you could already do But just in case you are exploring Servoyfor the first time or the ng-client for the first time It’s nice to know that this features there after that will show how to do multi marker maps so you can put many records on a map and There’s also some options for clustering and geocoding in that as well And finally we’ll have an example that shows some route mapping So let’s get into it We’re looking at an application that has a single map on it But actually what I’m going to do is I’m going to go into the IDE and Just relaunch this because I want to show one thing in how to get started You’ll notice that when this first loads It’s asking me for a Google Maps key so I programmed it in a little dialogue to ask for that because In order to use any of the parts of the the g-maps web package One needs to obtain an API key from Google It’s free. You just have to go into your account or create an account and ask for an API key And then it starts to track your usage of the API So I have already in my clipboard my API key. It looks something with a big long string of letters And now I’m into the application So I’ve stored that in a in a session variable and I will use that in The different examples So the first example as I said is the single data bound Single marker data bound There’s no code here But you’ll notice that there’s a nice looking map on the screen There are some options available in the map So you can see that there’s the satellite option where the terrain option We can zoom in and out There’s the option for the little street view guy If you want to get in and and look around How do I get out of this now? And of course you can You can click and drag and do everything you can do in an normal map We also have a full screen mode and all of these controls you can turn on and off with configuration and I’ll show that One thing that I think is worth pointing out is that This is data bound so as I scroll through records You can see that the map is updated to reflect the selected address There’s no code required for that that’s happening automatically also if I were to If I were to come in and change say the address and move this to Say Paris Then you can see the the marker has moved so I’ll put it back and once again it moves again There’s no code required for that because this map is part of servoise data binding layer All of those things happen automatically and that’s something that you get Throughout an application is data binding and pushes to the browser So that’s the real simple example This was available in the one.0 release of the GMAP’s web package But I think it’s worth pointing that out in case this is brand new Now we get into the stuff that’s available that was released today So the next example I want to show is multiple markers So you can see that when I click on the map here I have a list of records and I’m going to do a small search here Using the scysearch library which was demoed in a webinar long ago But I’ll just put in something like France And you can see now that The map renders with all of the markers for France and you’ll also notice that these are clustered So because there are many orders here Ship to France and many of them actually go to the same location or even near by locations This is a feature of of the map that whenever you have markers where the density is high rather than showing a bunch of Overlaid pins it will cluster them and then show you the number in that cluster So then if you actually mouse over and say click on One of these it will zoom in and show you further The clustering some cases it’ll go right to the pins in this case There’s actually clustering at two places and I’m pretty sure these are the same address So if I click on one of these it’s going to zoom way in and give me the the four points there so So that’s a pretty cool feature and If I change my search say put in USA Again Quickly we get all of the markers Orders that are shipped to the USA rendered on the map and clustered you’ll also notice that automatically the The extent of the map is zoomed to contain The points so it’s not like you have to also programmatically move the map It does that automatically for us you push markers into the map The final example that I want to show is the The route mapping so I’m going to go here to the third example We have A few here that didn’t have a location so we have to go somewhere that has a real address I believe if we go probably back one record get something Let’s Go to I’m just going to find a This is these are all of the all of the orders in the database I was going to go to the first record because I thought that we had Real something with a real address Let’s try this help There we go So in this case I have two points on the map. I have the Ship address of the order and I have hard coded in in this case Servoy headquarters in Amsterdam and it’s going to render the The route for me if I were to go to another record Now you can see that again This is data bounds so the address here updates with the record but over here We’ve passed in the marker for Geneva and it shows the route from Amsterdam to Geneva I can switch back and it goes back to Amsterdam to burn So this is a the third feature that was released in the 2.0 version of the GMAP’s package The ability to do route mapping So those are the demos pretty quick Why don’t we go into the developer and take a look at how it is built? I have a bunch of things open Because as usual, I’m working up until the very last minute to prepare these So let’s take a look at the the first form which is the order detail form This was the single marker data bound example that requires no code For those of you who are fairly new to Servoy or the NG client To to get the maps web package you right click the web package Icon here and you download install with the web package manager and when it comes up you select the the GMAP’s package And it will install it after which you’ll get On your palette here the web package and the component you drag the component on the form And when you highlight the component You get the properties and the first thing I want to point out here is that you have to bind Do anything if you don’t have that again I showed that little dialog captured it and stored it to a session variable and I’m now binding it to that session variable So I only have to do that once there’s no code involved after I sort of captured that Of course, you could hard code it to for an application that only needs it Once There’s many ways to do it But here it’s it’s data bound to that Then there’s some sort of static configurations You’ll notice that I turned on all of the controls So the zoom control the full screen control Being able to switch from terrain to map to satellite etc Those are all options you could turn those off and hide them if you want You can also set a default zoom level But the most important thing is the markers binding So you can bind the map to one or more sources where it will get markers In my case, I only wanted to use one So I added one marker here and I set the data provider to be the display address That means that it’s actually data bound to the this is the calculation on the current record In this forms found set I could also fill these out instead and just have a hard code of value But that isn’t so useful for this example display address is is not really a Physical column in the database. It’s derived from multiple columns So it’s a simple calculation which just smushes together all of the data providers that make up an address So again, that’s the data binding setup everything after that happens without any programming So that’s really all the steps you need to take just a few seconds a few clicks to be up and running with a single marker Data bound map in fact this could be multi-marker. You could set up multiple Marker providers here if you had a use case for that So for example, if you had a from address and a two address Or you had a shipping and billing and you wanted to see both of them for some reason on a map Those can both be added both be data bound no code required So that’s the simple example Let’s jump into the next example which showed those maps on With the search in the list and the clustering for doing multi-markers So I have another form here called orders list. I’m going to open that in the form editor And you can see that I have the map here on the on the form And the setup is the same except for I don’t really add those markers In this case, I’m doing it programmatically so I want to go ahead and open this form in the script editor And show you what happens so on search. I’m doing the search. This uses the sfy search library Which does some? Gives me some power to do some text-based searching We cover that in another web webinar But after that, I’m calling I don’t know why this calls twice. Maybe that’s why I was getting That dialogue two times I’m calling load markers lat long So we’ll go down and look at this method here This is where we talk to the map programmatically so Elements.map.useGoogle map cluster equals true So this is just a property you can see that I would get code complete on anything I could do for for the map component And it’s just simply setting it to true The next thing that I do is I make an empty array and This is a bit of data trickery here in Servoy I wouldn’t worry too much if you don’t get this part But I take the current found set and I dump it out to a data set which is Sort of just an in memory Kind of array that I can traverse very quickly I iterate over it and I’m grabbing the latitude and the longitude Columns out of out of the database table and I’m making a marker programmatically and I’m I’m putting that into this array and then at the very end I Pass it into the map and that’s it So somehow it could be the way that I’ve demonstrated here or a different way You want to create these marker objects. They’re very simple They either have an address string or latitude and longitude And you can push those into the map and you can mix and match too If you have some which are these these you would call geocoded right because they actually have coordinates So the example that I showed you was doing latitude and longitude so these Records have already been geocoded now most people if they have a database of orders or something with address data They don’t already have the luxury to have the The addresses that are geocoded So I have another sort of flavor of this method Called load markers geocode and this this is how you could do this Without passing in the latitude and longitude Instead it does the same thing it queries the database and it makes this marker with an address string The only difference is is that the map will automatically geocoded for you So the result would be the same The downside is is that Google applies rate limiting on the free versions of the API So you have to sort of geocode a few and then wait and then geocode a few and then wait And we build in support to the component to do that so that it doesn’t bomb out Because you passed in 100 markers and the rate limiting for The API is the free API is kind of stingy. It’s it will start to slow you down After just a few markers. I think it’s like 10 a second or something so It’s better to geocode those in advance is what I’m showing here So if you don’t get any of the code you’re seeing here Just know that you can pass in an address. It will be geocoded automatically or you can pass in lat long and it’s already geocoded I think it’s worth showing you how the I got these lat long because they weren’t already this is just the example database the Northwind database that Ships with Servoy for you to play with I want to show you how I got the lat long because that’s sort of part of this whole ecosystem of mapping I created a method called geocode orders and Basically, I iterated over the found set and I geocoded each individual address and then I saved it to two new columns that I made Looking at this. I actually use our HTTP plugin and I just send web service requests to Google and I do a little bit of sleeping when I hit the query limit When we post the sample solution for this we’ll put the geocode address example here so you can see and possibly We could enhance this offering with a Helper module that does the server side stuff if you need it because what I found is that I had a pretty slow rendering on the map Just to show a dozen markers or Or more There was a lag and I didn’t want to have that in my demo. So I thought well, let me geocode everything before I Before I Try to render it and then it just renders really snappy and I could do all the You saw that when I did the whole database it didn’t take that long and all everything was clustered and you could see the whole World view So I recommend this approach unless you just want to pay for the To have the quotas lifted you can also do that if you’re going to do it heavy usage um So the final example that I showed was Was route mapping where we could We could I mean records and show Show the directions for that I go to the final example order details routing I’ll open this in the form editor Really, it’s this is a copy of the first order detail form The only difference is Well, I really should just open in script editor the only difference is is that On record selection I’m not using a date about an example here by the way I’m going to do this on record selection and handle it myself because I have to do a bit more through the API But the form has an event every time you change the record this gets called I jump to this load route Method I put in my starting address which I put for Servoyahead quarters Then I make two markers one is the start address the other one is The destination address which is that calculation that I that I made to smoosh the address fields together And again, this will come off the current record so I just have to put that in So I make those markers. I set this one flag here to enable map directions to equal true And then I just push the markers in to the map and then and then I’m done You don’t need to have exactly two markers if you had three markers. It would show the route Out connecting three points, etc You can use two or more markers for that put in this case every time the record selection changes I I pass these in So that’s kind of the the deep dive into the code The Three demos What I can do is quickly go through A small overview Just in case you have a hard time digesting everything so quickly So you get the key points and then we’ll take some questions So the first example is the data bound maps again If you want to go slow and simple You just put the component on the form you hook it up to the fields that provide the address data Everything else happens without any code With you edit the address the map changes if you Go to a different record the map changes. It’s pretty simple, but it only shows one well it can show more than one marker, but That’s another story The next example was the multi marker map and in this case it was not just the design time it was also the The runtime setup so I used the simple API to pass in those marker objects remember that you can do Lat-long or you can do an address if you do an address then you could take advantage of the built-in geo coding And then either way the map will auto zoom to the extent of the marker set that you passed in You have the option to turn clustering on and my example I had it turned on in that case when the map markers become very dense It will sort of cluster them into a single marker and show you the number that are in that cluster clicking on them zooms into the cluster and Spread them out so you can see them again If you do the built-in geo coding that is if you pass in the address Then you have to watch out for the API limits. They’re pretty stingy with that And I came into some performance problems pretty quickly So we’ll get to a minute about what to do about that The third example was the route mapping simple API Automatically render two or more markers. You just have to pass them in and turn that flag on It’s really one step before you put the markers in Again about the sort of the constraints here you have to have that API key It is free but rate limits apply unless you pay and one work around to those rate limits is if you don’t really need this stuff G geocoded real time Then you can just geocode it when the records created or geocoded in a batch like on the server Actually 10 minutes before the webinar I was trying to fix this and and I wrote that little routine to just geocode all the orders in my database and save it In advance and I sort of front-loaded all the performance problem into that method So that when I showed it to you it renders quickly because I already have latitude and longitude Okay, that’s pretty much everything. I think we’re done in time to take a few questions. Yawn. What do we have? Yeah, there’s a couple of questions coming in my demo by the way The First question is but I think you cover this sort of with the rate limits From one about is this free to use and I think that you answered it already Yeah, so it is free unless You’re sending a lot of data to it then you’ll need to limit it or You can actually display for it. I mean I looked at the Rate that Google charges and if you’re using this in a commercial solution then it’s it’s not very expensive to just get your rates Underlies as well. There’s other questions, Sean Coming in the will this also work with Servoy8.3 Yeah, this should be compatible with Servoy8.3 the example I showed uses the 2019 Q1 build But the component itself Doesn’t have any dependencies on the latest version of servo. However, the example project that I did does some things from Servoy8.4 and up like CSS positioning so The example is compatible to the latest Servoybut the component itself Should go back a few versions And you said this component is available already Yes, I wanted to make sure I didn’t forget to show that here is the Get hub home page if you go to If you go to releases You can see that we built a release this morning And here’s where you can if you wanted to you can download the source code and run from source Or download the package but again this plugs into Servoyis you can download it through the IDE But on the project site is also where you’ll find wiki documentation. We have a bit of work to update the documentation with the With the latest release So we’ll get that up there really soon But the release will have the sample that I just showed and And the binaries So those of you who are into git can run it from source as well But it should not just just in the package manager, right? Yes, yeah, so right in the IDE you can you can add it You don’t have to go to the github page You don’t have to know anything about git or anything like that You just kind of click it and and bring it into your project and it just works Cool and is the example you showed going to be available as well Yes, so I will attach the example to the release After the webinar because I was tweaking it up until the last minute I always I never have the sample ready for you in advance of the webinar But after the webinar I’ll attach it to the release page of github and I’ll copy that link into the forum So you can get it and I think I’m behind on one sample to from the The nggrid webinar the last time as well So we’ll get to that real soon Okay, cool. Well, there are enough for the questions. So we’re done in time today Fantastic So for those who haven’t subscribed yet to server world now is the time to to do so and what’s in two weeks? Yeah In two weeks, we’re going to do more Component updates like this more extension updates. We have more things that we have to clean up and release and announce so I’m not going to tell you exactly what it is. You have to stay tuned, but it will be along these lines new stuff

Close