2020.03 Launch Part 3 – Google Maps for Servoy
2020.03 Launch Part 3 – Google Maps for Servoy
Today is the final or the third installment for the 2020 0.3 Q1 release. We did a couple webinars this week already. If you missed those, the recordings are already available. We’ll make the recording of this one available later today. This one is all about the Google Maps component for Servoy, which we updated recently and added several new features. This will be kind of a fun one, mostly for demos, and then we’ll just a little quick overview. What I plan to show is there’s some new options around marker, like the different markers on the map. I’ll show some of those options. There are routing options as well, so I’ll show those. We added routing in the last release, but now you can actually get the route info back. We’ll take a quick look at that. Some more options around how you center and pan and zoom and support for gesture handling on touchscreen devices. Then we added support for KML, and I’ll explain what KML is. The tradition with these webinars is we like to do some demos first. We like to get into the code, get under the hood, go a bit off-script and have some fun, and then do a quick overview. I typically prepare the demo part of this in the morning before the webinar, which always puts a little bit of pressure on today. I had a nice addition added, but then I had to scrap it because I messed it up. What I’ll do is have some fun and code it on the fly for you. We’ll go a bit off-script and hopefully it doesn’t get too dangerous. Let’s get started with some demos. First things first, I’m going to go into my Servoy IDE. I have an example solution here. This is available from the Google Maps package. You can download and install this example through the package manager. If you go to your solution or to Servoy packages and click download and install, you can get the component and the example. What I’m going to do is launch the example. The first thing it’s going to do is ask me for my Google Maps API key. So a few years back, Google started requiring an API key to embed a map on your application or your web page. An API key is free. There are some limitations in terms of usage. You can’t make a million requests in a second or something like that. But it’s quite easy to get a key. If you go to console.cloud.google.com and go to the menu, I think APIs and services and then credentials, take you to a page that looks like this and you can generate API keys and set whatever limitations or restrictions you want for those keys. I have one here. I’m going to copy it to my clipboard and paste it in here. And now you can see that my map is available. If I click through the map, it’s a centering on the location. These are orders from the sample database. And it’s using the address field or the fields for making the map marker. Now something we added in the last release, I don’t know, maybe a year ago or so, was the support for multi markers and clustering. So this is not new. But what’s nice here is we auto zoom to the extent. So if I put in several markers, you can see that the map is automatically zooming to the extent with a little bit of padding around that marker set. So on record selection, I’m just passing the marker addresses into the map. Something else we added was the ability to do a radius. So I’m going to, well, I’m going to set a private, I call it privacy mode, but it’s really just a radius. And zoom in on one of these markers and you can see now that there’s a radius around it. You could remove the marker as well. And then you have kind of like a privacy mode where you don’t want to show the exact location, but you want to show the radius around it. Or you want to show everything within a kilometer of the location or something, then you can do that with the radius. I want to take you under the hood a bit here and look at how we set this up. So I’m going to go into my application. I have a grid here and on record selection of the grid. I’m just taking the selected records in the found set that’s a multi select enabled and I’m passing those in to a method that I wrote on the form where the map is. And in this case, I am dealing directly with the component that I put on the map. So if we open up the order detail. And we take a look, you can see that there’s a component here, which is the Google map component again, when you add this via the package manager, you can just drag and drop this on your form. And then you can start to set the design time properties and also write code for it. In the example here. I have a single method to draw the markers. And what I do is I get the selected records, I pass them into this method and then I hit a rate over them and I build up a marker. Now this is an array of markers and you can see the type is the Google map markers. If I were to type in marker dot I’m going to get code complete because that’s a defined type. So you don’t have to guess these things are used strings, you can you can get code complete, which is nice and it gives you the data type as well. So one thing that I’ll do is I’ll set the info window string. And I’ll show you how I can click on the marker and get an info window, which is also a new feature. So suppose I want to make a data driven and I want to use some markups. I’m going to put a bold tag or a strong tag here and passing just a touch of markup and also a bit of data and I’m going to grab the record. And get the. Orders to customers. Company name. And then maybe I want to put a break tag in there. And. Put in. We have a calculation which gives us the order total. Yeah, maybe I want to format that a bit too. Always a bit of lag when I have to go to meeting. So here what I’ve done is I’m maybe I’ll put a dollar. So now what I’ve done is added a. An info window so that if I click on it it should render this and it’s data driven and it has markup. So let’s give it a shot. Turn off the privacy mode here. So now you can see I have the customer. Name which is joined in from a related table and I have a formatted view of the. The order total which is actually a calculation. It’s not even a physical column in the database. So a lot of dynamic stuff to go on. You can also mix that with markup. And you can set that as the info window. The other thing you can do is you can set. You can set tool tips. So. I can set the tool tip and I could do something else. And that’s all I see. It. Let me select an in certifications. If you shipping make it based on you sales rep. And you. Order two. I’m going to.IXED. The way to review. and I should be able to pick a different guy here. And when I mouse over, you can see it says who the sales rep is and I get the info window if I click it. So those are the main options added for markers there. Oh, I forgot one thing, the icon URL. So here I have the icon URL is hard coded. And this is used to just be that generic Google Maps pin, but now you can use a URL, which allows you to use a gallery of third party icons or you can even make your own if you want to get fancy. If you go to the Google Maps documentation, they give you links to other icon libraries. So suppose these are all restaurants, I can copy the link address here, come in and change this. And of course this could be depending on the type of record you have. And you can change the icon. So coming back to my sample, I should be able to start to show some restaurants on a map. So now that that adds support for bringing in different kinds of icons. So those are the changes made for the icons. Another change that we made is we exposed the API for the zoom level. So if we go to the design of this form. And slide over here, put a little slider on the form here. And this is data bound to a form variable I put on the form. But when the data change of that happens, I’m setting the zoom level. So if you look at the setup of the form here. And we look at the zoom level property that’s now fixed to that data provider. So it’s a data bound thing. Anytime I change the zoom level, it’s going to change that. So here I just made a simple slider. And I can zoom with that. But you could also have that be data driven because it’s fixed to a data provider. So that was added in the last version. The other thing is that we can programmatically center on an address or on a lat long. Now these are just going to be some random ones because it does that by default on the markers here. But I click this and it centers on an address. And if I click this it will center on a lat long. And I just want to show you the methods for that. So center on address here. It’s using one of the markers, but it just calls this method on the map. So you can center on any address or you can center on any lat long, which is just the coordinate pair you pass those in as numbers. So that’s that’s useful if you if you want to programmatically move the map around without it just coming from the markers. Another thing that we added support for was control over jestering. So this this has to do with how the map works with a touch screen. And I can try to demo this as well. First I’ll show you the property. If you look on the let me drag this out of the way here. If you look on the properties here of the component, there’s something here called gesture handling. The default is auto. And what that means is that it’s going to it’s going to interpret touch gestures based on the overflow of the of the map. So if if you if you put one finger on the map and you slide it, it will pan the map. But if it has scroll bars, then it will first scroll. So that’s that’s auto. Now you might want to say no, I always want to pan. And that’s going to be I think it’s called greedy. Don’t ask me why that’s that’s what they named it. And then if you if you want it to be where it’s it’s going to require two fingers, then it’s going to be this one called cooperative. So I’m actually going to save that and come in here and I do have a touch screen monitor. So maybe I can show you that some I’m going to touch it with one finger. And now you can see that it’s saying move use two fingers to move the map. And I’m going to touch it with two fingers. And I can move the map and I can do the pinching and panning with my with my fingers. So you have some control over over what happens there. If I maybe if I blow this way up. Yes, you know, I have to I have scroll bars here. And if I come and change the setting to. To greedy. Where it’s always going to assume that I want to I want to do a finger pan. And then it’s panning the map, but it’s not it’s not changing the scroll bars. If I put it back to auto it’s going to it’s going to detect it should detect that their scroll bars. And I believe. Not quite. I think it has to do with where the overflow is on the on the outside here, not on the map itself. Anyway, you can play with that, but it’s really those two settings greedy or or. Or cooperative that it’s one or two finger also the same applies with the mouse wheel. If you have it set for cooperative the mouse wheel won’t won’t zoom in and out like that. Let’s get into root mapping for a route mapping we added this in the last version of this component, but we added some extended options for it so. By. You can turn on route mapping and then it’ll it’ll automatically draw. I should probably relaunch the client here because I’m making all these changes in developer. Try to see. Oops, that was not the API. That was the URL to my icon. Do this once more. And get go again you need your your API key I copy it to my clipboard paste it here. And there we go. Now if I turn on route mapping. And you can see that when I select or I’ll select three. And you can see now it does the route between between those three that was supported in the last version of this, but what we added were two things. Number one we added some. Additional options so you can say I want to always optimize it. I travel mode is driving, you know, avoid fairies, tolls and highways right. So I could change the travel mode to. Transit. I’m going to save that and I’ll launch the client just to be safe. Paste in my API key so now if I. Put the two of these it will try to find I don’t think it found a transit route. For that, but you can you can experiment with that maybe within France I get one. Nope. So there’s there’s those but then there’s what’s that. You you forgot to toggle the routing. Yeah. Thank you. So I really need to have a moderator on these webinars. Let’s try this again. Zero results. Yeah, I mean, it catches in does a little a little pop up. Yeah, well, there’s not a a transit route between those. Another thing that I’m going to change this back to driving. And show you one more thing. And click on the wrong one. Come on. Direction settings. They put bicycling in there that must just be for Dutch people. Okay. Now let’s see if I have to relaunch the client or not. Yeah, I got to I got to relaunch it. And doesn’t push that down to the browser. A lot of stuff when you’re working in Servoy developer will push it out to the client, but some things are required to quickly relaunch the browser. There we go. Okay, so now one more thing as you can see. I have the screen still plan. You can see the total distance and total duration here. You can actually get the route details and I’ll show you how I put those in the screen here. Because that was something that was requested after we added the routing options. If we go to into the code here. And we look at. The on route changed event. Now this is an event you can hook to the component. And I’ll show you how that was done. If you look at the properties of the component, there’s just one event here on route changed. You hook that up to a method. And every time it does a rerouting, it’ll pass to the the objects in the route. And that is an array of these leg objects and they have to start and then address. And the distance in in meters and the duration in seconds. Don’t ask me why, but you can you can display seconds. However you want. I didn’t format it or anything. And so you can show the total or you can show the legs. So you could. A nicer demo of this would be to put it in a memory data source and show you kind of a nice format of view of the route. So we do have a number of customers who are using. Like delivery apps for. Drivers truck drivers and that sort of thing and they do have route mapping. And so this would be a nice feature where you can actually include the route. In your in your application rather than sending it out to another application. So that’s a nice use case for this. So one other thing that I want to show you is support for something called KML. KML is a markup language that’s used to to render geographic features on a map. And those could be points lines polygons. And that’s that’s sort of the standard format in the world of Google Maps and Google Earth. And so you might want to have if you have more complex geometries or features, you can generate KML which has a bit of the formatting built into it and inject that on your map. Or you can find third party data sets and say I want to show some you know, trained lines from the government or something and lay them on top of my map. I’m going to just click the enable Chicago KML. And these are the Metro lines in Chicago. If you click on them, they give you a bit of info, red line, blue line. That’s what they’re named. And I’ll just show you how that that is set. It’s pretty easy. There’s on the configuration of the component. There is something called the KML layer URL. And that’s just a data provider. So it’s data brown. It could be, you know, you can change it dynamically. And then if you look at the method here, all I did was send the URL into that data provider. And it’s immediate response because it’s data bound. So that’s just an example of the Chicago Metro line. But you can, if you search the internet, there’s a lot of government agencies publish their data sets in KML. And you can also generate KML yourself. It’s just a markup language. So you can have points, lines, and polygons for different geographic features. So that was a request that came in a few weeks ago when we added to the component. So that’s pretty much all I wanted to demo. I want to take you through a quick overview of what we just saw and what’s new. So again, in this release of the little maps component, we can now do marker icon URLs. And those can be third party URLs. There’s a lot of galleries out there you can choose from, or you can make your own custom icons. We provide a radius option. So you can set the radius in meters. And it’ll draw the radius and there’s some color and that sort of thing around, around your marker. And that’s good for privacy mode. So you could scramble a location a bit and draw the radius and show it in privacy mode. Like they do on Airbnb and stuff. You can also do show ranges with that. So just show a radius of what you want around your marker. You can now click on a marker and show some info window. And that can be text and markup. And of course, it can be data driven. You saw that I joined in some data from a couple tables plus a calculated value. You can do the same for tool tips as you do for info window. Something I didn’t show, but it’s very simple. There’s a little label you can put on the marker itself. It’s not, there’s not much room so that we were just doing one, one letter in that case. There’s options for panning and zooming. So something that wasn’t in the last release is that when you, when you’re passing in multiple markers into the component, you can, you can auto zoom to the extent. So that’s not something you have to program. It just happens automatically. And we have APIs to center the map on either an address or a lat long coordinate pair. Also, the zoom level itself is a data bound property of the component. So you can, you got, my example was just hooked up to a slider. But you could also have that be, you know, something that you’re changing depending on the record that’s selected. So that’s up to you. We added support for gesture handling. Again, that’s really how you handle one finger or two finger pans. And the reason for that is if you have a map which overflows and then you get a, you get a, you get a scroll, a scroll bar, you, you may want to scroll instead of pan. So it’s up to you if you want to, if you want to turn that on or off. And again, that also affects the mouse wheel too. If you, if you turn it to cooperative, then you get no mouse wheel and you have to, you have to use the two finger. If you took put it to none, you can totally disable pinching and panning on touch screens. Route options were in the last release, but it was kind of limited. Now we, we, we could just enable routing, but now we, we added some of the options, including the travel mode. And if you want to avoid tolls and ferries and things. Also we added that method to retrieve the legs, which is the Jason object and you could, you could render that. However you want. Finally, we added KML support, which again is a markup language for geographic features. You can add layers to your map. And there’s lots of third party layers you can go out and get. There’s also a way to generate that custom. So I’m going to leave up some useful links here. There’s the, the project home is on, is on GitHub. Although Wikidocimitation is updated there, all the, the different options are, are documented. Again, if you want to get your Google API key, you go to consul.cloud.google.com. And you can just generate a new API key and you have to, you have to pass that in when you start up. Otherwise it won’t render the map. This is a typo from the last webinar copy paste problem so you can ignore that last one. So I’ll leave these, these links up. Everything’s available through the servoic package manager record. Do we have questions? Yes, we do. And somebody’s asking if there is an API methods for geocoding and address into lat long. Not exposed to this component. There is a way to do that that’s fairly simple, but I guess for this webinar, it’s a bit off topic. I’m happy to take that question offline, but we don’t do it through the component, but there’s a way to, to call it through Google with your API key. Okay, it’s quite simple. All right, another question is about optimizing the roots. Is there an option to calculate the best roots rather than the order the address is worth less? I believe that optimization does that that it can reorder them. So, I don’t know if it reorders the stops for you or not. If it does, you wouldn’t, you would, you can get it back when you, when you call the, the on route changed handler. Okay. Another question about about routing. Is it possible to to calculate the fastest routes, over like 20 addresses? Yeah, that’s what it does. That’s what the optimized route does. Okay, okay, that’s exactly okay. Another question about KML. Is it possible to get a KML file from media? So, can you ship a KML with your solution? Okay, make it dynamic? Yes, you could do that. Any, any, file resource you can include in your solution and then get a dynamic URL to it. I don’t have a good example of how to do that, but if you want to mail me privately, I’ll answer it offline. Or post on the forum. Okay. Yeah. Yeah, you can, you could embed it in your media fold. I think what the, there attendees asking is you could, you could embed it in your solution and your media folder and then you can get a dynamic URL. At runtime to that, that resource. So, you could ship your KML with your solution. Okay, cool. No other questions, I see. Okay, Roker, do you want to remind everyone about the round table one more time before we go out? Yeah, sure. Yeah, all April 1st, as we said before, we’ll be a round table, discuss this panel where we will be discussing a couple of challenges you might face due to, to the Corona virus business challenges. We have find a couple of cat members to join so there will be part of the panel. Customer advisory board. Sir voice, customer advisory board. Yeah, our customer advisory board members. So, I know that Jonah has to be definitely will be joining and a couple of others which I don’t know out of my head. Again, the registration link is in the chat panel. Also, you should have received an email about about this webinar. And yeah, we were looking forward to see your April 1st Wednesday. For now, I would say, stay healthy, stay safe and. Have a nice weekend. Okay, thanks everyone. Thank you, everyone. Ciao. Bye. Bye.