Module 2 Formstorming

Weekly Activity Template

Kurtis Lauwereys - Welcome to my module 2 formstorming, and final laser cut map.

Project 2

Module 2

PLACEHOLDER TEXT, put a description here or you will lose grades

Week 6

The first thing I tried was playing with the different colours available for different types of layers. I used the default map style as Steve showed in the tutorial, and then I made the roadways a dark green. Next I changed the roads to be dark blue so they would have stronger hue contrast, and then I played with the Point of Interest labels. I was pleased to find out there is a decent amount of control over how many labels appear by changing the density slider. This is what I got when I put it at the highest level, Density 5. Your zoom level will change what you can see too, so if you are in the view above and zoom out too far the individual building levels disappear. Here I discovered Mapbox has interactions and selected a building 'on hover' interaction, changing the colour from the original state to orange. This could be a fun way to point out buildings in an interactive map display. There is also an option for 'on click' which is blue and will be visible in my next image. I highlighed the AA wing in this example because I'm in AA1A right now as I'm working on this. Here you can see I have added an interactive 'on click' state change, and clicked the AA wing, then hovered over the B wing so show the interaction difference. The AA Wing is now blue because I set the 'on-click' to blue, and the 'on hover' is still orange. Turns out the 'Place Labels' also have interactive abilities, not just buildings. Here I set the 'on click' interaction to magenta, and the 'on hover' to red for the section called 'Place Labels' at the very bottom of the default map style. You can't see my cursor because Apple automatically hides it in screenshots, but it's right over the red 'Castle Green' label. I started playing with the styles thinking about London, Ontario, since that was going to be the focus of my project. I played with the detail level by zooming in and out of the downtown core to see what I could capture, and realized I won't be able to get the more intricate details. I think this is okay because I want to focus more on the city as a whole, and not 1 region within the city. I figured out how the 3D views work finally. I captured the current tallest building in Downtown London called Centro Tower B, completed in December 2024 in contrast to Victoria Park, one of the oldest human controlled regions in London. This park was originally part of a British Garrison during the colonization and expansion of Canada. For more info on that, if you are interested, check out <a href='https://en.wikipedia.org/wiki/Victoria_Park,_London,_Ontario' target='_blank' rel='noopener noreferrer'>this Wikipedia page</a> I grabbed a photo of Victoria Park in London, and used it with Cartogram to make this style. I used the brassy/gold for the roads to make them pop against the green, which was selected from tones in the trees to define the land and greenspace colours. I used the pale blue sky for the water, and the white of clouds for the place labels. Victoria Park is a prominent meeting space in London to this day, and has a lot of historical importance, so it will is a strong contender to influence the visual style of my map. I tried using a map background style layer as the bottom most layer and immediately hated it. It took away all of the natural landscape markers like the land and waterways, so it's getting time out until I think of a good use for it, if there is one. I found how to add different data layers, and started messing with it to find the road network in current day London. While I appreciate the amount of detail I was able to get here, this is overwhelming to look at and feels too messy. I need to slim the data down or simplify the styling. Here I was looking to see where the highest density of large scale buildings is in the city, and as expected it was right downtown. I can't show it in 1 image because this is as far as I could zoom out before they vanished, but panning around the city does show large buildings in various parts. This specific frame had the most buildings possible to be captured in a single image based on my screen resolution and a square aspect ratio. This is where I realized if you do the Cartogram photo import to make a style, you get A LOT more layers to play with because of how Mapbox and Cartogram import the colour data from the photo and assign it to layers. I went back to the style and started playing with the layer, trying to get a nice large full capture of London without and labels to mess up the linework. I found a layer for road tunnels and looked around to see if London had any extensive tunnels, because that would be interesting to show. Turns out, this is most of it, excluding 2 more on the east side I couldn't capture in the square ratio. I made them red to contrast so I could find theme easily. I will not be including these in the final because they don't offer any significant visual impact. This is weird and kind of cool. This is showing the urban vs rural areas of London and surrounding county. Everything dark green is manicured nature or untouched wild growth, and the white transparency grid is the void where urban expansion has taken root. Blue represents all sources of water. Here is where I turned the road layer on, to compare it to the urban vs natural regions and see where new development has most recently taken place. The urban vs natural data is slightly out of sync with the roads, making me believe the roads that cross into the green are newer developments that haven't been captured yet. I discovered there are even more granular levels of what you can control within certain layers. This is a copied version of my Cartogram style, and this time I played with the land use filter and turned cemeteries red. The rest that is green is a mix of wooded area, agriculture, parks, grass land, and sandy regions. I also realized at this point the flat colour background can be very useful for exporting individual layers and isolating them from everything else in the map. This is where I turned off everything I didn't need for the London map. I kept the roads, water, and land layers visible but disabled all labels, and I'm zoomed out so far buildings are not visible. I will use this version or something very close to export to Illustrator now that I have an idea of what I want my final project to be. This image illustrates the current urban sprawl of London fairly well, while keeping a beautiful colour pallette. I tried to play with colour scales for elevations, and I REALLY wanted it to be 3D but was unable to make the terrain 3D. The guides online show a way to use MapBox styles that matches Steve's tutorial, but is no longer possible (at least with my free account) as the UI options to select the beginner style with the right dataset is not an option anymore. However this does look pretty cool still. Red is the lowest elevation, set to 2000 meters, and Violet is the highest set to 8000 meters. This is a mountain range along the border of Nepal and China, on the Nepal side. I FIGURED OUT THE 3D. I found the braincells, I am happy. So the tutorials online were very close to how I made this work, but what I was missing is that with the UI change there is a different label for the field you need to input the heights in. I figured that out just by inputting different numbers in all the height fields until eventually one worked. Not a fast way to solve this, but it worked at least. I copied my 3D topology style and compressed it massively to see what London's topology looks like in 3D. I set the range from 200 meters to 300 meeters, going up 25 meters at a time. This pointed out to me that London's highest density development and downtown core is in the flat plain where the river splits 3 ways (river isn't visible in this image, didn't know how to make it show up). That makes a lot of sense to me because back when London was founded settlers already knew a bit about city development, so they would have went with the easiest route to build up first and not spend time transforming the landscape to their needs until later as the city expanded. Here I played with the day cycle and went to look at Toronto, because London didn't have a lot of 3D buildings that stand out as much. I can't tell you why some buildings are much more detailed with lights than others, but I believe it's from the dataset and models imported into the default style. I like how it pulls focus to those buildings and adds visual interest, especially since seeing every building at full detail would give you a lot of 'noise' and it would all blur together with nothing standing out much. I left the labels on to call attention to significant buildings in sight. I learned how to make a heatmap here, using an imported dataset from NASA. This is a heatmap showing meteorite impacts on the planet, and I zoomed in on The United States because it had a lot of diversity in the heatmap density. I made it slightly transparent at 0.4 opacity, so you can see the labels underneath the heatmap, because the original version was fully opaque and you couldn't read anything under it at all. I tried to follow one of the Mapbox official tutorials for making 3D buildings, and then took my knowledge from the 3D topology work I did to colour code them... but you can see that didn't go well. The UI of the tutorial documentation is different than the current UI, and the map data is also a lot different, and the lighting extrusion control is completely gone from the UI now. I was able to get extrusions to work, and I got colour coding to work, but The CN tower looks ridiculous because I couldn't control anything beyond the initial footprint shape extrusion. This could be cool to show heights of buildings quickly, but it loses realism with the blocky shapes. The Rogers center in the bottom left is also hilariously shaped. My scale started at 0 meters being red, and went up in increments of 50 meters going from red to magenta. So I tried another tutorial and yet again it didn't really work because they are out of date with the new UI/dataset options. However I was able to figure this one out on my own fully. This was me controlling the labels. I wanted to see if I could turn off all the labels of a certain type, like all the points of interest, or all the city names, or large scale things like that. I was definitely a bit stressed at the outdated documentation but I found out I can filter the dataset using 'class' as an option, thanks to poking around in the previous photo with the building heights. I set the filter to 'class' and then only selected 'country' which disabled every other label. This gave me a bunch of black dots though, no text labels. I had to then change the data type to 'symbol' because it was set to 'circle'. After that I realized every label went poof, gone to Narnia or something. So I poked around some more and saw the 'text field' section was blank, and had an 'insert data field' section so I gambled and connected it to the 'name' data strings. This worked! We are happy again. Now I was able to change the colour, font type used, etc. so I made it purple with Open Sans Extra Bold font and moved on to the final experimentation. For my final experiment I made a choropleth map to visualize data of the average temperate in the U.S by county. This was one of the more complex things I did since I had to use an outdated style and dataset, so this is how I did it. First I looked online and found a way to access the old styles using the Mapbox API, thanks to a comment on reddit. That was for a different style than the one I needed to follow the tutorial, so I found the name of the one I need and swapped it in the API and thankfully it worked. Next I found a tileset on Mapbox for the average temps in the U.S, and imported it using 'component' then 'data visualization' and selecting the tileset as my source. That component dropdown DOES NOT EXIST in any of the new UI. It was only there because I imported an older unsupported map and all of its data. This dataset was already prepared so to make it look nice all I had to do was turn off every layer except the water and country boundaries. I also had to disable the land layer because it completely hid the data visualization, so I got rid of the transparent areas the visualization didn't cover by adding a background layer and dragging it to the lowest place. Next I played with the colour style settings of the data to make it look more like a real map I've seen on TV or weather websites, and added in the borders for each county to give a clear distinction between the ones that have a very similar colour. The end. I'm happy with what I've learned about Mapbox so far, but I wished their documentation was up to date. Oh also in this visualization, the data is from NOAA and it's tracking the average temperature change between 1895-2019, purple is going into negative temperature changes, and yellow is going into positive temperature changes.

Week 7

put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades put a description here or you will lose grades

Spatial Workshop 1

put a description here or you will lose grades<a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a> put a description here or you will lose grades <div class='container'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div> put a description here or you will lose grades

Spatial Workshop 2

put a description here or you will lose grades <a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a> put a description here or you will lose grades <div class='container'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div> put a description here or you will lose grades

Project 2

Final Project 2 Design

PLACEHOLDER TEXT, put a description here or you will lose grades

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit
×

Powered by w3.css