Root Volume
A Worker-Owned Landscape Design/Build
Projects
Gallery
Services
About
Contact
0
Root Volume
A Worker-Owned Landscape Design/Build
Projects
Gallery
Services
About
Contact
0
MapBox Test
<body> <div id="map"></div> <div id="story"></div> <script> var config = { style: 'mapbox://styles/cmccuskey/ckb1klpm20aof1iqpljqmwjbh', accessToken: 'pk.eyJ1IjoiY21jY3Vza2V5IiwiYSI6ImNrOW9odnNsbzAwc3AzZG9kZjN3ZHJ4OWIifQ.h0ezwkUFKMvIQ8zA0fLHhw', showMarkers: 'circle', theme: 'dark', alignment: 'left', byline: '', footer: 'Source: source citations, etc.', chapters: [ { id: 'slug-style-id', title: 'Marcy Voyevod', image: './image/marcy.png', description: 'Marcy’s garden has taken many forms over the years. A concrete walkway cutting through a thirsty grass lawn was transformed into a vegetable patch and rose bed, which in turn, became a wild meadow. She kept a path near the house so the postal service didn’t have to bushwack to reach the mailbox. Though visually abundant, the space was difficult to manage. Inspired by intentional water conservation and drought tolerance, this updated garden is uniquely designed to control rainwater flow from the roof to the plants. A copper rain chain and four downspouts extend from the gutter to feed directly into the swales below, keeping precious water from draining into the sewer system as waste. Taking waste reduction further, the scrap material from the concrete walkway was used to build the urbanite retaining wall. Built with the memory of Marcy’s mother in mind, the garden also has incredible emotional value. A tiny succulent trimming from her mother’s garden was planted in the curb strip and grew into a beautiful plant with coral flowers. Some of her mother’s sculptures are hidden in the rain chain basin as well. One thing that Marcy didn’t account for was the view of the garden at night. Standing in her living room and looking out the front window, she can see her garden illuminated. This calming routine has prompted her to become an unofficial night watch for the neighborhood, letting neighbors know when their headlights are left on or spotting nocturnal fauna.', location: { center: [-122.27226, 37.77402], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [ // { // layer: 'layer-name', // opacity: 1 // } ], onChapterExit: [ // { // layer: 'layer-name', // opacity: 0 // } ] }, { id: 'other_identifier', title: 'Christine Buck', image: './images/christine.png', description: 'Christine had never felt much of a connection with her front yard. The weed-filled grass provided little privacy from the street, required a lot of water, and did nothing to attract birds and bees. The sprinklers were old and hard to manage. She wanted a colorful garden with native and drought-tolerant plants that would thrive with less water. In the past, she had experimented with drought-tolerance in her curb strip, planting gaura, lavender and paprika-colored yarrow – which gave her an idea of what might be possible. Finally, after turning the sprinklers on with a screwdriver one last time, she decided to commit to a complete redesign. Functionally, Christine’s new space is water-conscious. Swales and strategic planting move water effectively from roof to roots. So efficiently, in fact, that several volunteer plants have cropped up, adding a wonderful and surprising richness to the ecosystem. Color was important to her, and one special color, coral, was intentionally celebrated in the planting design. Though she had a vision for what she wanted, Christine’s perception of beauty has changed as her garden has filled in. The varied bloom cycles offer up color throughout the year and the plants have grown together in unexpected ways. She now uses her front porch much more often, thanks to a comfortable privacy created by the visual density of the garden. Whether it’s a passerby smelling the lavender or a neighbor marveling at the blooming salvia, the garden connects her with the neighborhood.', location: { center: [-122.26497, 37.76685], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'rad_dude', title: 'Sue Thomas', image: './images/Sue thomas.png', description: '', location: { center: [-122.22362, 37.83362], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'garden_id', title: 'Eric Delore', image: './images/delore.png', description: '', location: { center: [-122.25281, 37.73827], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'boom_id', title: 'Natalie Baddorf', image: './images/natalie.png', description: 'When Natalie bought her home a few years ago, the backyard was unusable. The fences had toppled with exposure to wind. The ground was all hard-baked clay and cracked concrete, warping as the structure settled into the hillside. It was an unusable space. When she began repairing her fence to reestablish the property line, she had to grind down an old stump that was in the way. This reactivated the tree’s root system, sending up new growth all over the yard and under the house. In the blink of an eye, the barren wasteland has become an unruly forest. Now, a pavestone walkway leads you back to a calm and private space full of bamboo and fruit trees. A dynamic place where one can spend hours alone or host family and friends. In Natalie’s words: “It’s not just a space for me, whenever I look out there I see you all too. You really leave a piece of yourselves in what you do. You definitely show the love and care taken in all your work, unlike any other company I’ve ever worked with. You leave a piece of yourselves in everything and you communicate so well, it’s pretty awesome. I think that’s the most important aspect.”', location: { center: [-122.29367, 37.97061], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'goop_id', title: 'Paul Wolf', image: './images/paul wolf.png', description: '', location: { center: [-122.21769, 37.81208], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'poop_id', title: 'Anne Griffith', image: './images/griffith.png', description: '', location: { center: [-122.19955, 37.78028], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'a_id', title: 'Dafne Simjee', image: './images/simjee.png', description: 'Copy these sections to add to your story.', location: { center: [-122.25331, 37.73872], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'b_id', title: 'Kitty Cat', image: './images/kitty after.png', description: 'Kitty’s house was a century-old when she bought it; beautiful and in need of some work. A lot of building restoration needed to be done before any thought could go into the overgrown front and back spaces. Root Volume came into the picture when she noticed our stonework at one of our earlier project sites. The transformation of old cracked concrete, into a clean urbanite retaining wall resonated ethically with her. The new front garden gets a lot of attention. Visible from the sidewalk, pedestrians (neighbors and strangers alike) comment on their approval constantly. The back is a gathering and meditative space. Cradled by a large pear tree, the patio is spacious enough to accommodate a raucous barbecue and intimate enough for moments of solitary peace. The relationship between the plants and the structural elements mirror this harmony. The plants’ forms are constantly changing with the seasons, while the stone and the deck remain constant.', location: { center: [-122.27198, 37.77039], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'c_id', title: 'Neil and Tony Gehani', image: './images/gehani.png', description: '', location: { center: [-122.43749, 37.74504], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'f_id', title: 'Ella Rosenbloom', image: '', description: '', location: { center: [-122.28514, 37.77267], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, { id: 'g_id', title: 'Danielle Gordon', image: './images/gordon.png', description: '', location: { center: [-122.24564, 37.76682], zoom: 16.00, pitch: 45.00, bearing: -40.00 }, onChapterEnter: [], onChapterExit: [] }, ] }; var layerTypes = { 'fill': ['fill-opacity'], 'line': ['line-opacity'], 'circle': ['circle-opacity', 'circle-stroke-opacity'], 'symbol': ['icon-opacity', 'text-opacity'], 'raster': ['raster-opacity'], 'fill-extrusion': ['fill-extrusion-opacity'] } var alignments = { 'left': 'lefty', 'center': 'centered', 'right': 'righty' } function getLayerPaintType(layer) { var layerType = map.getLayer(layer).type; return layerTypes[layerType]; } function setLayerOpacity(layer) { var paintProps = getLayerPaintType(layer.layer); paintProps.forEach(function(prop) { map.setPaintProperty(layer.layer, prop, layer.opacity); }); } var story = document.getElementById('story'); var features = document.createElement('div'); features.classList.add(alignments[config.alignment]); features.setAttribute('id', 'features'); var header = document.createElement('div'); if (config.title) { var titleText = document.createElement('h1'); titleText.innerText = config.title; header.appendChild(titleText); } if (config.subtitle) { var subtitleText = document.createElement('h2'); subtitleText.innerText = config.subtitle; header.appendChild(subtitleText); } if (config.byline) { var bylineText = document.createElement('p'); bylineText.innerText = config.byline; header.appendChild(bylineText); } if (header.innerText.length > 0) { header.classList.add(config.theme); header.setAttribute('id', 'header'); story.appendChild(header); } config.chapters.forEach((record, idx) => { var container = document.createElement('div'); var chapter = document.createElement('div'); if (record.title) { var title = document.createElement('h3'); title.innerText = record.title; chapter.appendChild(title); } if (record.image) { var image = new Image(); image.src = record.image; chapter.appendChild(image); } if (record.description) { var story = document.createElement('p'); story.innerHTML = record.description; chapter.appendChild(story); } container.setAttribute('id', record.id); container.classList.add('step'); if (idx === 0) { container.classList.add('active'); } chapter.classList.add(config.theme); container.appendChild(chapter); features.appendChild(container); }); story.appendChild(features); var footer = document.createElement('div'); if (config.footer) { var footerText = document.createElement('p'); footerText.innerHTML = config.footer; footer.appendChild(footerText); } if (footer.innerText.length > 0) { footer.classList.add(config.theme); footer.setAttribute('id', 'footer'); story.appendChild(footer); } mapboxgl.accessToken = config.accessToken; const transformRequest = (url) => { const hasQuery = url.indexOf("?") !== -1; const suffix = hasQuery ? "&pluginName=journalismScrollytelling" : "?pluginName=journalismScrollytelling"; return { url: url + suffix } } var map = new mapboxgl.Map({ container: 'map', style: config.style, center: config.chapters[0].location.center, zoom: config.chapters[0].location.zoom, bearing: config.chapters[0].location.bearing, pitch: config.chapters[0].location.pitch, scrollZoom: false, transformRequest: transformRequest }); var marker = new mapboxgl.Marker(); if (config.showMarkers) { marker.setLngLat(config.chapters[0].location.center).addTo(map); } // instantiate the scrollama var scroller = scrollama(); map.on("load", function() { // setup the instance, pass callback functions scroller .setup({ step: '.step', offset: 0.5, progress: true }) .onStepEnter(response => { var chapter = config.chapters.find(chap => chap.id === response.element.id); response.element.classList.add('active'); map.flyTo(chapter.location); if (config.showMarkers) { marker.setLngLat(chapter.location.center); } if (chapter.onChapterEnter.length > 0) { chapter.onChapterEnter.forEach(setLayerOpacity); } }) .onStepExit(response => { var chapter = config.chapters.find(chap => chap.id === response.element.id); response.element.classList.remove('active'); if (chapter.onChapterExit.length > 0) { chapter.onChapterExit.forEach(setLayerOpacity); } }); }); // setup resize event window.addEventListener('resize', scroller.resize); </script> </body>