Introducing Terra Draw: A JavaScript Library To Draw On Any Web Map
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 266 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/66450 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Computer virusOpen sourceForcing (mathematics)Web applicationLink (knot theory)Web-DesignerSoftware developerLevel (video gaming)Web 2.0Slide ruleMultiplication signInformation technology consultingExpert systemBitForm (programming)Content (media)Probability density functionLatent heatSoftwareComputer animationXML
01:24
Context awarenessSpacetimeBitPolygonMapping1 (number)Level (video gaming)Position operatorDifferent (Kate Ryan album)AreaWebsiteCategory of beingMultiplication signRange (statistics)XML
03:04
Similarity (geometry)Boundary value problemPolygonVector graphicsSoftware maintenanceComputer configurationLevel (video gaming)Different (Kate Ryan album)Degree (graph theory)Plug-in (computing)Extension (kinesiology)Multiplication signXMLComputer animation
03:39
MappingMultiplication signFrustrationBit
04:24
TwitterGoogle MapsView (database)Control flowAsynchronous Transfer ModeLine (geometry)Latent heatBitFreewarePoint (geometry)Core dumpRectangleCodeMappingPrototypeFunctional (mathematics)Universe (mathematics)TheoryQuicksortAdditionSpacetimeFrustrationMobile WebDifferent (Kate Ryan album)Level (video gaming)Game controllerPolygonInteractive televisionRevision controlTouch typingLogicGeometryTablet computerExtension (kinesiology)Computer animationXML
07:43
CirclePolygonPoint (geometry)Maschinenbau KielTotal S.A.Group actionVideoconferencingPoint (geometry)PolygonAsynchronous Transfer ModeSelectivity (electronic)Game controllerMedical imagingMereologyDifferent (Kate Ryan album)GeometryBit1 (number)Graph coloring2 (number)RectangleInsertion lossFunctional (mathematics)Projective planeTestbedLevel (video gaming)Closed setWebsiteSimilarity (geometry)Video gameMoment (mathematics)Line (geometry)Right angleXML
10:51
BitProjective planeAbstractionSoftware testingSocial classAsynchronous Transfer ModeTheory of relativitySemantics (computer science)Extension (kinesiology)Axiom of choiceHand fanSoftware developerWebsiteSoftware frameworkXML
12:34
PolygonWeb browserComputer architectureDrum memorySpacetimeCore dumpQuicksortAsynchronous Transfer ModePolygonGoogolBitGeometrySelectivity (electronic)Computer animation
13:45
OvalInterface (computing)Cursor (computers)Software development kitLevel (video gaming)Different (Kate Ryan album)Interface (computing)Proxy serverGeometryMathematicsInverse elementEvent horizonMoment (mathematics)TouchscreenOpen setInternet service providerWeb 2.0SpacetimeMappingFinite setBitMusical ensembleElement (mathematics)1 (number)Projective planeCore dumpInteractive televisionMotion captureRight angleCodeCoordinate systemVolumenvisualisierungRoundness (object)TheoryXMLComputer animation
17:01
Asynchronous Transfer ModePolygonGoodness of fitLevel (video gaming)Line (geometry)Asynchronous Transfer ModeProjective planeComputer fileObject (grammar)Installation artInstance (computer science)PolygonOpen sourceStructural loadFiber bundleCodeScripting languageWeb pageEvent horizonData managementPoint (geometry)Electronic program guideThermal conductivityXML
19:19
Asynchronous Transfer ModeAsynchronous Transfer ModeMereologyExtension (kinesiology)FacebookMultiplication signBuildingEndliche ModelltheorieSoftwareVector spaceVirtual machineReal-time operating systemRoutingWeb browserLevel (video gaming)Medical imagingPoint (geometry)VideoconferencingSocial classObject (grammar)Interface (computing)PolygonClient (computing)SatelliteMeta elementRootJava appletXMLUMLComputer animation
21:51
Asynchronous Transfer ModeInstance (computer science)MathematicsBitMultiplication signCursor (computers)Interface (computing)Revision controlPoint (geometry)Selectivity (electronic)QuicksortTheoryLevel (video gaming)CodeNumberCASE <Informatik>Term (mathematics)Alpha (investment)FeedbackXMLComputer animation
Transcript: English(auto-generated)
00:09
Hello. Yeah. Welcome to my talk. Introducing Terajaw. A JavaScript library to draw on any web map. It's great to be here. It's great to be back at Forceful G. I think the last time I was at Forceful G was in Boston in 2017, I think it was. It's
00:24
been a little while. So it's nice to be back in person. Yeah. I've got a lot to get through. So I might skip through these slides quite quickly. But there will be a link and a PDF available afterwards with all the content. So, yeah. A bit about me. My name is James. I'm a software developer, a web
00:41
developer specifically. I've been kind of working in web and geospatial for probably about ten years. I occasionally in my spare time I'm also working on Turf.js, which some of you may be familiar with. And I'm also a Google developer expert for web technologies. So, yeah. So I have to give
01:02
a shout out to my current company that I work for, Nearform, where they're a web app consultancy. And they have a lot of history in the open source community specifically in kind of the JavaScript and Node ecosystems. And so, yeah, they allowed me to come here and kind of, yeah, made it possible
01:20
for me to be here. So shout out to them. So what kind of what is the problem that Terajaw is trying to solve? So I just want to give a bit of context around the space in which Terajaw is working in and what kind of problem it tries to solve. So the examples that I've kind of put up here
01:42
come from a range of different places. One example you might have seen of where you may need to draw on a map is if you've ever used something like Zoopla or Rightmove, which are in the UK. I don't know if they also exist in other places. But essentially, it's a tool that allows you to find
02:01
places to buy or rent properties. And both of these tools have or both of these websites have a tool that allows you to draw like an area of interest that you want to see properties in. And it will only return properties like within that polygon that you draw out. And I also put
02:20
another couple of examples here of like some map builder tools, ones from National Geographic and another ones from Waze. And Waze have kind of a tool for, I guess, updating their map data or areas of interest or various other aspects of geographic data that they maintain. And for me, my background in this kind of problem was that I was
02:46
working for a startup that was doing indoor mapping and indoor positioning specifically in kind of the retail spaces. So, I was working for a long time like trying to figure out like how we could build a tool that allowed to
03:00
quickly map like indoor spaces. And whilst I was doing that, I managed to evaluate like a few different options of tools that kind of somewhat did this to some extent in varying degrees of features and maintenance and all these kind of different things.
03:22
Eventually landed on MapGL Draw. So, I spent a lot of time working with MapGL Draw, which is essentially like a plug-in library for MapboxGL. And yeah, so I got to know that kind of reasonably well.
03:40
And I eventually kind of, I left the company I was working at. It was called Dent Reality at the time. It's now called HyperAR in, I think, June last year and took some time out. And during that time, I was thinking about like that problem of like drawing on maps and like kind of,
04:01
I had a few frustrations I'd had just from like using these other libraries. And I kind of was thinking, I wonder if there's a way that I could kind of approach this maybe a bit differently or kind of could kind of fill some of those holes or fill some of the requirements that I felt were missing when I was
04:21
working with those tools. And I started, I think in late June or maybe early July last year and trying to prototype some of this. And one of the things that I was thinking about was like the actual, like I wasn't fully convinced that much
04:41
of the drawing logic needed to be coupled with the actual mapping library that you use because the interactions that you have with like a map are actually, there aren't that many. And most mapping libraries have very, very similar APIs. So, I had this idea that we could basically like just have this very thin,
05:00
like what I would call like an adapter layer that would exist for each mapping library, which is like maybe like 100 or 200 lines of code that just maps methods onto the underlying library. And then everything else, the core would just be universal for all of the different adapters basically. So, I started messing
05:22
around with that. And yeah, I was like, oh, this actually works. Like you can actually do this and it kind of functions in a way that you might expect. And so, the aims that I was trying to aim, like get out with the library
05:40
was that, again, like I wanted to kind of get away, I wanted to try and solve some of the problems that I felt like I had faced whilst I was using like other tools previously. And so, one of the things I really wanted to make it was like extensible. So, I wanted it to be able to have like really customized modes that you could create on top of or like plug into basically Teradraw.
06:07
So, basically Teradraw comes with a bunch of predefined like modes like point, line, polygon, which I'll show in a little bit. But also, I wanted you to be able to say like actually I have these really nice specific requirements and I need to make a mode that's really specific for like
06:21
the problem space that I'm working in. The other thing is cross library support, which I talked about briefly in the last slide, so that it can work with, you know, any kind of, well, in theory, any kind of mapping library. And the last thing was like just wanting to be able to have styling controls. So, like one of the frustrations I had previously was like not being able to actually fully style all of the geometries
06:44
that were being like rendered on the map as you were drawing. So, I just wanted to be able to make sure that that was really possible. And so, since then, Teradraw has had, I think, 36 version releases on NPM over the last, I guess, probably just over a year.
07:06
And yeah, there's been some cool bits, I guess, things that would come out recently that I think have been quite nice additions have been things like mobile and like tablet supports, like touch support and getting that behaving uniformly across different devices and also
07:21
different mapping libraries, and that's like a really interesting problem to try and solve. And also like added in a bunch of different core modes, so things like rectangle mode, so you can draw a rectangle, or like freehand mode, so you can draw like a freehand polygon. Yeah, there's all kinds of stuff that's come along in the last year, which I think has been a
07:42
nice addition to the library. So, I'll show you a few examples of Teradraw in action. These kind of work better as videos, but just because they wanted these to be able to come out as PDFs, I've just kind of broken this down into images,
08:00
but this is just an example of like the polygon drawing mode. So, it's reasonably straightforward. You start with drawing a point and then another point, and that creates a line, and then you create this third point. You can move the mouse on the third point, and it will, once you create the third point, you can then close the polygon by clicking either the start or the end of the polygon, which are
08:22
those two points. And then finally, once you click on one of the closing points, it will create the polygon. And there's lots of interesting things around like the UX of actually creating, of like how you actually do drawing is really interesting. And it was interesting, like seeing how different drawing tools had implemented that and kind of, do I kind of copy them or do I like
08:44
do my own thing or do I just do what like makes sense? You kind of landed somewhere in the middle based on just like, oh, well, actually, I like this aspect of this drawing library and this aspect of this drawing library, and maybe I can create something that's kind of somewhere in between. So, alongside like the drawing tools, there's also like selection tools and like
09:02
actual ability to edit like geometries you've already created. So, this is an example of the select mode. So, here I have the polygon selected, and in the second image I'm inserting, you can insert a point in like one of the mid points. So, you see how here this point is slightly smaller. If you click on that,
09:21
it inserts a point into the polygon, and then you can actually edit and move that point that you've created as well and drag it around. Action mode. And this comes onto the styling side of things. So, as I was saying, I wanted to be able to have like the decent ability to kind of style what was being rendered to the map. And so, again, this
09:42
works a little bit better as a video, but what was happening here is basically as I was moving the mouse, it was updating the color of the polygons like on the fly. And you can style each mode and each geometry individually as well. So, you have a lot of control over like what actually is being rendered to the map, and you can do all of that. You can change that styling kind of as you want.
10:06
So, as part of like setting up the project, I created a website for the project called Terradraw.io, and that kind of acts as a test bed and ability to just show off like kind of some of the things that Terradraw can do. It's quite similar to if
10:21
you've used something like GeoJSON.io, it has a similar level of kind of functionality. You can get out the GeoJSON that's being created in the right-hand panel. But yeah, and that kind of, it has all of the modes on there. I think apart from maybe it's missing like rectangle mode at the moment, I think, but I think all the other ones or the built-in modes are also on there. So yeah,
10:43
check that out if you just want to have a play or do you just want to see what I'm talking about in real life. So, a bit of a technical overview going into kind of some of the technical details of the project. So, the whole library is written in TypeScript, so I'm a big
11:02
TypeScript fan. I feel like it adds a lot of benefits, and I guess one of the big benefits, I think, in relation to this project is around like, it makes it, or I feel like it makes it easier to make things extensible in the sense like, so, there's like an abstract class for
11:21
an adapter and an abstract class for mode, and then you just extend that and just fill in the methods that are missing, and that creates you your mode or your adapter, basically, and I think that TypeScript really lends itself to being able to do that sensibly. It's also all testers in Jest, just personal preference
11:42
based on historically, I've just used Jest a lot, so Jest is like a JavaScript testing framework, basically. And so one of the other things about this as well that I think is quite cool, minus the kind of development dependencies for like testing and spitting up like local, like building the project and so
12:01
forth, the actual library itself doesn't have any dependencies, so it was kind of just an architectural choice that historically I've just been fed up with things like breaking upstream because people don't respect like semantic versioning, or also just things like not building for some bizarre reason because some
12:21
NPM package is like stopped working for some reason. So I was just like, okay, let's just try and see if there's a way to do this without having any other external dependencies, basically. So this is kind of an overview of the, I guess, architecture of Teradraw, in a way it's quite simple, it's kind of, I guess,
12:42
maybe what they would call an onion architecture where it's kind of layers. So the first layer I guess is like the adapter layer, so you pick an adapter that you want to use, so whether it be Mapbox, Flirt or Google, whichever one you're interested in using, and then you also decide which modes
13:01
you want to use, so maybe I want to use Mapbox and I just want the polygon mode. And then at the core there's like the core which is where all the geometry is stored, and that basin, there's like a bit of
13:21
sort of space you need up kind of when you do selections and this kind of thing. But essentially that's it, like it's a simple architecture, there's not a lot going on, which are the way we get this cross
13:51
library compatibility. So maybe the common question is like how does that work, and the real answer is like there's only
14:00
really like a finite number of interact with a web map, and so as long as you can capture all of those events and then basically, there's only a finite
14:27
number of ways you can really interact with like a web map, so as long as you can capture all of those events and then kind of just like proxy them to the underlying library, you only need like a thin, like a relatively thin layer to actually like capture those events,
14:41
and you also need to handle like rendering to the map, and that's a little bit of work, but realistically compared to the rest of the library it's quite a small amount of code. And so there's adapters for open layers, Google Maps, Leaflet, MapLibra, Mapbox GL.js, quite lucky at the moment because MapLibra and Mapbox GL.js
15:02
have the same interface, so they don't have to do anything different. Okay, well the nice thing is that they are separated so like in theory if the compatibility changes then
15:21
you can just edit them individually and that's fine, right? Yeah, so potentially there's opportunities to support other, these are just the core ones that sprang to mind that I ended up writing, but there's no reason why you couldn't add in a different provider.
15:43
So these are the things that you need to fulfill to be able to have an adapter for a drawing library. So project, and I always get confused about which way round it is, so project is where you go from like a geographic coordinate to a screen space coordinate, and then
16:02
unproject is basically the inverse of that. And then set cursor, you know, if you want to change the cursor styling, disabling double click to zoom, sometimes we need to do that because we have our own behaviors that we need to basically overwrite like whatever's going on on the map so you don't accidentally just zoom in
16:21
when you're trying to draw basically. Get the map container so just that you can get the underlying HTML element where the map's being rendered. And yeah, the only other really interesting one is render, which is how you actually take the geometries that are inside TerraDraw and you render them.
16:41
You basically update the layers in the mapping library to put them on the map. So yeah, you could do like, if you wanted to, we could write another adapter for, I don't know, like Apple Maps kit or some other, maybe like cesium, although that gets slightly more complicated when you start to do things in 3D.
17:03
Okay, how do you use TerraDraw? So what I would recommend is using just npm, node package manager, and you can just do npm install TerraDraw and it will install it into your project. If you want to just use it in and drop in HTML file there, you can also, it has,
17:21
there's a UMD bundle so you can just drop it into like an HTML page and use like a script tag as well if that's how you want to do things. And here's an example of like how you would use TerraDraw with MapLira.
17:43
So the first, I guess, 13 lines is just, like the first one to six is just imports and then eight to 13 is setting up the map and then we wait for the map to load and then line 16 to 24 is where the actual TerraDraw instance is created.
18:03
So line 16 we create TerraDraw, we pass in an adapter for MapLira, we give it that, we give the adapter the map and the map object and then we just provide it the modes that we're interested in, so here we're just providing the polygon drawing mode but you could also pass in, you know,
18:20
point, line, select, all the other modes if you wanted to and then eventually we just start the, we start TerraDraw basically so that it can start receiving events. Docs, I've done my best to try and make sure that there's a reasonable level of documentation
18:41
so there's all the kind of common stuff you would hopefully expect in an open source project like a readme, changelog, license, code of conduct, all that good stuff and there's also some auto-generated API docs which, like this is also one of the benefits of TypeScript is you can, if you write doc comments in your code
19:02
then it can auto-generate all the API documentation for you using a library called TS doc. And there's also a couple guides, so there's one for getting started and there's another for if you want to actually work on developing TerraDraw itself or extending TerraDraw then there's another guide for like how you do that.
19:21
Custom mode, so I talked a bit about like I wanted to make TerraDraw really extensible and part of that is like if people want to just create their own mode then that should be possible so the way in which you do that is you import something called TerraDraw extend and that has a class on it
19:41
called TerraDraw based draw mode, very Java, and you can extend that with your custom mode and then as long as you just fulfill the interface of the draw mode you can just do whatever it is that you want in there and provide it some custom styling
20:01
to render whatever geometries it is that you are creating in that mode. So a couple of examples of that that came together, one was one of my friends wanted to basically create a mode
20:20
where you could do client side routing so you could click a point on the map and then click another point on the map and it would generate like a network route through locally in the browser through that route network and then you could do that multiple times and have like a multi-stop routing like in the browser.
20:41
This actually looks a lot cooler again on video because it's all happening kind of in real time as you move the mouse but hopefully you can kind of imagine what that looks like. Another mode that I kind of just created just to demonstrate another approach or another thing another way in which you could take it is if you're familiar with segment anything
21:02
which is a I guess machine learning model from Meta or Facebook that essentially allows you to segment images so essentially pick out objects or features from an image and some of you may have seen this with like people have taken this to like satellite imagery
21:21
and essentially I just created a mode that wraps around that model and you can click on the map and it will generate you like a polygon vector of whatever it is that you clicked on so a building or I don't know car park or a garage or whatever it might be.
21:41
So yeah just trying to demonstrate like you could kind of take these modes anywhere and they could kind of do whatever it is that you're wanting to do. So the future. So the roadmap is like you know relatively open-ended
22:00
in the sense of I'm just trying to get a feel for like what people want to do with it and where they want to take it. I've had some feedback around like selection and like wanting to tweak that slightly so that's something that I'm going to be looking at is kind of improving the UX of the selection mode
22:21
but then also potentially adding a few more sort of like convenience methods to the public API. Potentially looking at like if you know that there's things like I want to know what features are under my cursor at this point in time and being able to do that like from the public interface
22:40
of like a TerraDraw instance. Also potentially things like maybe like undo redo and kind of being able to control like if I draw something I want to be able to undo drawing it or fast forward or you know whatever it might be. And then lastly is just trying to maybe like looking at solidifying
23:02
the public interface a bit more and just kind of looking at maybe releasing like a version one. So it's currently TerraDraw is currently I guess in alpha but I think that's a bit of a misnomer. It's more just that I didn't want to be tied to having to every time you update the public interface
23:21
like in theory you should have to bump the major version number but I didn't want it to be just like bumping it like every week because I'm just making some random change like some not random but like making a change to the library. So yeah hopefully looking at kind of maybe solidifying that and making it like looking at releasing like a version one
23:40
that's a bit more stable in terms of the interface. But yeah if you're interested in helping out then yeah take a look on GitHub maybe give it a star if you find it interesting feel free to like yeah do it appreciate kind of testing it out and any feedback and that doesn't necessarily even mean
24:01
having to test it out at like a code level but even if you just go on teradraw.io and something feels like a bit strange or like the ux feels a bit weird then please feel free to make an issue or I guess even just come chat to me today. Yeah pull requests obviously are welcome if you have improvements
24:20
and yeah of on you know whatever that might be even if it's just fixing a typo in the readme or whatever I'm open to things of you know all sorts of contributions. Yeah just come chat to me if you have interesting use cases or things that you would want to do
24:40
and I can maybe help understand if that's possible like how you might do that. Yeah thanks.