 Welcome to an ARF practical workshop video. My name is Nico Tripsovich from the Archeological Research Facility. 100 years ago, a large fire burned through Northside, a neighborhood north of UC Berkeley. And if you visit the neighborhood today, you can see that many of the architectural changes that were enacted after the fire such as stucco buildings with tile roofs are really visible in the area that burned, compared to the area that didn't. I built a web map, mobile web map to help people visit the neighborhood and get some information about the architectural changes. And in this short video, I will describe how I built the web map using leaflet and QGIS. And in this video I'll describe where I found the parcel and historical data, how I brought it together and represented it in QGIS in preparation for exporting to leaflet using the QGIS to web plugin by Tom Chadwin. I hosted on GitHub pages, but other hosting will work. And it's an entirely open source workflow, no special mobile apps, and for iOS or Android, and it can be embedded in a web page, because it's all open with no licensing fees. So let's turn now to the actual web map. So as you can see, it's being hosted here at a github.io on GitHub pages. And what we've got here is a few layers. We have the actual polygons that were derived from household house footprints, and then I was able to determine the year built attribute and color them appropriately where brown is prefire like the brown shingles Berkeley and this peach color is the I wanted to reference the stucco and tile that the newer buildings tended to have. I also included the footprints of some old buildings, you can see it in particular in this former neighborhood that became a school yard when they built this large school where I actually went to kindergarten. And they built this in after the fire 1926 or so. It's a landmark building and this school yard has these footprints underneath the concrete. So, if you click on one of these you get a pop up. And this one was post fire according to the data set I acquired it was built 1925 right after the fire and then I was able to build this street view link you click it it takes you to a web browser and Google street view. You can see the school yard today. And over here is the house that was built after the fire. So back to the web map. We have some other layers I'd like to show you we have the open street map back there. We also have let me turn off the polygons there's open street map. We have a Google hybrid layer that came out of QGIS. And we have an air photo from 1922. That was flown by George Elmo Russell, and the original negatives are not available only this printed half toned image so those are that could be improved if we ever get the negative. And here's a water company map that relates some of the same information and I'm showing here the black buildings were burned the white uncolored buildings survived the fire outside this fire perimeter so I've basically created a digital version of this map. And I've got it to a reference tier and exported into leaflet. I'll show you that process. So let's go to QGIS. Here we are in QGIS 3.2. And I've got these various layers I'm going to show you how I organize this project. First I brought in open street map Google satellite Google hybrid. This stamen background layer which I didn't use. We have some other imagery that I didn't end up with some map layers I didn't end up using in that leaflet project, but these were generally brought in using the Q the quick map services with the more services pack enabled. The, let's discuss a little more the, the placement of these buildings here, these don't appear in the current open street map where did I get the footprints well I do reference some sandborn maps. So you see here this is the sandborn 1911 for the area, and that's the locator map. So that tells you number 31 or 32 is the neighborhood in question so I found that one and it's 33, it's here. The households that I then digitized like that. And the so sandborns were used. What, what else we have parcels so I so in order to shade the map, I had to get the year that it was that each structure was built, and those came actually from parcels. Those are the parcel boundaries there. And unfortunately, the county website for parcels you can download a lot of information from the county I'll show you that site quickly here. They have an ArcGIS online site and here's Berkeley, their parcel map you can click on any of these and these are all the attributes they provide. But they don't actually show year built some counties do if you're working elsewhere in the United States, check your county assessor and parcel map and you may have your built directly in here which is very handy. I had to get it from a different source from the historical society they had it or the city, I think, and then I use the APN number to join it to the parcel. That's how I got year built. The TGIS has this project. Notice that I didn't use just parcels I use the household footprint. Those came from Microsoft produced a digital map of all the buildings in the US building footprints, something like 129 million. Building footprints. And it's actually been pulled into open street map. So, you can either download it as GeoJSON from the Microsoft GitHub repository or use this feature in open street map to, you know, my goal was to get these footprints that you see as polygons in QGIS so that I could then connect attributes from the county, the year build attribute and then allow them appropriately and export them to leaflet. So I did that by using this quick OSM plug in for QGIS 3 and I simply, I panned and zoomed to the proper zoom layer. I go into the current extent, and then I use, you know, pick the attributes for building, and there's some quick query history you can find some presets that will help you get the buildings and other urban features that you may want and pull them down locally from open street map so that you can use them in your GIS project. Then I had to link the parcels to the building, and I also needed a single point in order to generate the Google Street View link. So I'll show you how I did that. If we look at the attribute table for my polygons, what I ended up, you know, there were many attributes I didn't need, what I ended up leaving was the open street map unique ID, and then some classification things that I might end up using like a building amenity. The APN is important, that's the unique ID connected to the parcel, and then I left the address, as well as the a few other things about the structures that may be of interest. Then I created, well I got the year built, and as you can see some of them didn't have year built. So I, the ones that I drew the footprint, I had to just assign them to the pre 1923 because they were buildings that were lost like the ones in the school round. The, the other thing that was a little bit tricky was creating the street view link. I thought I'd show you how I did that. What street view requires is simply a URL like this, and it's, it's all the same until that equal sign and then what you need is a single point in latitude, longitude W just 1984 coordinate system and data. So I just had a single point centroid in the parcel polygons generated, you know, convert parcel to point. And then I use the dollar sign X and dollar sign Y calculation to create new columns, and then I appended them. And then I called them for lat column for long, and then I appended them to this information and join them or concatenated them into a single field. And that's our URL. Right. Let's move on to leaflet. I created a leaflet map using QGIS to web this wonderful tool from Tom Chadwin. I created lots of open layers or leaflet open layers was recently updated and it's very feature rich but I'm making a fairly simple viewer here so I use the leaflet viewer and there are a few things that are important to do when you're exporting to leaflet. So I'm recording this in part to remember what I ended up using. First of all, you want to prepare your data for leaflet export by doing a few things that are really using the infrastructure in QGIS. So here in, for example, the way that we label the layers is determined by the settings in here in, for example, here the layer name this is what's going to appear in my leaflet web map, the field attribute form. These are all the attributes in the structures vector file. And if it's hidden it doesn't appear so many of these things like the building area I didn't want it to appear so those are all hidden hidden hidden the year built this one the string I wanted this to use this one because I didn't want to call my in my year built a number. So I converted it to string and that one shows but the original numerical year built doesn't show. Okay. And then let's go ahead and export. So I do want the fire area that's that thick red line but I don't want to pop up. I do want it visible structures is the one that I want to have pop up so it's visible with pop ups and here's my fields. The line labels street view year built, but notes. I added that later. And, you know what I'm going to go back and turn it off, just like I mentioned, because it's a new field I just added so I have not hidden the widget. So there I go and hide it and close that back to export. So here we are. This one, again the fire boundary didn't it didn't store my choice you see so I have to uncheck pop ups. Now the notes is gone. This is the fire area here we go structures notes is gone. Street view. I'm going to have an inline label. That means it's on the same line as the actual value. And then we go down. Water company map I showed you that's a kind of a analog version of the same thing. I had the entire one ready to export but it turns out GitHub limits you to 15 megabyte files which you which is generally going to be rasters those are the big ones right so I had to trim it and I was pretty close to 15 megs. It was like 18 mags inside that I'll just clip it down so I use the raster clipping function. And I clipped it to my, my just to the fire area which you know I lost the perimeter information but it wasn't very important so that's what this one is. This is the same map but clipped to the area we need but no pop ups and I also don't want people to have to see it. I wanted available upon demand but not visible by default so that uncheck this. Same goes for the air photo the Russell 1922 nadir air photo in the 3857 web Mercator projection is. I don't want it to show by default and it was too big again it was more than 15 megs so I created a clip of it right here. And I want to export it, but I don't want it visible by default because it slow to load and I just want it to be available if people want to, you know, pause and let it load. And then down the only other thing from my project and I want to include is, well let's include Google hybrid that's the Google satellite from quick, quick map services, but with street labels, the street names are burned on there. That's Google hybrid but again, no pop ups and not not visible by default. The one I want visible by default with no pop ups is open street map. So that one is vector based so it loads quickly and of course it's, it's the right amount of detail for a background. And it includes the footprints actually so that's the same footprints I'm using so that's a nice conjunction. And then for some reason it keeps trying to enable this one the sandborn 1911 that I showed you that I georeferenced. I don't want it available in there. So let's check that. Now let's look at some of these other settings. I'm going to have the address search available. And these are my layers to locate locate user that's going to create a little icon the droplet icon on the left that allows the user on a mobile device like a tablet or a phone to have their GPS location to zoom to their GPS location. The, okay so the preview just loaded. And I believe that the zoom level that we choose here defines how zoomed in the leaflet map is. Oh it's doing the collapsed layers list to see how this is an icon. I found users don't know that there's so much under there and sometimes they never, they never open it so if there's room I tend to want it expanded by default and just kind of keep it short and to the point because that way, when it's expanded it will be obvious to be users. Another important thing to note is that the template is set to full screen I found that when it was on canvas size which is the default that it will open with when you first use this plugin. Many of these things on the right side of the screen are actually off the screen on a tablet or phone so that's the way to solve that is to make it template full screen. So what I'm going to notice that my project is an EPSG 3857 which is also known as Web Mercator, and that is ideal for exporting to a web map like leaflet, because you're using the, the zoom, I mean the, you're using the projection and coordinate system that you will be using on the web. So here we are with our, our preview, it looks good. Now one thing that's important to check especially if you move your QGIS project around between computers. For example, I've opened this on a, on a work computer right now I have it on a laptop, and the path can change but QGIS to Web stores the old path so I'm going to try to export to a different user and in testing previously it was creating an error so I have found that where it wants to go is into this app data location. Well, I'm going to try to just put it into documents. Settings I generally don't change but this help has a lot of information. And in fact, if you, if you end up having issues, I suggest just exporting multiple times I think I exported this map and doesn't or over a dozen times before I solve the various problems I had with the export and produce something I like. So there it is you can see the PNG it opens the web browser immediately and you can see the zoom level layers. I always turn these off and turn on the different layers and make sure it's doing what's expected. There's the water company. And finally let's zoom in and have a look at some of these pop ups. 580 Hill guard link and it takes you to open street, Google Street View. There it is. One further thing to note is that these are viewable in on a web page, and I have an example here I embedded it. And this is a triple seven backdrop page that I started to write up about the fire. And here it is embedded dynamic map embedded in a content management system. Thank you for watching.