of Node in the behind the scenes. Made a lot of web maps, managing lots of data. We had a project with 1,000 feature types, a couple of hundred attributes. So it was a fun challenge, how to make it all work, how to get the data to the web map and make it presentable. I've done a lot of enterprise management. People say, my server's down.

You get that data, put it on a map. I say, look, server's down throughout the country. It's kind of fun. Boundless, we're an open source geospatial company. We provide enterprise support for desktop, server, and mobile solutions. We also provide professional services for their support to open source products.

We have people working throughout the country and the world, 22 states, 11 countries. We work from home just trying to deliver the best we can. So here's a problem set. You have a lot. You have a lot of geospatial data. And it's in a weird format. It's a shape file. It's a GPX. It's a JSON file. It's a database that has some weird shape field that doesn't

have anything that makes sense. How do you get this data to other people? You work out the shape file, and now you have giant files. These are huge files. No one cares about the 100 points. You want the million point polygon. These are really big files. And you're stuck mailing around thumb drives, big FDPs. It's all terrible experience. So the answer's web maps.

Everyone has a web browser. Our phones have web browsers. Our tablets have web browsers. All our computers have web browsers. Our game stations have web browsers. They're everywhere. And it just makes the data easy to use. So web maps are awesome. These are great tools. We want web maps. They work on everyone's computer,

except we all have a web browser. They're everywhere. We can put a map in a browser anywhere you want it. And they can also be embedded. So you have an existing website. It's your community. It's your data set you've collected. It has a look, and a style, and a feel. You can throw a web map there next to it, and everything still flows and looks nice. And no thick lines to worry about.

It's simple. Browser, go. And lastly, the web is super aggressive on its updating. Chrome is on a six week cycle. Mozilla is on a five to eight week cycle. Microsoft Edge is keeping pace. Their fast, fast changes come to the web browser. And so it's a really fun space to work in.

You get the newest stuff very quickly. Balance Web SDK is also awesome. So our goal is to make a tool to help you make web maps. We want web maps to be easy. We want people to be able to produce web maps quickly. We're in beta right now, 2.0. We just got pushed out of development branch,

ended master on GitHub. I have the GitHub link here. Check it out. See what it is. In 1.0, we were targeting building a tool to work with a QGIS plug-in called Web App Builder. The idea was you could take QGIS, click a few buttons, and spin out a web map. It worked, but it wasn't really a software development

kit. We wanted to make a software development kit for developers. So that's what 2.0 is, a software development kit for developers to use to build web maps. So here's the tech stack. Again, open source on GitHub right there. You can go download it today. It's developing JavaScript ES6. It's the latest version of JavaScript.

It's all the new bells and whistles everyone wants. We're using open layers for our map. We plan to have Flexibility in the future to switch out open layers for other map libraries. We're using React for our framework, Redux for state management, and Webpack to package it all up. Take away here is this is really cool, hot stuff right now in web development.

This is what a lot of people are using. There's a lot of documentation, a lot of tools out there to make this work well. So what are the goals of SDK? Make open layers quick and easy. Make web maps quick and easy. You want a general purpose tool to make web maps. Another thought though, it's an engine to take a map box style, run it through SDK,

and spit out a web map. I'll give that a little more too. So let's look at some code. This is it. 70 lines of code, simple JavaScript, you got a web map. Simple, right? That's easy. I'll go through it better. So we start off, we have imports. These are ES6 imports.

Bring the modules in. We have our libraries, our scoped MPM packages. Add boundless geo is a scoping. So you know these MPM packages are reliable. They're trustworthy. They're not some random person making up packages. Here's our mapping code. This is how we add a source and a layer.

All maps need a source and a layer. If you think of the source as the data behind it, then the layer is the styling, sort of. So we're adding an OpenStreetMap layer and source. We're adding another GeoJSON layer to hold our points. We add some colors. We have this lovely orange color here for our points. And we have null island.

That's simple GeoJSON defining null island, its properties, coordinates, and 0, 0. And lastly, we have the React render component. This is React working its magic. We're saying render this SDK map component into the map element in the HTML. This is a little bit of React magic.

