Extend TMS WEB Core with JS Libraries with Andrew: Leaflet
There are so many useful JS libraries yet to explore that it can be a challenge to pick what to cover next. But this time out, we’re going to have a look at a JS library suggested by blog reader Eddy Poullet, way back in April when this blog series first started. The request? Leaflet, which bills itself as ‘a JavaScript library for interactive maps.’ And who doesn’t like interactive maps? Easily one of the more useful applications to be found on any mobile device. And while there are a number of other ways to get interactive maps into your TMS WEB Core applications, this is a good example where it is nice to have a few choices available. Motivation. Google Maps and Apple Maps tend to get most of the attention, as one of these is likely to be the default when it comes to using maps on any mobile device. And these tend to be very well integrated into their respective devices, naturally, as they’re also responsible for their respective operating systems as well. No surprise there. Desktop apps, and websites specifically, tend to be more commonly configured to use Google Maps or perhaps MapQuest or less commonly other providers, and far less frequently Apple Maps. Perhaps that will change over time as developers integrate Apple Maps into their websites. Perhaps we’ll cover that another time. But that’s historically been one of the troubles of interactive maps – jumping through hoops to get at the data. Whether it is an API key or a developer account or some kind of license or an unhelpful rate limit. Leaflet offers a bit of a different approach in that there’s nothing to do to get started in terms of API keys or developer account registration. Just load up a JS library and be immediately productive. Getting Started. As has become custom, we’ll start with a new TMS WEB Core project, using the Bootstrap template, to begin with. And then add in the necessary links to the Leaflet JavaScript and CSS files. In the project, add a TWebHTMLDiv to the form and set its Name and ElementID to ‘divMap’ just so we can reference it. To immediately see it in action, it just needs to be initialized. This can be done directly from within WebFormCreate like this, taken directly from the excellent documentation in their Quick Start Guide. procedure TForm1.WebFormCreate(Sender: TObject); begin asm var map = L.map(‘divMap’).setView([51.505, -0.09], 13); var tiles = L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { maxZoom: 19, attribution: ‘© OpenStreetMap’ }).addTo(map); end; end; Doesn’t get much simpler than that. Using the new TWebCSSClass component in combination with Bootstrap, we can add in some rounded corners here and there and immediately get a pretty reasonable interactive map that supports zooming in/out and panning around. Leaflet up and running The interface that is rendered uses pure HTML/CSS so it is possible to change the look of things like the zoom in/out controls or other elements. The content (the map itself) consists of a collection of image tiles. Can’t do much with those directly in HTML/CSS. But there are a lot of things that can be done with what is being generated inside the tiles. And speaking of tiles, while everything so far is pretty quick and easy, there are some considerations that come with the set of tiles. In […]