It looks simple, and it works really well and simple like that. You'll see I have a zoom slider prop there. And there we go. There's the zoom slider like I talked about. There's the OpenStreetMaps. There's null island, just the colors we defined it. Again, just a handful of code. You can spit out a map.

So Mapbox style, SDK, build a map. SDK is React and Redux, and our map is OpenLayers. That's simple. So what is Mapbox style? Mapbox style is a JSON document used to describe what a map should look like, the presentation layer of a map.

It defines the sources, the layers, the styling for the layers, what everything should look like. It's an existing spec. These are some snippets from the spec. And you'll see that if we look at the code from earlier, we're matching up really close with the Mapbox style. When we say add source and layers, we're adding. Those are exactly what the Mapbox specs are looking for. When we define our points and our colors,

it's exactly what the Mapbox spec is looking for. So the Mapbox spec is used to drive that. So SDK, we're updating the code to build the Mapbox spec to define the map. A little bit about Redux. Redux is state management. In traditional web development, the state of the website is tricky.

It changes on you. You update a button. You push a button three times, and you get a different example than if you push it four times. It's not reliable. Redux allows you to store all the state in a big JSON object. So it's reliable, consistent. You define what the state should do. Redux allows you to do that. On the left, we have a screenshot of what the Redux tools give you. Our Redux also has a really great tool set.

It allows you to see the state, do live coding, and push changes to the state, and roll the state back. What happened five minutes ago? I saw an odd blip on this page load. You step back through the steps, and you see what happened. It's a really wonderful tool. It's getting a lot of use right now. It's pretty simple. So you see here, we're again looking at our code from earlier.

We are dispatching the set view action, which sets this in our at negative 93, 45, just like in our Redux state. So we are setting the actions in our code to update the Redux state. Just the same with the source and the layers. Again, from our code to dispatch the add source to the Redux state to the Mapbox style.

They're all flowing together. What is React? React is a framework developed by Facebook. It uses Shadow DOM or Virtual DOM behind the scenes to see changes and diff the changes to make stuff very fast. It only updates the components that have changed. So it's very efficient, very quick.

It also isolates everything. You can have a chat box and a map living next to each other, and they don't have to share components. The chat box and the map can both be very chatty with the network and not step on each other's toes. Or you could share the data using Redux behind the scenes to flow data from the chat to the map or vice versa. So it helps you separate concerns and what you need to do in isolation.

Also there's a concept of props. Table shakes. The concept of props. We add a prop here, show zoom slider, and we show the zoom slider in the map. We add more props later, show mini map, show information, show zoom buttons. All our stuff can be brought in quickly with little tiny props.

So you say SDK, show whatever you want, and it shows up in the map. Take it off the end of the zoom slider. It's an easy way to build the map to do what you want. So again, here's our map with the zoom slider, and there's our map. All right, so that's SDK. It's not super complicated.

It's trying to be easy to help you build maps. So let's look at some examples. We're trying to build a rich set of examples to help you get there and build the maps. On this basic map example, if you click the add 10 random points a bunch, you get a map littered with points. It's that simple. Here's the WMS one. We're reading in WS layers from the Geo server.

Click on one of the tiles, and you get a pop-up box. We're trying to give you features that you want. You want to build a map with WMS layers. You want pop-ups to read from the WMS layer to tell you what the data is. So you want pop-ups. We also have native pop-ups. Open layers doesn't come out of the box with pop-ups. People like pop-ups.

We've added them in. We have native pop-ups. They're very flexible, allows you to have different behaviors built into them, customize them to meet your needs. Again, trying to give you everything you need to build a map. We have a drawing tool. You can see I drew a little box around where we are today. You can draw points, lines, measure the lines, measure the area, just vary all the drawing techniques you want.

We have a list of examples. We're building examples quickly. We're trying to get a lot of examples out there so people can use it and test it, see what's going on. So that's where we are today. We have some code. We have some examples. It's still beta, but it's ready to use.

You can go clone this at GitHub, use it today, give us feedback. Let us know what works, what doesn't work, what you hate, what you want. That'd be wonderful. Where we're going. The feature is that we're gonna put web SDK into all the boundless products. Going forward, this should be our web map for everything. So we've got a lot of installations to do.

Everywhere, we've got a web map. We've got to rewrite it and bring this in. So we're gonna spend a lot of time using SDK, seeing how it works, finding those bugs, finding where it's missing, and making it better. So yeah, that's next year. And please go clone the project. Find issues. I'll fix them. Send them up.

Balance Connect. This is another place other than GitHub to push your issues. This is where documentation will live. We're trying to fix an open source problem where documentation lives everywhere, lives in the GitHub repo, lives in my personal page. It lives in Connect. That's what we're trying to bring it all into. Check out Connect. That's where you'll find the documentation for SDK.

So that's it. Any questions? So the question's how much the map stays in Redux.

All of it, as much as we can. I wanna say right now pop-ups aren't. If a pop-up is open or closed, but that could totally be put in a Redux state. That would actually be a good idea. We have, again, with the concept of the Mapbox style, we have to render the Mapbox style. We true the Mapbox styles. We must keep that chunk of our Redux state.

But the drawing, as I showed earlier, drawing is a separate piece of the Redux state. We have our map state, we have our drawing state. So we have our map state and our pop-up state to show what pop-ups are open, what pop-ups are closed. Absolutely. Yes, sir. So I've worked with open letters quite a bit,

and so would you be able to use this Mapbox styling with those styles? I'm not totally sure. So the question's about vector layer, vector tiles.

And I'm not super familiar with vector tiles, I'm sorry. I know we were working with vector tiles, do some work with the Mapbox style, and there's some interplay back and forth between them. Just can't speak too clearly to it, I'm sorry. Is Bart here? Bart is not here. Andreas is here. He's not in the room, but he's around.

Bart is working with me, Bart is, Bart is actually working with me on this project. Any other questions? That went really quick.

Do you try out examples? How do I, where do you have to be to start this? MPM, MPMI, to start the MPM install, and then MPM start. We probably do need a read me, don't we? Yeah, that's not my problem. Okay, we'll get a read me out there. See, I'm getting great feedback.

Thank you. Yes, the question's where are the example apps? The example apps live in the source, live in the GitHub repo. They're right above it in a source folder.

This man here should have them up and running in a moment. MPMI takes a while. After that, you should have it up and running.

So the question's about using Redux actions. Currently it is required, but we planned in the future allow you to just import a Mapbox style and spit down a map. I want to say it's actually in JIRA for this next sprint,

or this sprint after this. That's definitely coming up very soon. Yes, sir?

The changes between one and two? The biggest driving force was moving to the Redux style, or using Redux to manage the states and the Mapbox style. But there's been, and the codes have been in drastic rewrites. It's just a high level change in how we looked at the problem.

I'm sorry? So what problem we had with version one, you're asking? It's complicated. It's a very complicated question.

It's intended purpose, again, was to be used with the web app builder, so we can have web app builder spit out web maps. And so it wasn't really suited as much as we wanted for a developer. We were unhappy with how it managed state, how it worked, and it just wasn't working like we wanted.

And the best solution we had was to start over. Yes? It's a very good question. Does this include CSS? Very minimum. The goal was to keep the CSS as bare as possible

and use the examples as a point to bring the CSS in. I want to say we have CSS to style the pop-ups, because we feel like we have to have that style, but that's about it. We have plans to show examples how to override the CSS and just provide HTML and let the user pick the CSS. And that brings up another,

the 1.0, we had made some CSS styling issues that were hard to move away from. We were being very opinionated about our styling, and we were unhappy with that. We wanted to give it more freeform styling.

For writing the HTML, you can definitely bring in your own React components. We are using custom components in some of the examples. So by all means, you could swap out the custom components and get down to just a map, absolutely. And there isn't a whole lot of HTML in it either.