├── README.md
├── css
    └── style.css
├── images
    ├── about.png
    ├── animate.png
    ├── builtla_cover.png
    ├── builtla_logo.png
    ├── builtla_logo_v2.png
    ├── builtla_mobile.png
    ├── time1909.png
    ├── time1910.png
    ├── time1920.png
    ├── time1930.png
    ├── time1940.png
    ├── time1950.png
    ├── time1960.png
    ├── time1970.png
    ├── time1980.png
    ├── time1990.png
    ├── time2000.png
    └── time_mobile.png
├── index.html
├── index_2014.html
├── index_dep.html
└── indexgl_touch.html


/README.md:
--------------------------------------------------------------------------------
 1 | ![alt text](https://github.com/cityhubla/LA_Building_Age/blob/master/images/builtla_cover.png)
 2 | # built : Los Angeles
 3 | 
 4 | [LIVE DEMO](http://cityhubla.github.io/LA_Building_Age/)
 5 | 
 6 | <b>This map was made to explore the potential uses of opensource mapping tools like QGIS, Mapbox, and Leaflet to be used as iterative tools to reframe the issues in Land Use, Planning and Public Policy.</b>
 7 | 
 8 | HTML to load Map tiles from cityhub server host // Breakdown on the processes involved in developing map will be up soon.
 9 | 
10 | Since 2008, there are over 2.9 million buildings in Los Angeles County. This visualization gives an overall look at the age of the building stock as of 2008.
11 | Each building is shaded according to the time they were built. 
12 | Map made with Mapbox Studio and MapboxGL by [Omar Ureta](http://www.theworks.la), inspired by Portland, Oregon: The Age of a City
13 | 
14 | ### Method
15 | * The display of the building outlines with their age was done by linking the two datasets (LARIAC and Local Roll) by their APN (Assessor's Parcel Number). Additionally the street number, name and city were linked through the two datasets.
16 | 
17 | ### Updates
18 | 7.2.2015 // 2014 vector tiles made using Mapbox Studio, most buildings now have data on years built, government buildings still null while some buildings with no data have disappeared altogether. [Working demo](http://cityhubla.github.io/LA_Building_Age/index_2014.html) here. Data discrepancies are linking 2008 building outlines with 2014 parcel data. This 6 year gap between the two will not show buildings new and demoed between 2009 and 2014. Explorations in styling the demoed buildings are being considered. 
19 | 
20 | 7.2.2015 // [MapbogGL.js](https://github.com/mapbox/mapbox-gl-js) has been updated to version 0.8.1, allowing mobile touch command. [Working demo](http://cityhubla.github.io/LA_Building_Age/indexgl_touch.html) here.
21 | 
22 | ### Future Updates
23 | * Map will be updated to the 2014 Local Roll made available on the [LA County GIS Data Portal](http://egis3.lacounty.gov/dataportal/2015/03/10/assessor-parcel/)
24 | * A search bar will be added to find specific addresses
25 | * Building Uses! The data behind this map also contains the use of every building, (single family homes, multifamily housing, retail, industrial warehouse, schools)
26 | 
27 | ### Notes
28 |  * Grey areas indicate no data on year building was built.
29 |  * The addresses shown are according to what the 2011 LA County Assessor Roll Data had to the corresponding Parcel Number. Please check with the [LA County APN Property Search](http://maps.assessor.lacounty.gov/GVH_2_2/Index.html?configBase=http://maps.assessor.lacounty.gov/Geocortex/Essentials/REST/sites/PAIS/viewers/PAIS_hv/virtualdirectory/Resources/Config/Default) to get a more accurate view of your property.
30 |  * <b>Please contact me</b> if you intend to use the map as a baselayer for other work. I will be changing the access keys and IP frequently. The intent of posting the code on github is for mappers to understand how this got built with mapbox-gl and the new styling of the features.
31 |  
32 | ### Known Inaccuracies
33 | * Building outline data shows what existed in 2008, buildings during the century may have been replaced and is not shown with this map.
34 | * Parcels that have more than one building may contain dates of one of the buildings as the local roll contained only one.
35 | * There are missing dates on buildings even though their date is known through the [LA County APN Property Search](http://maps.assessor.lacounty.gov/GVH_2_2/Index.html?configBase=http://maps.assessor.lacounty.gov/Geocortex/Essentials/REST/sites/PAIS/viewers/PAIS_hv/virtualdirectory/Resources/Config/Default). The data worked with was from the 2011 parcel local roll, a look at the now released 2014 local roll through the County's Open Data portal shows that many have been updated with dates. My apartment for example did not have a date on 2011 local roll and now does on the 2014 set. Updates to the map will reflect the updated set.
36 | * There is a 3 (three) year gap between the Local Roll data (2011) and the Building Outlines (2008). Properties that have new buildings since 2008 will still have the building outline from 2008. The most recent building on the 2011 Local Roll was built in 2009 bringing the gap close to 1 year. The age map will be updated to remove this gap.
37 | * <b>Please report any other inaccuracies in the Issues section of this repo. Many of these can be brought to the attention of LA County and help them improve their datasets.</b>
38 | 
39 | ### From these sources:
40 | 
41 |   * Building Outline Data: [Los Angeles County GIS Data Portal LARAIC2](http://egis3.lacounty.gov/dataportal/2011/04/28/countywide-building-outlines/) 
42 |   * Age attributes: [2011 LA County Assessor Parcel Local Roll](http://gis.ats.ucla.edu/Mapshare/)
43 |   * The disclaimer from using these resources from the County are as follows: The data available on this website, including Geographic Information Systems (“GIS”) data, maps, tables, numbers, graphics, and text (hereinafter collectively referred to as the “Information”), is provided AS IS and for you to view, access, copy, distribute and otherwise use the Information at your own risk. The County of Los Angeles, its departments and its affiliated entities, elected and appointed officers, officials, employees and agents (hereinafter referred to as the “County”) make no representation or warranty of any kind regarding this website or Information, explicit or implied.
44 |  
45 | Using this map will ask more questions about LA's development and it should continue to evolve and explore these inquiries. Maps should be [transformative agents](http://www.thepolisblog.org/2010/03/mapping-as-transformative-agent-in.html)
46 | 
47 | #### Help improve this map! 
48 | The building outline data is from 2008, there is a [2014](http://egis3.lacounty.gov/dataportal/2014/10/16/countywide-building-outlines-2014/) set from the county that is not public. An effort is underway to prepare the import of the 2008 buildings and hopefully the 2014 set to [OpenStreetMap](https://github.com/osmlab/labuildings).
49 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
  3 | /* CSS Document */		
  4 | body { margin: 0; padding: 0;}
  5 | #map { position:absolute; top:0; bottom:0; width:100%; }
  6 | 
  7 | a:visited{
  8 | color:aqua;
  9 | }
 10 | 
 11 | a:link{
 12 | color:dodgerblue;
 13 | }
 14 | 
 15 | button {
 16 |         position: relative;
 17 |         left:0px;    
 18 |         margin: 2px auto;
 19 |         width: 50%;
 20 |         height: 20px;
 21 |         border: none;
 22 |         border-radius: 3px;
 23 |         font-size: 12px;
 24 |         text-align: center;
 25 |         color: #fff;
 26 |         }
 27 | 
 28 | #info_mobile {
 29 | display:none
 30 | }
 31 | 
 32 | #info {
 33 |         font-family: Sans-Serif;
 34 |         position: absolute;
 35 |         top: 20px;
 36 |         left: 20px;
 37 |         color: #FFF;
 38 |         width: 570px;
 39 |         height: 110px;
 40 | }
 41 | 
 42 | #timeline{
 43 |   position: fixed;
 44 |   top: 105px;
 45 | }
 46 | 
 47 | #timeline img {
 48 | float: left;
 49 | }
 50 | 
 51 | #icons{
 52 |   position: fixed;
 53 |   top: 20px;
 54 |   left: 580px;
 55 |   width: 55px;
 56 | }
 57 | 
 58 | #icons img{
 59 | float:left;
 60 | }
 61 | 
 62 | #builtbox {
 63 |   background-color: black;
 64 |   width: 617px;
 65 |   height: 25px;
 66 |   padding-top: 5px;
 67 |   text-align: center;
 68 | }
 69 | 
 70 | #aboutbox {
 71 |   display: none;
 72 |   font-family: Sans-Serif;
 73 |   position: fixed;
 74 |   top: 20px;
 75 |   padding-left: 13px;
 76 |   color: #FFF;
 77 |   width: 548px;
 78 |   height: 320px;
 79 |   background-color: black;
 80 | }
 81 | 
 82 | #animate_mobile{
 83 | display:none;
 84 | }
 85 | 
 86 | .ui-button {
 87 |   background:#3887BE;
 88 |   color:#FFF;
 89 |   display:block;
 90 |   position:absolute;
 91 |   top:50%;left:50%;
 92 |   width:160px;
 93 |   margin:-20px 0 0 -80px;
 94 |   z-index:100;
 95 |   text-align:center;
 96 |   padding:10px;
 97 |   border:1px solid rgba(0,0,0,0.4);
 98 |   border-radius:3px;
 99 |   }
100 |   .ui-button:hover {
101 |     background:#3074a4;
102 |     color:#fff;
103 |     }
104 | 
105 |         
106 |     .offbutton {
107 |     background-color: #ff7911;
108 |     }
109 | 
110 |  #divback{
111 | background:#000;
112 | }
113 | 
114 | @media (max-width:800px) {
115 |  
116 | #info {
117 | display:none;
118 | }
119 | 
120 | #icons{
121 |   position: fixed;
122 |   top: 0px;
123 |   left: 221px;
124 |   width:100%;    
125 | }
126 |     
127 | #icons img{
128 |   float: left;
129 |   width: 50px;
130 | }     
131 |     
132 | #info_mobile {
133 |     display:block;
134 | 	height:70px;
135 |     text-shadow:none;
136 |     left:0px;
137 |     top:0px;  
138 | 	position: absolute;
139 |     padding: 0px;
140 |     background: #231f20;
141 |     color: #FFF;
142 |     }
143 | #aboutboxmobile {  
144 |   display:none;
145 |   font-family: Sans-Serif;
146 |   position: fixed;
147 |   top: 70px;
148 |   padding-left: 13px;
149 |   color: #FFF;
150 |   width: 80%;
151 |   height: 80%;
152 |   background-color: black;
153 |   overflow: scroll;
154 | }
155 |     
156 | #infobox{
157 |     display:none;
158 |     }
159 |     
160 | #animate_mobile{
161 |     display:block;
162 |     position: fixed;
163 |     width: 100%;
164 |     bottom: 7%;
165 |    }
166 | button {
167 |         margin: 2px auto;
168 |         height: 50px;
169 |         width: 100%;
170 |         }
171 | #divback{
172 |     background:#22ecf0;
173 |     }
174 | }


--------------------------------------------------------------------------------
/images/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/about.png


--------------------------------------------------------------------------------
/images/animate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/animate.png


--------------------------------------------------------------------------------
/images/builtla_cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/builtla_cover.png


--------------------------------------------------------------------------------
/images/builtla_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/builtla_logo.png


--------------------------------------------------------------------------------
/images/builtla_logo_v2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/builtla_logo_v2.png


--------------------------------------------------------------------------------
/images/builtla_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/builtla_mobile.png


--------------------------------------------------------------------------------
/images/time1909.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1909.png


--------------------------------------------------------------------------------
/images/time1910.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1910.png


--------------------------------------------------------------------------------
/images/time1920.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1920.png


--------------------------------------------------------------------------------
/images/time1930.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1930.png


--------------------------------------------------------------------------------
/images/time1940.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1940.png


--------------------------------------------------------------------------------
/images/time1950.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1950.png


--------------------------------------------------------------------------------
/images/time1960.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1960.png


--------------------------------------------------------------------------------
/images/time1970.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1970.png


--------------------------------------------------------------------------------
/images/time1980.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1980.png


--------------------------------------------------------------------------------
/images/time1990.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time1990.png


--------------------------------------------------------------------------------
/images/time2000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time2000.png


--------------------------------------------------------------------------------
/images/time_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityhubla/LA_Building_Age/032d890b47d77029cdc51bd0a7451640b9453bb9/images/time_mobile.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Age of Los Angeles</title>
  5 |     <meta charset="utf-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
 10 |     />
 11 |     <link
 12 |       href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
 13 |       rel="stylesheet"
 14 |       type="text/css"
 15 |     />
 16 |     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 17 |     <link rel="stylesheet" type="text/css" href="css/style.css" />
 18 |     <script src="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
 19 |     <link
 20 |       href="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css"
 21 |       rel="stylesheet"
 22 |     />
 23 |     <script
 24 |       type="text/javascript"
 25 |       src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"
 26 |     ></script>
 27 |   </head>
 28 |   <script>
 29 |     (function (i, s, o, g, r, a, m) {
 30 |       i["GoogleAnalyticsObject"] = r;
 31 |       (i[r] =
 32 |         i[r] ||
 33 |         function () {
 34 |           (i[r].q = i[r].q || []).push(arguments);
 35 |         }),
 36 |         (i[r].l = 1 * new Date());
 37 |       (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
 38 |       a.async = 1;
 39 |       a.src = g;
 40 |       m.parentNode.insertBefore(a, m);
 41 |     })(
 42 |       window,
 43 |       document,
 44 |       "script",
 45 |       "//www.google-analytics.com/analytics.js",
 46 |       "ga"
 47 |     );
 48 | 
 49 |     ga("create", "UA-63392200-1", "auto");
 50 |     ga("send", "pageview");
 51 |   </script>
 52 |   <body>
 53 |     <div id="map"></div>
 54 |     <div id="info_mobile">
 55 |       <img src="images/builtla_mobile.png" />
 56 |       <div id="icons">
 57 |         <img
 58 |           src="images/about.png"
 59 |           onclick='aboutfunc("#aboutboxmobile")'
 60 |           id="abouticon"
 61 |         />
 62 |         <img
 63 |           src="images/animate.png"
 64 |           onclick="animate2(),animate2()"
 65 |           id="divback"
 66 |         />
 67 |       </div>
 68 |       <div id="aboutboxmobile">
 69 |         <h3>
 70 |           The mobile version does not allow pan or zoom yet, please use a
 71 |           desktop for full use
 72 |         </h3>
 73 |         <p>
 74 |           Built:LA created by <a href="https://www.theworks.la/">Omar Ureta</a
 75 |           ><a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>,
 76 |           inspired by
 77 |           <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531"
 78 |             >Portland, Oregon: The Age of a City</a
 79 |           >
 80 |           Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>.
 81 |           <a href="http://openstreetmap.org">OpenStreetMap</a>, under
 82 |           <a href="http://www.openstreetmap.org/copyright">ODbL</a>.
 83 |         </p>
 84 |         <p>
 85 |           Thanks goes out to <a href="http://maptime.io/">Maptime</a> for
 86 |           opening the doors to amazing cartographic possibilities!!
 87 |         </p>
 88 | 
 89 |         <p>
 90 |           Code and map research can be found on
 91 |           <a href="https://github.com/cityhubla/LA_Building_Age">Github</a>
 92 |         </p>
 93 |       </div>
 94 |     </div>
 95 |     <div id="info">
 96 |       <img src="images/builtla_logo_v2.png" />
 97 |       <div id="timeline">
 98 |         <img
 99 |           src="images/time1909.png"
100 |           onclick='changestyle("tileset1900",this)'
101 |           id="tileset1900"
102 |         />
103 |         <img
104 |           src="images/time1910.png"
105 |           onclick='changestyle("tileset1910",this)'
106 |           id="tileset1910"
107 |         />
108 |         <img
109 |           src="images/time1920.png"
110 |           onclick='changestyle("tileset1920",this)'
111 |           id="tileset1920"
112 |         />
113 |         <img
114 |           src="images/time1930.png"
115 |           onclick='changestyle("tileset1930",this)'
116 |           id="tileset1930"
117 |         />
118 |         <img
119 |           src="images/time1940.png"
120 |           onclick='changestyle("tileset1940",this)'
121 |           id="tileset1940"
122 |         />
123 |         <img
124 |           src="images/time1950.png"
125 |           onclick='changestyle("tileset1950",this)'
126 |           id="tileset1950"
127 |         />
128 |         <img
129 |           src="images/time1960.png"
130 |           onclick='changestyle("tileset1960",this)'
131 |           id="tileset1960"
132 |         />
133 |         <img
134 |           src="images/time1970.png"
135 |           onclick='changestyle("tileset1970",this)'
136 |           id="tileset1970"
137 |         />
138 |         <img
139 |           src="images/time1980.png"
140 |           onclick='changestyle("tileset1980",this)'
141 |           id="tileset1980"
142 |         />
143 |         <img
144 |           src="images/time1990.png"
145 |           onclick='changestyle("tileset1990",this)'
146 |           id="tileset1990"
147 |         />
148 |         <img
149 |           src="images/time2000.png"
150 |           onclick='changestyle("tileset2000",this)'
151 |           id="tileset2000"
152 |         />
153 |       </div>
154 |       <div id="icons">
155 |         <img
156 |           src="images/about.png"
157 |           onclick='aboutfunc("#aboutbox")'
158 |           id="abouticon"
159 |         />
160 |         <img
161 |           src="images/animate.png"
162 |           onclick="animate2(),animate2()"
163 |           id="divback"
164 |         />
165 |       </div>
166 |       <div id="builtbox">Hover over a building for year built</div>
167 |       <div id="infobox"></div>
168 | 
169 |       <div id="aboutbox">
170 |         <p>
171 |           Built:LA developed by
172 |           <a href="http://www.theworks.la/">Omar Ureta</a>
173 |           <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871">
174 |             (Linkedin)</a
175 |           >. Made with
176 |           <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>,
177 |           inspired by
178 |           <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531"
179 |             >Portland, Oregon: The Age of a City</a
180 |           >
181 |           Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>.
182 |           <a href="http://openstreetmap.org">OpenStreetMap</a>, under
183 |           <a href="http://www.openstreetmap.org/copyright">ODbL</a>.
184 |         </p>
185 |         <p>
186 |           Thanks goes out to <a href="http://maptime.io/">Maptime</a> for
187 |           opening the doors to amazing cartographic possibilities!!
188 |         </p>
189 | 
190 |         <p>
191 |           Code and map update logs can be found on
192 |           <a href="https://github.com/cityhubla/LA_Building_Age">Github</a>
193 |         </p>
194 |         <p>
195 |           Data // Building Outlines:
196 |           <a
197 |             href="http://egis3.lacounty.gov/dataportal/2011/04/28/countywide-building-outlines/"
198 |             >LA County GIS Data Portal</a
199 |           >, Age Attributes
200 |           <a href="http://gis.ats.ucla.edu/Mapshare/"
201 |             >LA County Assessor Local Roll</a
202 |           >
203 |           (Note: There were buildings that had no data on the time they were
204 |           built. They are shown, only greyed out.)
205 |         </p>
206 |         <p>
207 |           This map uses WEBGL, which is optimized for Chrome and Firefox, Safari
208 |           users need to enable
209 |           <a href="https://discussions.apple.com/thread/3300585?start=0"
210 |             >WEBGL</a
211 |           >
212 |         </p>
213 |       </div>
214 |     </div>
215 | 
216 |     <script>
217 |       //Server Address will change every month
218 |       var mapDiv = "map";
219 |       var tileset0000 =
220 |         "https://builtla.planninglabs.la/nodata/{z}/{x}/{y}.pbf";
221 |       var tileset1890 =
222 |         "https://builtla.planninglabs.la/1890-1899/{z}/{x}/{y}.pbf";
223 |       var tileset1900 =
224 |         "https://builtla.planninglabs.la/1900-1909/{z}/{x}/{y}.pbf";
225 |       var tileset1910 =
226 |         "https://builtla.planninglabs.la/1910-1919/{z}/{x}/{y}.pbf";
227 |       var tileset1920 =
228 |         "https://builtla.planninglabs.la/1920-1929/{z}/{x}/{y}.pbf";
229 |       var tileset1930 =
230 |         "https://builtla.planninglabs.la/1930-1939/{z}/{x}/{y}.pbf";
231 |       var tileset1940 =
232 |         "https://builtla.planninglabs.la/1940-1949/{z}/{x}/{y}.pbf";
233 |       var tileset1950 =
234 |         "https://builtla.planninglabs.la/1950-1959/{z}/{x}/{y}.pbf";
235 |       var tileset1960 =
236 |         "https://builtla.planninglabs.la/1960-1969/{z}/{x}/{y}.pbf";
237 |       var tileset1970 =
238 |         "https://builtla.planninglabs.la/1970-1979/{z}/{x}/{y}.pbf";
239 |       var tileset1980 =
240 |         "https://builtla.planninglabs.la/1980-1989/{z}/{x}/{y}.pbf";
241 |       var tileset1990 =
242 |         "https://builtla.planninglabs.la/1990-1999/{z}/{x}/{y}.pbf";
243 |       var tileset2000 =
244 |         "https://builtla.planninglabs.la/2000-2009/{z}/{x}/{y}.pbf";
245 |       var tilesetcities =
246 |         "https://builtla.planninglabs.la/cities/{z}/{x}/{y}.pbf";
247 |       var bkbackground = "#4f4d4d";
248 | 
249 |       //Change Button Color
250 |       function changestyle(var1, btn) {
251 |         var layerID = var1;
252 |         console.log(btn);
253 |         var visible = map.getLayoutProperty(layerID, "visibility");
254 |         console.log(layerID);
255 |         if (visible === "visible") {
256 |           $(btn).css("opacity", ".5");
257 |           map.setLayoutProperty(layerID, "visibility", "none");
258 |         } else {
259 |           map.setLayoutProperty(layerID, "visibility", "visible");
260 |           $(btn).css("opacity", "1");
261 |         }
262 |       }
263 | 
264 |       //Show About Information
265 |       function aboutfunc(box) {
266 |         $(box).toggle();
267 |       }
268 | 
269 |       var mapStyle = {
270 |         version: 8,
271 |         sources: {
272 |           // mapbox: {
273 |           //   type: "vector",
274 |           //   tiles: "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6",
275 |           // },
276 |           tileset1890: {
277 |             type: "vector",
278 |             tiles: [tileset1890],
279 |           },
280 |           tileset1900: {
281 |             type: "vector",
282 |             tiles: [tileset1900],
283 |           },
284 |           tileset1910: {
285 |             type: "vector",
286 |             tiles: [tileset1910],
287 |           },
288 |           tileset1920: {
289 |             type: "vector",
290 |             tiles: [tileset1920],
291 |           },
292 |           tileset1930: {
293 |             type: "vector",
294 |             tiles: [tileset1930],
295 |           },
296 |           tileset1940: {
297 |             type: "vector",
298 |             tiles: [tileset1940],
299 |           },
300 |           tileset1950: {
301 |             type: "vector",
302 |             tiles: [tileset1950],
303 |           },
304 |           tileset1960: {
305 |             type: "vector",
306 |             tiles: [tileset1960],
307 |           },
308 |           tileset1970: {
309 |             type: "vector",
310 |             tiles: [tileset1970],
311 |           },
312 |           tileset1980: {
313 |             type: "vector",
314 |             tiles: [tileset1980],
315 |           },
316 |           tileset1990: {
317 |             type: "vector",
318 |             tiles: [tileset1990],
319 |           },
320 |           tileset2000: {
321 |             type: "vector",
322 |             tiles: [tileset2000],
323 |           },
324 |           tileset0000: {
325 |             type: "vector",
326 |             tiles: [tileset0000],
327 |           },
328 |           tilesetcities: {
329 |             type: "vector",
330 |             tiles: [tilesetcities],
331 |           },
332 |         },
333 |         layers: [
334 |           {
335 |             id: "background",
336 |             paint: {
337 |               "background-color": "#000",
338 |             },
339 |             type: "background",
340 |           },
341 |           {
342 |             id: "tileset1890",
343 |             source: "tileset1890",
344 |             "source-layer": "1890-1899",
345 |             paint: {
346 |               "fill-color": "#d7d4d4",
347 |             },
348 |             type: "fill",
349 |           },
350 |           {
351 |             id: "tileset1900",
352 |             source: "tileset1900",
353 |             "source-layer": "1900-1909",
354 |             paint: {
355 |               "fill-color": "#22ecf0",
356 |             },
357 |             type: "fill",
358 |             layout: {
359 |               visibility: "visible",
360 |             },
361 |           },
362 |           {
363 |             id: "tileset1910",
364 |             source: "tileset1910",
365 |             "source-layer": "1910-1919",
366 |             paint: {
367 |               "fill-color": "#19d1fd",
368 |             },
369 |             type: "fill",
370 |             layout: {
371 |               visibility: "visible",
372 |             },
373 |           },
374 |           {
375 |             id: "tileset1920",
376 |             source: "tileset1920",
377 |             "source-layer": "1920-1929",
378 |             paint: {
379 |               "fill-color": "#14b1fd",
380 |             },
381 |             type: "fill",
382 |             layout: {
383 |               visibility: "visible",
384 |             },
385 |           },
386 |           {
387 |             id: "tileset1930",
388 |             source: "tileset1930",
389 |             "source-layer": "1930-1939",
390 |             paint: {
391 |               "fill-color": "#2c7fdb",
392 |             },
393 |             type: "fill",
394 |             layout: {
395 |               visibility: "visible",
396 |             },
397 |           },
398 |           {
399 |             id: "tileset1940",
400 |             source: "tileset1940",
401 |             "source-layer": "1940-1949",
402 |             paint: {
403 |               "fill-color": "#3d52bf",
404 |             },
405 |             type: "fill",
406 |             layout: {
407 |               visibility: "visible",
408 |             },
409 |           },
410 |           {
411 |             id: "tileset1950",
412 |             source: "tileset1950",
413 |             "source-layer": "1950-1959",
414 |             paint: {
415 |               "fill-color": "#6539b3",
416 |             },
417 |             type: "fill",
418 |             layout: {
419 |               visibility: "visible",
420 |             },
421 |           },
422 |           {
423 |             id: "tileset1960",
424 |             source: "tileset1960",
425 |             "source-layer": "1960-1969",
426 |             paint: {
427 |               "fill-color": "#a032b2",
428 |             },
429 |             type: "fill",
430 |             layout: {
431 |               visibility: "visible",
432 |             },
433 |           },
434 |           {
435 |             id: "tileset1970",
436 |             source: "tileset1970",
437 |             "source-layer": "1970-1979",
438 |             paint: {
439 |               "fill-color": "#d124a9",
440 |             },
441 |             type: "fill",
442 |             layout: {
443 |               visibility: "visible",
444 |             },
445 |           },
446 |           {
447 |             id: "tileset1980",
448 |             source: "tileset1980",
449 |             "source-layer": "1980-1989",
450 |             paint: {
451 |               "fill-color": "#fd4dab",
452 |             },
453 |             type: "fill",
454 |             layout: {
455 |               visibility: "visible",
456 |             },
457 |           },
458 |           {
459 |             id: "tileset1990",
460 |             source: "tileset1990",
461 |             "source-layer": "1990-1999",
462 |             paint: {
463 |               "fill-color": "#fea7d4",
464 |             },
465 |             type: "fill",
466 |             layout: {
467 |               visibility: "visible",
468 |             },
469 |           },
470 |           {
471 |             id: "tileset2000",
472 |             source: "tileset2000",
473 |             "source-layer": "2000-2009",
474 |             paint: {
475 |               "fill-color": "#ff7911",
476 |             },
477 |             type: "fill",
478 |             layout: {
479 |               visibility: "visible",
480 |             },
481 |           },
482 |           {
483 |             id: "nodata",
484 |             source: "tileset0000",
485 |             "source-layer": "NODATE",
486 |             paint: {
487 |               "fill-color": "#d7d4d4",
488 |               "fill-opacity": 0.4,
489 |             },
490 |             type: "fill",
491 |           },
492 |           {
493 |             id: "tilesetcities",
494 |             source: "tilesetcities",
495 |             "source-layer": "cities",
496 |             paint: {
497 |               "line-color": "#FFF",
498 |               "line-opacity": 0.25,
499 |             },
500 |             type: "line",
501 |           },
502 |         ],
503 |       };
504 | 
505 |       mapboxgl.accessToken =
506 |         "pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA";
507 |       var map = new mapboxgl.Map({
508 |         container: "map", // container id
509 |         style: mapStyle, //stylesheet location
510 |         center: [-118.2621, 34.0267], // starting position
511 |         zoom: 12, // starting zoom
512 |         minZoom: 12,
513 |         hash: true,
514 |       });
515 | 
516 |       map.on("error", () => {
517 |         console.log("Nothing at this location");
518 |       });
519 | 
520 |       map.on("mousemove", (e) => {
521 |         const features = map.queryRenderedFeatures(e.point);
522 |         if (features[0]) {
523 |           document.getElementById("builtbox").innerHTML =
524 |             features[0].properties.address +
525 |             " was built in " +
526 |             features[0].properties.YearBuilt;
527 |         }
528 |       });
529 | 
530 |       map.on("click", (e) => {
531 |         const features = map.queryRenderedFeatures(e.point);
532 |         if (features[0]) {
533 |           alert(
534 |             features[0].properties.address +
535 |               " was built in " +
536 |               features[0].properties.YearBuilt
537 |           );
538 |         }
539 |       });
540 | 
541 |       var yearArray = [
542 |         "tileset1900",
543 |         "tileset1910",
544 |         "tileset1920",
545 |         "tileset1930",
546 |         "tileset1940",
547 |         "tileset1950",
548 |         "tileset1960",
549 |         "tileset1970",
550 |         "tileset1980",
551 |         "tileset1990",
552 |         "tileset2000",
553 |       ];
554 |       var yearLength = yearArray.length;
555 |       var tx;
556 |       function animate2() {
557 |         tx = 1000;
558 |         for (var i = 0; i < yearLength; i++) {
559 |           var visible = map.getLayoutProperty(yearArray[i], "visibility");
560 |           if (visible === "none") {
561 |             animate3(yearArray[i]);
562 |             tx = tx + 1000;
563 |           } else {
564 |             map.setLayoutProperty(yearArray[i], "visibility", "none");
565 |             $("#" + yearArray[i]).css("opacity", ".5");
566 |           }
567 |         }
568 |       }
569 | 
570 |       function animate3(layerID) {
571 |         console.log(tx);
572 |         setTimeout(function () {
573 |           map.setLayoutProperty(layerID, "visibility", "visible");
574 |           $("#" + layerID).css("opacity", "1");
575 |         }, tx);
576 |       }
577 |     </script>
578 |   </body>
579 | </html>
580 | 


--------------------------------------------------------------------------------
/index_2014.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Age of Los Angeles</title>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  8 | 	<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
  9 |     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 10 |     <link rel="stylesheet" type="text/css" href="css/style.css" />
 11 |     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.7.0/mapbox-gl.js'></script>
 12 |     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.7.0/mapbox-gl.css' rel='stylesheet' />
 13 | 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
 14 | </head>
 15 | <script>
 16 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 17 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 18 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 19 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 20 | 
 21 |   ga('create', 'UA-63392200-1', 'auto');
 22 |   ga('send', 'pageview');
 23 | 
 24 | </script>    
 25 | <body>
 26 | 	<div id="map"></div>
 27 |     <div id="info_mobile"><img src="images/builtla_mobile.png">
 28 |         <div id="icons">
 29 |             <img src="images/about.png" onclick='aboutfunc("#aboutboxmobile")' id="abouticon">
 30 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 31 |         </div>   
 32 | <div id="aboutboxmobile">
 33 | <h3>The mobile version does not allow pan or zoom yet, please use a desktop for full use</h3>
 34 | <p>Built:LA developed by <a href="http://www.theworks.la/">Omar Ureta</a> <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871"> (Linkedin)</a> of the Urban Policy Collective @ Roschen Van Cleve Architects, founded by Bill Roschen, FAIA and Christi Van Cleve, AIA. Made with <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 35 | </p>
 36 | <p>Code and map research can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>          
 37 |     </div>
 38 |     </div>
 39 |     <div id="info">
 40 |         <img src="images/builtla_logo.png">
 41 |         <div id="timeline">
 42 |             <img src="images/time1909.png" onclick='changestyle("y1900",this)' id="y1909">
 43 |             <img src="images/time1910.png" onclick='changestyle("y1910",this)' id='y1910'>
 44 |             <img src="images/time1920.png" onclick='changestyle("y1920",this)' id='y1920'>
 45 |             <img src="images/time1930.png" onclick='changestyle("y1930",this)' id='y1930'>
 46 |             <img src="images/time1940.png" onclick='changestyle("y1940",this)' id='y1940'>
 47 |             <img src="images/time1950.png" onclick='changestyle("y1950",this)' id='y1950'>
 48 |             <img src="images/time1960.png" onclick='changestyle("y1960",this)' id='y1960'>
 49 |             <img src="images/time1970.png" onclick='changestyle("y1970",this)' id='y1970'>
 50 |             <img src="images/time1980.png" onclick='changestyle("y1980",this)' id='y1980'>
 51 |             <img src="images/time1990.png" onclick='changestyle("y1990",this)' id='y1990'>
 52 |             <img src="images/time2000.png" onclick='changestyle("y2000",this)' id='y2000'>
 53 |         </div>
 54 |         <div id="icons">
 55 |             <img src="images/about.png" onclick='aboutfunc("#aboutbox")' id="abouticon">
 56 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 57 |         </div>
 58 |         <div id="builtbox"></div> 
 59 |         <div id="infobox"></div>
 60 |         
 61 |         <div id="aboutbox">
 62 |             <p>Built:LA developed by <a href="http://www.theworks.la/">Omar Ureta</a> <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871"> (Linkedin)</a> of the <a href="http://www.rvca.org">Urban Policy Collective @ Roschen Van Cleve Architects</a>, founded by Bill Roschen, FAIA and Christi Van Cleve, AIA. Made with <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 63 | </p>
 64 | <p>Code and map update logs can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>        
 65 | <p>Data // Building Outlines: <a href="http://egis3.lacounty.gov/dataportal/2011/04/28/countywide-building-outlines/">LA County GIS Data Portal</a>, Age Attributes <a href="http://gis.ats.ucla.edu/Mapshare/">LA County Assessor Local Roll</a> (Note: There were buildings that had no data on the time they were built. They are shown, only greyed out.)</p><p>This map uses WEBGL, which is optimized for Chrome and Firefox, Safari users need to enable <a href="https://discussions.apple.com/thread/3300585?start=0">WEBGL</a></p>    
 66 |     </div>
 67 |     </div>
 68 | 
 69 | 
 70 | 	<script>
 71 |             
 72 | 
 73 |             //Server Address will change every month
 74 | 			var mapDiv = 'map';
 75 |             var tileset0000= "http://104.236.162.144:8000/v2_nodates/";
 76 |             var tileset1890= "http://104.236.162.144:8000/v2_1890-1899/";
 77 |             var tileset1900= "http://104.236.162.144:8000/v2_1900-1909/";
 78 |             var tileset1910= "http://104.236.162.144:8000/v2_1910-1919/";
 79 |             var tileset1920= "http://104.236.162.144:8000/v2_1920-1929/";
 80 |             var tileset1930= "http://104.236.162.144:8000/v2_1930-1939/";
 81 |             var tileset1940= "http://104.236.162.144:8000/v2_1940-1949/";
 82 |             var tileset1950= "http://104.236.162.144:8000/v2_1950-1959_p2/";
 83 |             var tileset1960= "http://104.236.162.144:8000/v2_1960-1969/";
 84 |             var tileset1970= "http://104.236.162.144:8000/v2_1970-1979/";
 85 |             var tileset1980= "http://104.236.162.144:8000/v2_1980-1989/";
 86 |             var tileset1990= "http://104.236.162.144:8000/1990-1999/";
 87 | 			var tileset2000= "http://104.236.162.144:8000/v2_2000-2008/";
 88 |             var tilesetcities= "http://104.236.162.144:8000/cities/";
 89 |             var bkbackground="#4f4d4d";
 90 |             
 91 |             //Change Button Color
 92 |             function changestyle(var1, btn){
 93 |                 var year=var1;
 94 |                 if (map.hasClass(year)) {
 95 |                     $(btn).removeAttr('style');
 96 |                     map.removeClass(year);
 97 |                     
 98 |                 } else {
 99 |                     map.addClass(year);
100 |                     $(btn).css('opacity', '.5');
101 |                     }
102 |             } 
103 |             
104 |             //Show About Information
105 |             function aboutfunc(box){
106 |             $(box).toggle();
107 |             }; 
108 |         
109 |         
110 | 
111 |             
112 | 			var mapStyle = {
113 | 				  "version": 7,
114 | 				  "sources": {
115 |                     "mapbox": {
116 |                     "type": "vector",
117 |                     "url": "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6"
118 |                     },  
119 | 				    "1890": {
120 | 				      "type": "vector",
121 | 				      "url": "" + tileset1890 + "meta.json?vectortileflag=true",
122 | 				      "minzoom": 10,
123 | 				      "maxzoom": 18
124 | 				    },  
125 | 				    "1910": {
126 | 				      "type": "vector",
127 | 				      "url": "" + tileset1910 + "meta.json?vectortileflag=true",
128 | 				      "minzoom": 10,
129 | 				      "maxzoom": 18
130 | 				    },
131 |                     "1920": {
132 | 				      "type": "vector",
133 | 				      "url": "" + tileset1920 + "meta.json?vectortileflag=true",
134 | 				      "minzoom": 10,
135 | 				      "maxzoom": 18
136 | 				    },
137 |                     "1930": {
138 | 				      "type": "vector",
139 | 				      "url": "" + tileset1930 + "meta.json?vectortileflag=true",
140 | 				      "minzoom": 10,
141 | 				      "maxzoom": 18
142 | 				    },
143 |                     "1940": {
144 | 				      "type": "vector",
145 | 				      "url": "" + tileset1940 + "meta.json?vectortileflag=true",
146 | 				      "minzoom": 10,
147 | 				      "maxzoom": 18
148 | 				    },
149 |                      "1950": {
150 | 				      "type": "vector",
151 | 				      "url": "" + tileset1950 + "meta.json?vectortileflag=true",
152 | 				      "minzoom": 10,
153 | 				      "maxzoom": 18
154 | 				    },  
155 |                     "1960": {
156 | 				      "type": "vector",
157 | 				      "url": "" + tileset1960 + "meta.json?vectortileflag=true",
158 | 				      "minzoom": 10,
159 | 				      "maxzoom": 18
160 | 				    },
161 |                     "1970": {
162 | 				      "type": "vector",
163 | 				      "url": "" + tileset1970 + "meta.json?vectortileflag=true",
164 | 				      "minzoom": 10,
165 | 				      "maxzoom": 18
166 | 				    },
167 |                     "1980": {
168 | 				      "type": "vector",
169 | 				      "url": "" + tileset1980 + "meta.json?vectortileflag=true",
170 | 				      "minzoom": 10,
171 | 				      "maxzoom": 18
172 | 				    },
173 |                     "1990": {
174 | 				      "type": "vector",
175 | 				      "url": "" + tileset1990 + "meta.json?vectortileflag=true",
176 | 				      "minzoom": 10,
177 | 				      "maxzoom": 18
178 | 				    },
179 |                     "2000": {
180 | 				      "type": "vector",
181 | 				      "url": "" + tileset2000 + "meta.json?vectortileflag=true",
182 | 				      "minzoom": 10,
183 | 				      "maxzoom": 18
184 | 				    },
185 |                     "NODATE": {
186 | 				      "type": "vector",
187 | 				      "url": "" + tileset0000 + "meta.json?vectortileflag=true",
188 | 				      "minzoom": 10,
189 | 				      "maxzoom": 18
190 | 				    },                    
191 |                       "1900": {
192 | 				      "type": "vector",
193 | 				      "url": "" + tileset1900 + "meta.json?vectortileflag=true",
194 | 				      "minzoom": 10,
195 | 				      "maxzoom": 18
196 | 				    },  
197 |                     "lacity": {
198 | 				      "type": "vector",
199 | 				      "url": "" + tilesetcities + "meta.json?vectortileflag=true",
200 | 				      "minzoom": 10,
201 | 				      "maxzoom": 18
202 | 				    },  
203 |                        "stamen": {
204 |                         "type": "raster",
205 |                         "tiles": ["https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"],
206 |                         "tileSize": 256
207 |                     }          
208 | 				  },
209 |                     "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/outdoors",
210 |                     "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
211 |                     "layers": [
212 | 					  {
213 |                         "id": "background",
214 |                         "type": "background",
215 |                         "paint": {
216 |                                 "background-color": "#000"},
217 |                         "paint.divback":  {
218 |                                 "background-color": "#FFF"}
219 |                         },
220 |                       /*{
221 |                         "id": "stamentiles",
222 |                         "type": "raster",
223 |                         "source": "stamen",
224 |                        "paint": {
225 | 					      "raster-opacity": .25    
226 |                        }
227 |                         },*/
228 |                       {
229 |                         "id": "cities2", 
230 | 					    "source": "lacity",
231 | 					    "source-layer": "cities",
232 | 					    "paint": {
233 | 					      "line-color": "#FFF",
234 |                         "line-width": '2',
235 |                         "line-opacity": '.25'
236 | 					    },
237 | 					    "type": "line",
238 |                         "interactive":false
239 |                         },{
240 |                         "id": "hillshade_highlight_bright",
241 |                         "type": "fill",
242 |                         "source": "mapbox",
243 |                         "source-layer": "hillshade",
244 |                         "filter": ["==", "level", 94],
245 |                         "paint": {
246 |                           "fill-color": "#ffd",
247 |                           "fill-opacity": {
248 |                             "stops": [[15, 0.15], [17, 0.05]]
249 |                           }
250 |                         },
251 |                         "paint.night": {
252 |                           "fill-color": "#fdfdad",
253 |                           "fill-opacity": {
254 |                             "stops": [[15, 0.25], [17, 0.05]]
255 |                           }
256 |                         }
257 |                       }, {
258 |                         "id": "hillshade_highlight_med",
259 |                         "type": "fill",
260 |                         "source": "mapbox",
261 |                         "source-layer": "hillshade",
262 |                         "filter": ["==", "level", 90],
263 |                         "paint": {
264 |                           "fill-color": "#ffd",
265 |                           "fill-opacity": {
266 |                             "stops": [[15, 0.15], [17, 0.05]]
267 |                           }
268 |                         },
269 |                         "paint.night": {
270 |                           "fill-color": "#fdfdad",
271 |                           "fill-opacity": {
272 |                             "stops": [[15, 0.25], [17, 0.05]]
273 |                           }
274 |                         }
275 |                       }, {
276 |                         "id": "hillshade_shadow_faint",
277 |                         "type": "fill",
278 |                         "source": "mapbox",
279 |                         "source-layer": "hillshade",
280 |                         "filter": ["==", "level", 89],
281 |                         "paint": {
282 |                           "fill-color": "#216",
283 |                           "fill-opacity": {
284 |                             "stops": [[14, 0.06], [17, 0.01]]
285 |                           }
286 |                         },
287 |                         "paint.night": {
288 |                           "fill-color": "#216",
289 |                           "fill-opacity": {
290 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
291 |                           }
292 |                         }
293 |                       }, {
294 |                         "id": "hillshade_shadow_med",
295 |                         "type": "fill",
296 |                         "source": "mapbox",
297 |                         "source-layer": "hillshade",
298 |                         "filter": ["==", "level", 78],
299 |                         "paint": {
300 |                           "fill-color": "#216",
301 |                           "fill-opacity": {
302 |                             "stops": [[14, 0.06], [17, 0.01]]
303 |                           }
304 |                         },
305 |                         "paint.night": {
306 |                           "fill-color": "#216",
307 |                           "fill-opacity": {
308 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
309 |                           }
310 |                         }
311 |                       }, {
312 |                         "id": "hillshade_shadow_dark",
313 |                         "type": "fill",
314 |                         "source": "mapbox",
315 |                         "source-layer": "hillshade",
316 |                         "filter": ["==", "level", 67],
317 |                         "paint": {
318 |                           "fill-color": "#216",
319 |                           "fill-opacity": {
320 |                             "stops": [[14, 0.06], [17, 0.01]]
321 |                           }
322 |                         },
323 |                         "paint.night": {
324 |                           "fill-color": "#216",
325 |                           "fill-opacity": {
326 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
327 |                           }
328 |                         }
329 |                       }, {
330 |                         "id": "hillshade_shadow_extreme",
331 |                         "type": "fill",
332 |                         "source": "mapbox",
333 |                         "source-layer": "hillshade",
334 |                         "filter": ["==", "level", 56],
335 |                         "paint": {
336 |                           "fill-color": "#216",
337 |                           "fill-opacity": {
338 |                             "stops": [[14, 0.06], [17, 0.01]]
339 |                           }
340 |                         },
341 |                         "paint.night": {
342 |                           "fill-color": "#216",
343 |                           "fill-opacity": {
344 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
345 |                           }
346 |                         }
347 |                       },
348 |                       {
349 |                             "id": "contour_line_regular",
350 |                             "type": "line",
351 |                             "source": "mapbox",
352 |                             "source-layer": "contour",
353 |                             "filter": ["!=", "index", 5],
354 |                             "paint": {
355 |                               "line-color": "#f1ff00",
356 |                               "line-width": .5,
357 |                               "line-opacity": .5
358 |                                 }
359 |                         },
360 |                       {
361 |                         "id": "1890",
362 | 					    "source": "1890",
363 | 					    "source-layer": "1800-1899",
364 | 					    "paint": {
365 | 					      "fill-color": "#22ecf0",
366 |                             "fill-opacity":1
367 | 					    },
368 |                         "paint.y1900": {
369 | 					      "fill-color": "#d7d4d4",
370 |                             "fill-opacity":.4
371 | 					    },
372 | 					    "type": "fill",
373 |                         "interactive":true
374 | 					  },
375 |                       {
376 |                         "id": "1900",
377 | 					    "source": "1900",
378 | 					    "source-layer": "1900-1909",
379 | 					    "paint": {
380 | 					      "fill-color": "#22ecf0",
381 |                             "fill-opacity":1
382 | 					    },
383 |                         "paint.y1900": {
384 | 					      "fill-color": "#d7d4d4",
385 |                             "fill-opacity":.4
386 | 					    },
387 | 					    "type": "fill",
388 |                         "interactive":true
389 | 					  },
390 |                       {
391 |                         "id": "1910",
392 | 					    "source": "1910",
393 | 					    "source-layer": "1910-1919",
394 | 					    "paint": {
395 | 					      "fill-color": "#19d1fd",
396 |                             "fill-opacity":1
397 | 					    }, 
398 |                         "paint.y1910": {
399 | 					      "fill-color": "#d7d4d4",
400 |                             "fill-opacity":.4
401 | 					    },
402 | 					    "type": "fill",
403 |                         "interactive":true
404 | 					  },
405 |                    	  {
406 |                         "id": "1920",
407 | 					    "source": "1920",
408 | 					    "source-layer": "1920-1929",
409 | 					    "paint": {
410 | 					      "fill-color": "#14b1fd",
411 |                             "fill-opacity":1
412 | 					    }, 
413 |                         "paint.y1920": {
414 | 					      "fill-color": "#d7d4d4",
415 |                             "fill-opacity":.4
416 | 					    },
417 | 					    "type": "fill",
418 |                         "interactive":true
419 | 					  },
420 |                    	  { 
421 |                         "id": "1930",
422 | 					    "source": "1930",
423 | 					    "source-layer": "1930-1939",
424 | 					    "paint": {
425 | 					      "fill-color": "#2c7fdb",
426 |                             "fill-opacity":1
427 | 					    }, 
428 |                         "paint.y1930": {
429 | 					      "fill-color": "#d7d4d4",
430 |                             "fill-opacity":.4
431 | 					    },
432 | 					    "type": "fill",
433 |                         "interactive":true
434 | 					  },
435 |                      {
436 |                         "id": "1940", 
437 | 					    "source": "1940",
438 | 					    "source-layer": "1940-1949",
439 | 					    "paint": {
440 | 					      "fill-color": "#3d52bf",
441 |                             "fill-opacity":1
442 | 					    }, 
443 |                         "paint.y1940": {
444 | 					      "fill-color": "#d7d4d4",
445 |                             "fill-opacity":.4
446 | 					    },
447 | 					    "type": "fill",
448 |                         "interactive":true
449 | 					  },
450 |                         {
451 |                         "id": "1950", 
452 | 					    "source": "1950",
453 | 					    "source-layer": "1950-1959_p2",
454 | 					    "paint": {
455 | 					      "fill-color": "#6539b3",
456 |                             "fill-opacity":1
457 | 					    },					    
458 |                         "paint.y1950": {
459 | 					      "fill-color": "#d7d4d4",
460 |                             "fill-opacity":.4
461 | 					    },
462 | 					    "type": "fill",
463 |                         "interactive":true
464 | 					  },
465 |                      {
466 |                         "id": "1960", 
467 | 					    "source": "1960",
468 | 					    "source-layer": "1960-1969",
469 | 					    "paint": {
470 | 					      "fill-color": "#a032b2",
471 |                             "fill-opacity":1
472 | 					    }, 
473 |                         "paint.y1960": {
474 | 					      "fill-color": "#d7d4d4",
475 |                             "fill-opacity":.4
476 | 					    },
477 | 					    "type": "fill",
478 |                         "interactive":true
479 | 					  },
480 |                      {
481 |                         "id": "1970", 
482 | 					    "source": "1970",
483 | 					    "source-layer": "1970-1979",
484 | 					    "paint": {
485 | 					      "fill-color": "#d124a9",
486 |                             "fill-opacity":1
487 | 					    }, 
488 |                         "paint.y1970": {
489 | 					      "fill-color": "#d7d4d4",
490 |                             "fill-opacity":.4
491 | 					    },
492 | 					    "type": "fill",
493 |                         "interactive":true
494 | 					  },
495 |                      {
496 |                         "id": "1980", 
497 | 					    "source": "1980",
498 | 					    "source-layer": "1980-1989",
499 | 					    "paint": {
500 | 					      "fill-color": "#fd4dab",
501 |                             "fill-opacity":1
502 | 					    }, 
503 |                         "paint.y1980": {
504 | 					      "fill-color": "#d7d4d4",
505 |                             "fill-opacity":.4
506 | 					    },
507 | 					    "type": "fill",
508 |                         "interactive":true
509 | 					  },
510 |                      {
511 |                         "id": "1990", 
512 | 					    "source": "1990",
513 | 					    "source-layer": "1990-1999",
514 | 					    "paint": {
515 | 					      "fill-color": "#fea7d4",
516 |                             "fill-opacity":1
517 | 					    }, 
518 |                         "paint.y1990": {
519 | 					      "fill-color": "#d7d4d4",
520 |                             "fill-opacity":.4
521 | 					    },
522 | 					    "type": "fill",
523 |                         "interactive":true
524 | 					  },                 
525 |                       {
526 |                         "id": "2000", 
527 | 					    "source": "2000",
528 | 					    "source-layer": "2000-2009",
529 | 					    "paint": {
530 | 					      "fill-color": "#ff7911",
531 |                             "fill-opacity": 1
532 | 					    }, 
533 |                         "paint.y2000": {
534 |                           "fill-color": "#d7d4d4",
535 | 					      "fill-opacity": .4
536 | 					    },
537 | 					    "type": "fill",
538 |                         "interactive":true
539 | 					  },
540 |                      {
541 |                         "id": "NODATE", 
542 | 					    "source": "NODATE",
543 | 					    "source-layer": "nodates",
544 | 					    "paint": {
545 | 					      "fill-color": "#d7d4d4",
546 |                             "fill-opacity":.4    
547 | 					    },"paint.ynodata": {
548 | 					      "fill-opacity": .4
549 | 					    },
550 | 					    "type": "fill",
551 |                         "interactive":true
552 | 					  },
553 |                       {
554 |                         "id": "place_label_city_l",
555 |                         "type": "symbol",
556 |                         "source": "mapbox",
557 |                         "source-layer": "place_label",
558 |                         "maxzoom": 14,
559 |                         "filter": ["all", ["==", "type", "city"], ["<=", "scalerank", 3], ["==", "$type", "Point"]],
560 |                         "layout": {
561 |                           "text-field": "{name_en}",
562 |                           "text-font": "Lato Black Italic",
563 |                           "text-max-size": 60,
564 |                           "text-max-width": 8
565 |                         },
566 |                         "paint": {
567 |                           "text-color": "#FFF",
568 |                           "text-size": {
569 |                             "stops": [[4, 11], [10, 60]]
570 |                           }
571 |                         }
572 |                       }, {
573 |                         "id": "place_label_city_s",
574 |                         "type": "symbol",
575 |                         "source": "mapbox",
576 |                         "source-layer": "place_label",
577 |                         "maxzoom": 14,
578 |                         "filter": ["all", ["==", "type", "city"], ["!in", "scalerank", 0, 1, 2, 3], ["==", "$type", "Point"]],
579 |                         "layout": {
580 |                           "text-field": "{name_en}",
581 |                           "text-font": "Lato Black Italic",
582 |                           "text-max-size": 40,
583 |                           "text-max-width": 8
584 |                         },
585 |                         "paint": {
586 |                           "text-color": "#FFF",
587 |                           "text-size": {
588 |                             "stops": [[4, 10], [14, 40]]
589 |                           }
590 |                         }},
591 | 
592 |                                           {
593 |                         "id": "place_label_town",
594 |                         "type": "symbol",
595 |                         "source": "mapbox",
596 |                         "source-layer": "place_label",
597 |                         "minzoom": 7,
598 |                         "maxzoom": 16,
599 |                         "filter": ["all", ["==", "type", "town"], ["==", "$type", "Point"]],
600 |                         "layout": {
601 |                           "text-field": "{name_en}",
602 |                           "text-font": "Lato Black Italic",
603 |                           "text-max-size": 30,
604 |                           "text-max-width": 8
605 |                         },
606 |                         "paint": {
607 |                           "text-color": "#FFF",
608 |                           "text-size": {
609 |                             "base": 1.1,
610 |                             "stops": [[9, 12], [15, 30]]
611 |                           }
612 |                         }
613 |                       }
614 | 				  ]
615 | 			};
616 | 
617 |             
618 | mapboxgl.accessToken = 'pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA';
619 | var map = new mapboxgl.Map({
620 |   container: 'map', // container id
621 |   style: mapStyle, //stylesheet location
622 |   center: [34.0267,-118.2621], // starting position
623 |   zoom: 12, // starting zoom
624 |   minZoom: 12,
625 |   hash: true
626 | });
627 | 
628 | map.on('mousemove', function(e) {
629 |       map.featuresAt(e.point, {radius: 5}, function(err, features) {
630 |           console.log(features);
631 |           if (err) throw err;
632 |           document.getElementById('builtbox').innerHTML = features[0].properties.number+" "+features[0].properties.street+" "+features[0].properties.city+" was built in "+features[0].properties.YearBuilt;
633 |       });
634 |   });
635 | 
636 | //Click Functionality
637 | /*
638 | map.on('click', function(e) {
639 |       map.featuresAt(e.point, {radius: 5}, function(err, features) {
640 |           alert(features[0].properties.address+" was built in "+features[0].properties.YearBuilt);
641 |           if (err) throw err;
642 |           document.getElementById('builtbox').innerHTML = features[0].properties.address+" was built in "+features[0].properties.YearBuilt;
643 |       });
644 |   });
645 | */
646 |         
647 |     
648 |         
649 | var yearArray= ["y1900","y1910","y1920","y1930","y1940","y1950","y1960","y1970","y1980","y1990","y2000","ynodata"];
650 | var yearLength = yearArray.length;
651 | var tx;        
652 | function animate2(){
653 |     tx=1000;
654 |     for (var i = 0; i < yearLength; i++){
655 |             if (map.hasClass(yearArray[i])) {
656 |                 animate3(yearArray[i]);
657 |                 tx=tx+1000;
658 |                 } else {
659 |                 map.addClass(yearArray[i]);
660 |                 $("#"+yearArray[i]).css('opacity', '.5');
661 |                 }
662 |                 };
663 |     };
664 |         
665 | function animate3(i){
666 | console.log(tx)
667 | setTimeout(function(){
668 |     map.removeClass(i)
669 |     $("#"+i).removeAttr('style');    
670 | },tx);
671 | }        
672 | 
673 | 
674 | 
675 | 	</script>
676 | </body>
677 | </html>
678 | 


--------------------------------------------------------------------------------
/index_dep.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Age of Los Angeles</title>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
  8 | 	<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
  9 |     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 10 |     <link rel="stylesheet" type="text/css" href="css/style.css" />
 11 |     <script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
 12 |     <link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
 13 | 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
 14 | </head>
 15 | <script>
 16 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 17 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 18 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 19 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 20 | 
 21 |   ga('create', 'UA-63392200-1', 'auto');
 22 |   ga('send', 'pageview');
 23 | 
 24 | </script>    
 25 | <body>
 26 | 	<div id="map"></div>
 27 |     <div id="info_mobile"><img src="images/builtla_mobile.png">
 28 |         <div id="icons">
 29 |             <img src="images/about.png" onclick='aboutfunc("#aboutboxmobile")' id="abouticon">
 30 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 31 |         </div>   
 32 | <div id="aboutboxmobile">
 33 | <h3>The mobile version does not allow pan or zoom yet, please use a desktop for full use</h3>
 34 | <p>Built:LA created by <a href="https://www.theworks.la/">Omar Ureta</a><a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 35 | </p>
 36 | <p>Code and map research can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>          
 37 |     </div>
 38 |     </div>
 39 |     <div id="info">
 40 |         <img src="images/builtla_logo.png">
 41 |         <div id="timeline">
 42 |             <img src="images/time1909.png" onclick='changestyle("y1900",this)' id="y1909">
 43 |             <img src="images/time1910.png" onclick='changestyle("y1910",this)' id='y1910'>
 44 |             <img src="images/time1920.png" onclick='changestyle("y1920",this)' id='y1920'>
 45 |             <img src="images/time1930.png" onclick='changestyle("y1930",this)' id='y1930'>
 46 |             <img src="images/time1940.png" onclick='changestyle("y1940",this)' id='y1940'>
 47 |             <img src="images/time1950.png" onclick='changestyle("y1950",this)' id='y1950'>
 48 |             <img src="images/time1960.png" onclick='changestyle("y1960",this)' id='y1960'>
 49 |             <img src="images/time1970.png" onclick='changestyle("y1970",this)' id='y1970'>
 50 |             <img src="images/time1980.png" onclick='changestyle("y1980",this)' id='y1980'>
 51 |             <img src="images/time1990.png" onclick='changestyle("y1990",this)' id='y1990'>
 52 |             <img src="images/time2000.png" onclick='changestyle("y2000",this)' id='y2000'>
 53 |         </div>
 54 |         <div id="icons">
 55 |             <img src="images/about.png" onclick='aboutfunc("#aboutbox")' id="abouticon">
 56 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 57 |         </div>
 58 |         <div id="builtbox"></div> 
 59 |         <div id="infobox"></div>
 60 |         
 61 |         <div id="aboutbox">
 62 |             <p>Built:LA developed by <a href="http://www.theworks.la/">Omar Ureta</a> <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871"> (Linkedin)</a>. Made with <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 63 | </p>
 64 | <p>Code and map update logs can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>        
 65 | <p>Data // Building Outlines: <a href="http://egis3.lacounty.gov/dataportal/2011/04/28/countywide-building-outlines/">LA County GIS Data Portal</a>, Age Attributes <a href="http://gis.ats.ucla.edu/Mapshare/">LA County Assessor Local Roll</a> (Note: There were buildings that had no data on the time they were built. They are shown, only greyed out.)</p><p>This map uses WEBGL, which is optimized for Chrome and Firefox, Safari users need to enable <a href="https://discussions.apple.com/thread/3300585?start=0">WEBGL</a></p>    
 66 |     </div>
 67 |     </div>
 68 | 
 69 | 
 70 | 	<script>
 71 |             
 72 | 
 73 |             //Server Address will change every month
 74 | 			var mapDiv = 'map';
 75 |             var tileset0000= "https://builtla.planninglabs.la/nodata/";
 76 |             var tileset1890= "https://builtla.planninglabs.la/1890-1899/";
 77 |             var tileset1900= "https://builtla.planninglabs.la/1900-1909/";
 78 |             var tileset1910= "https://builtla.planninglabs.la/1910-1919/";
 79 |             var tileset1920= "https://builtla.planninglabs.la/1920-1929/";
 80 |             var tileset1930= "https://builtla.planninglabs.la/1930-1939/";
 81 |             var tileset1940= "https://builtla.planninglabs.la/1940-1949/";
 82 |             var tileset1950= "https://builtla.planninglabs.la/1950-1959/";
 83 |             var tileset1960= "https://builtla.planninglabs.la/1960-1969/";
 84 |             var tileset1970= "https://builtla.planninglabs.la/1970-1979/";
 85 |             var tileset1980= "https://builtla.planninglabs.la/1980-1989/";
 86 |             var tileset1990= "https://builtla.planninglabs.la/1990-1999/";
 87 | 			var tileset2000= "https://builtla.planninglabs.la/2000-2009/";
 88 |             var tilesetcities= "https://builtla.planninglabs.la/cities/";
 89 |             var bkbackground="#4f4d4d";
 90 |             
 91 |             //Change Button Color
 92 |             function changestyle(var1, btn){
 93 |                 var year=var1;
 94 |                 if (map.hasClass(year)) {
 95 |                     $(btn).removeAttr('style');
 96 |                     map.removeClass(year);
 97 |                     
 98 |                 } else {
 99 |                     map.addClass(year);
100 |                     $(btn).css('opacity', '.5');
101 |                     }
102 |             } 
103 |             
104 |             //Show About Information
105 |             function aboutfunc(box){
106 |             $(box).toggle();
107 |             }; 
108 |         
109 |         
110 | 
111 |       var mapStyle ={
112 |     "version": 8,
113 |     "sources": {
114 |         "tilehut": {
115 |             "type": "vector",
116 |             "tiles": [
117 |                 "https://builtla.planninglabs.la/1920-1929/{z}/{x}/{y}.pbf"
118 |             ],
119 |         }
120 |     },
121 |     "layers": [{
122 |         "id": "background",
123 |         "paint": {
124 |             "background-color": "#000"
125 |         },
126 |         "type": "background"
127 |     }, {
128 |         "id": "1920-1929",
129 |         "source": "tilehut",
130 |         "source-layer": "1920-1929",
131 |         "paint": {
132 |             "fill-color": "#14b1fd",
133 |             "fill-outline-color": "#14b1fd"
134 |         },
135 |         "type": "fill"
136 |     }]
137 | }
138 | 			var mapStyle2 = {
139 | 				  "version": 8,
140 | 				  "sources": {
141 |                     "mapbox": {
142 |                     "type": "vector",
143 |                     "tiles": "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6"
144 |                     },  
145 | 				    "1890": {
146 | 				      "type": "vector",
147 | 				      "tiles": "" + tileset1890 + "meta.json?vectortileflag=true",
148 | 				      "minzoom": 10,
149 | 				      "maxzoom": 18
150 | 				    },  
151 | 				    "1910": {
152 | 				      "type": "vector",
153 | 				      "tiles": "" + tileset1910 + "meta.json?vectortileflag=true",
154 | 				      "minzoom": 10,
155 | 				      "maxzoom": 18
156 | 				    },
157 |                     "1920": {
158 | 				      "type": "vector",
159 | 				      "tiles": "" + tileset1920 + "meta.json?vectortileflag=true",
160 | 				      "minzoom": 10,
161 | 				      "maxzoom": 18
162 | 				    },
163 |                     "1930": {
164 | 				      "type": "vector",
165 | 				      "tiles": "" + tileset1930 + "meta.json?vectortileflag=true",
166 | 				      "minzoom": 10,
167 | 				      "maxzoom": 18
168 | 				    },
169 |                     "1940": {
170 | 				      "type": "vector",
171 | 				      "tiles": "" + tileset1940 + "meta.json?vectortileflag=true",
172 | 				      "minzoom": 10,
173 | 				      "maxzoom": 18
174 | 				    },
175 |                      "1950": {
176 | 				      "type": "vector",
177 | 				      "tiles": "" + tileset1950 + "meta.json?vectortileflag=true",
178 | 				      "minzoom": 10,
179 | 				      "maxzoom": 18
180 | 				    },  
181 |                     "1960": {
182 | 				      "type": "vector",
183 | 				      "tiles": "" + tileset1960 + "meta.json?vectortileflag=true",
184 | 				      "minzoom": 10,
185 | 				      "maxzoom": 18
186 | 				    },
187 |                     "1970": {
188 | 				      "type": "vector",
189 | 				      "tiles": "" + tileset1970 + "meta.json?vectortileflag=true",
190 | 				      "minzoom": 10,
191 | 				      "maxzoom": 18
192 | 				    },
193 |                     "1980": {
194 | 				      "type": "vector",
195 | 				      "tiles": "" + tileset1980 + "meta.json?vectortileflag=true",
196 | 				      "minzoom": 10,
197 | 				      "maxzoom": 18
198 | 				    },
199 |                     "1990": {
200 | 				      "type": "vector",
201 | 				      "tiles": "" + tileset1990 + "meta.json?vectortileflag=true",
202 | 				      "minzoom": 10,
203 | 				      "maxzoom": 18
204 | 				    },
205 |                     "2000": {
206 | 				      "type": "vector",
207 | 				      "tiles": "" + tileset2000 + "meta.json?vectortileflag=true",
208 | 				      "minzoom": 10,
209 | 				      "maxzoom": 18
210 | 				    },
211 |                     "NODATE": {
212 | 				      "type": "vector",
213 | 				      "tiles": "" + tileset0000 + "meta.json?vectortileflag=true",
214 | 				      "minzoom": 10,
215 | 				      "maxzoom": 18
216 | 				    },                    
217 |                       "1900": {
218 | 				      "type": "vector",
219 | 				      "tiles": "" + tileset1900 + "meta.json?vectortileflag=true",
220 | 				      "minzoom": 10,
221 | 				      "maxzoom": 18
222 | 				    },  
223 |                     "lacity": {
224 | 				      "type": "vector",
225 | 				      "tiles": "" + tilesetcities + "meta.json?vectortileflag=true",
226 | 				      "minzoom": 10,
227 | 				      "maxzoom": 18
228 | 				    },  
229 |                        "stamen": {
230 |                         "type": "raster",
231 |                         "tiles": ["https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"],
232 |                         "tileSize": 256
233 |                     }          
234 | 				  },
235 |                     // "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/outdoors",
236 |                     "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
237 |                     "layers": [
238 | 					  {
239 |                         "id": "background",
240 |                         "type": "background",
241 |                         "paint": {
242 |                                 "background-color": "#000"},
243 |                         "paint.divback":  {
244 |                                 "background-color": "#FFF"}
245 |                         },
246 |                       /*{
247 |                         "id": "stamentiles",
248 |                         "type": "raster",
249 |                         "source": "stamen",
250 |                        "paint": {
251 | 					      "raster-opacity": .25    
252 |                        }
253 |                         },*/
254 |                       {
255 |                         "id": "cities2", 
256 | 					    "source": "lacity",
257 | 					    "source-layer": "cities",
258 | 					    "paint": {
259 | 					      "line-color": "#FFF",
260 |                         "line-width": '2',
261 |                         "line-opacity": '.25'
262 | 					    },
263 | 					    "type": "line",
264 |                         "interactive":false
265 |                         },{
266 |                         "id": "hillshade_highlight_bright",
267 |                         "type": "fill",
268 |                         "source": "mapbox",
269 |                         "source-layer": "hillshade",
270 |                         "filter": ["==", "level", 94],
271 |                         "paint": {
272 |                           "fill-color": "#ffd",
273 |                           "fill-opacity": {
274 |                             "stops": [[15, 0.15], [17, 0.05]]
275 |                           }
276 |                         },
277 |                         "paint.night": {
278 |                           "fill-color": "#fdfdad",
279 |                           "fill-opacity": {
280 |                             "stops": [[15, 0.25], [17, 0.05]]
281 |                           }
282 |                         }
283 |                       }, {
284 |                         "id": "hillshade_highlight_med",
285 |                         "type": "fill",
286 |                         "source": "mapbox",
287 |                         "source-layer": "hillshade",
288 |                         "filter": ["==", "level", 90],
289 |                         "paint": {
290 |                           "fill-color": "#ffd",
291 |                           "fill-opacity": {
292 |                             "stops": [[15, 0.15], [17, 0.05]]
293 |                           }
294 |                         },
295 |                         "paint.night": {
296 |                           "fill-color": "#fdfdad",
297 |                           "fill-opacity": {
298 |                             "stops": [[15, 0.25], [17, 0.05]]
299 |                           }
300 |                         }
301 |                       }, {
302 |                         "id": "hillshade_shadow_faint",
303 |                         "type": "fill",
304 |                         "source": "mapbox",
305 |                         "source-layer": "hillshade",
306 |                         "filter": ["==", "level", 89],
307 |                         "paint": {
308 |                           "fill-color": "#216",
309 |                           "fill-opacity": {
310 |                             "stops": [[14, 0.06], [17, 0.01]]
311 |                           }
312 |                         },
313 |                         "paint.night": {
314 |                           "fill-color": "#216",
315 |                           "fill-opacity": {
316 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
317 |                           }
318 |                         }
319 |                       }, {
320 |                         "id": "hillshade_shadow_med",
321 |                         "type": "fill",
322 |                         "source": "mapbox",
323 |                         "source-layer": "hillshade",
324 |                         "filter": ["==", "level", 78],
325 |                         "paint": {
326 |                           "fill-color": "#216",
327 |                           "fill-opacity": {
328 |                             "stops": [[14, 0.06], [17, 0.01]]
329 |                           }
330 |                         },
331 |                         "paint.night": {
332 |                           "fill-color": "#216",
333 |                           "fill-opacity": {
334 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
335 |                           }
336 |                         }
337 |                       }, {
338 |                         "id": "hillshade_shadow_dark",
339 |                         "type": "fill",
340 |                         "source": "mapbox",
341 |                         "source-layer": "hillshade",
342 |                         "filter": ["==", "level", 67],
343 |                         "paint": {
344 |                           "fill-color": "#216",
345 |                           "fill-opacity": {
346 |                             "stops": [[14, 0.06], [17, 0.01]]
347 |                           }
348 |                         },
349 |                         "paint.night": {
350 |                           "fill-color": "#216",
351 |                           "fill-opacity": {
352 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
353 |                           }
354 |                         }
355 |                       }, {
356 |                         "id": "hillshade_shadow_extreme",
357 |                         "type": "fill",
358 |                         "source": "mapbox",
359 |                         "source-layer": "hillshade",
360 |                         "filter": ["==", "level", 56],
361 |                         "paint": {
362 |                           "fill-color": "#216",
363 |                           "fill-opacity": {
364 |                             "stops": [[14, 0.06], [17, 0.01]]
365 |                           }
366 |                         },
367 |                         "paint.night": {
368 |                           "fill-color": "#216",
369 |                           "fill-opacity": {
370 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
371 |                           }
372 |                         }
373 |                       },
374 |                       {
375 |                             "id": "contour_line_regular",
376 |                             "type": "line",
377 |                             "source": "mapbox",
378 |                             "source-layer": "contour",
379 |                             "filter": ["!=", "index", 5],
380 |                             "paint": {
381 |                               "line-color": "#f1ff00",
382 |                               "line-width": .5,
383 |                               "line-opacity": .5
384 |                                 }
385 |                         },
386 |                       {
387 |                         "id": "1890",
388 | 					    "source": "1890",
389 | 					    "source-layer": "1800-1899",
390 | 					    "paint": {
391 | 					      "fill-color": "#22ecf0",
392 |                             "fill-opacity":1
393 | 					    },
394 |                         "paint.y1900": {
395 | 					      "fill-color": "#d7d4d4",
396 |                             "fill-opacity":.4
397 | 					    },
398 | 					    "type": "fill",
399 |                         "interactive":true
400 | 					  },
401 |                       {
402 |                         "id": "1900",
403 | 					    "source": "1900",
404 | 					    "source-layer": "1900-1909",
405 | 					    "paint": {
406 | 					      "fill-color": "#22ecf0",
407 |                             "fill-opacity":1
408 | 					    },
409 |                         "paint.y1900": {
410 | 					      "fill-color": "#d7d4d4",
411 |                             "fill-opacity":.4
412 | 					    },
413 | 					    "type": "fill",
414 |                         "interactive":true
415 | 					  },
416 |                       {
417 |                         "id": "1910",
418 | 					    "source": "1910",
419 | 					    "source-layer": "1910-1919",
420 | 					    "paint": {
421 | 					      "fill-color": "#19d1fd",
422 |                             "fill-opacity":1
423 | 					    }, 
424 |                         "paint.y1910": {
425 | 					      "fill-color": "#d7d4d4",
426 |                             "fill-opacity":.4
427 | 					    },
428 | 					    "type": "fill",
429 |                         "interactive":true
430 | 					  },
431 |                    	  {
432 |                         "id": "1920",
433 | 					    "source": "1920",
434 | 					    "source-layer": "1920-1929",
435 | 					    "paint": {
436 | 					      "fill-color": "#14b1fd",
437 |                             "fill-opacity":1
438 | 					    }, 
439 |                         "paint.y1920": {
440 | 					      "fill-color": "#d7d4d4",
441 |                             "fill-opacity":.4
442 | 					    },
443 | 					    "type": "fill",
444 |                         "interactive":true
445 | 					  },
446 |                    	  { 
447 |                         "id": "1930",
448 | 					    "source": "1930",
449 | 					    "source-layer": "1930-1939",
450 | 					    "paint": {
451 | 					      "fill-color": "#2c7fdb",
452 |                             "fill-opacity":1
453 | 					    }, 
454 |                         "paint.y1930": {
455 | 					      "fill-color": "#d7d4d4",
456 |                             "fill-opacity":.4
457 | 					    },
458 | 					    "type": "fill",
459 |                         "interactive":true
460 | 					  },
461 |                      {
462 |                         "id": "1940", 
463 | 					    "source": "1940",
464 | 					    "source-layer": "1940-1949",
465 | 					    "paint": {
466 | 					      "fill-color": "#3d52bf",
467 |                             "fill-opacity":1
468 | 					    }, 
469 |                         "paint.y1940": {
470 | 					      "fill-color": "#d7d4d4",
471 |                             "fill-opacity":.4
472 | 					    },
473 | 					    "type": "fill",
474 |                         "interactive":true
475 | 					  },
476 |                         {
477 |                         "id": "1950", 
478 | 					    "source": "1950",
479 | 					    "source-layer": "1950-1959",
480 | 					    "paint": {
481 | 					      "fill-color": "#6539b3",
482 |                             "fill-opacity":1
483 | 					    },					    
484 |                         "paint.y1950": {
485 | 					      "fill-color": "#d7d4d4",
486 |                             "fill-opacity":.4
487 | 					    },
488 | 					    "type": "fill",
489 |                         "interactive":true
490 | 					  },
491 |                      {
492 |                         "id": "1960", 
493 | 					    "source": "1960",
494 | 					    "source-layer": "1960-1969",
495 | 					    "paint": {
496 | 					      "fill-color": "#a032b2",
497 |                             "fill-opacity":1
498 | 					    }, 
499 |                         "paint.y1960": {
500 | 					      "fill-color": "#d7d4d4",
501 |                             "fill-opacity":.4
502 | 					    },
503 | 					    "type": "fill",
504 |                         "interactive":true
505 | 					  },
506 |                      {
507 |                         "id": "1970", 
508 | 					    "source": "1970",
509 | 					    "source-layer": "1970-1979",
510 | 					    "paint": {
511 | 					      "fill-color": "#d124a9",
512 |                             "fill-opacity":1
513 | 					    }, 
514 |                         "paint.y1970": {
515 | 					      "fill-color": "#d7d4d4",
516 |                             "fill-opacity":.4
517 | 					    },
518 | 					    "type": "fill",
519 |                         "interactive":true
520 | 					  },
521 |                      {
522 |                         "id": "1980", 
523 | 					    "source": "1980",
524 | 					    "source-layer": "1980-1989",
525 | 					    "paint": {
526 | 					      "fill-color": "#fd4dab",
527 |                             "fill-opacity":1
528 | 					    }, 
529 |                         "paint.y1980": {
530 | 					      "fill-color": "#d7d4d4",
531 |                             "fill-opacity":.4
532 | 					    },
533 | 					    "type": "fill",
534 |                         "interactive":true
535 | 					  },
536 |                      {
537 |                         "id": "1990", 
538 | 					    "source": "1990",
539 | 					    "source-layer": "1990-1999",
540 | 					    "paint": {
541 | 					      "fill-color": "#fea7d4",
542 |                             "fill-opacity":1
543 | 					    }, 
544 |                         "paint.y1990": {
545 | 					      "fill-color": "#d7d4d4",
546 |                             "fill-opacity":.4
547 | 					    },
548 | 					    "type": "fill",
549 |                         "interactive":true
550 | 					  },                 
551 |                       {
552 |                         "id": "2000", 
553 | 					    "source": "2000",
554 | 					    "source-layer": "2000-2009",
555 | 					    "paint": {
556 | 					      "fill-color": "#ff7911",
557 |                             "fill-opacity": 1
558 | 					    }, 
559 |                         "paint.y2000": {
560 |                           "fill-color": "#d7d4d4",
561 | 					      "fill-opacity": .4
562 | 					    },
563 | 					    "type": "fill",
564 |                         "interactive":true
565 | 					  },
566 |                      {
567 |                         "id": "NODATE", 
568 | 					    "source": "NODATE",
569 | 					    "source-layer": "NODATE",
570 | 					    "paint": {
571 | 					      "fill-color": "#d7d4d4",
572 |                             "fill-opacity":.4    
573 | 					    },"paint.ynodata": {
574 | 					      "fill-opacity": .4
575 | 					    },
576 | 					    "type": "fill",
577 |                         "interactive":true
578 | 					  },
579 |                       {
580 |                         "id": "place_label_city_l",
581 |                         "type": "symbol",
582 |                         "source": "mapbox",
583 |                         "source-layer": "place_label",
584 |                         "maxzoom": 14,
585 |                         "filter": ["all", ["==", "type", "city"], ["<=", "scalerank", 3], ["==", "$type", "Point"]],
586 |                         "layout": {
587 |                           "text-field": "{name_en}",
588 |                           "text-font": "Lato Black Italic",
589 |                           "text-max-size": 60,
590 |                           "text-max-width": 8
591 |                         },
592 |                         "paint": {
593 |                           "text-color": "#FFF",
594 |                           "text-size": {
595 |                             "stops": [[4, 11], [10, 60]]
596 |                           }
597 |                         }
598 |                       }, {
599 |                         "id": "place_label_city_s",
600 |                         "type": "symbol",
601 |                         "source": "mapbox",
602 |                         "source-layer": "place_label",
603 |                         "maxzoom": 14,
604 |                         "filter": ["all", ["==", "type", "city"], ["!in", "scalerank", 0, 1, 2, 3], ["==", "$type", "Point"]],
605 |                         "layout": {
606 |                           "text-field": "{name_en}",
607 |                           "text-font": "Lato Black Italic",
608 |                           "text-max-size": 40,
609 |                           "text-max-width": 8
610 |                         },
611 |                         "paint": {
612 |                           "text-color": "#FFF",
613 |                           "text-size": {
614 |                             "stops": [[4, 10], [14, 40]]
615 |                           }
616 |                         }},
617 | 
618 |                                           {
619 |                         "id": "place_label_town",
620 |                         "type": "symbol",
621 |                         "source": "mapbox",
622 |                         "source-layer": "place_label",
623 |                         "minzoom": 7,
624 |                         "maxzoom": 16,
625 |                         "filter": ["all", ["==", "type", "town"], ["==", "$type", "Point"]],
626 |                         "layout": {
627 |                           "text-field": "{name_en}",
628 |                           "text-font": "Lato Black Italic",
629 |                           "text-max-size": 30,
630 |                           "text-max-width": 8
631 |                         },
632 |                         "paint": {
633 |                           "text-color": "#FFF",
634 |                           "text-size": {
635 |                             "base": 1.1,
636 |                             "stops": [[9, 12], [15, 30]]
637 |                           }
638 |                         }
639 |                       }
640 | 				  ]
641 | 			};
642 | 
643 |             
644 | mapboxgl.accessToken = 'pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA';
645 | var map = new mapboxgl.Map({
646 |   container: 'map', // container id
647 |   style: mapStyle, //stylesheet location
648 |   center: [-118.2621,34.0267], // starting position
649 |   zoom: 12, // starting zoom
650 |   minZoom: 12,
651 |   hash: true
652 | });
653 | 
654 | // map.on('mousemove', function(e) {
655 | //       map.featuresAt(e.point, {radius: 5}, function(err, features) {
656 | //           if (err) throw err;
657 | //           document.getElementById('builtbox').innerHTML = features[0].properties.address+" was built in "+features[0].properties.YearBuilt;
658 | //       });
659 | //   });
660 | 
661 | //Click Functionality
662 | /*
663 | map.on('click', function(e) {
664 |       map.featuresAt(e.point, {radius: 5}, function(err, features) {
665 |           alert(features[0].properties.address+" was built in "+features[0].properties.YearBuilt);
666 |           if (err) throw err;
667 |           document.getElementById('builtbox').innerHTML = features[0].properties.address+" was built in "+features[0].properties.YearBuilt;
668 |       });
669 |   });
670 | */
671 |         
672 |     
673 |         
674 | var yearArray= ["y1900","y1910","y1920","y1930","y1940","y1950","y1960","y1970","y1980","y1990","y2000","ynodata"];
675 | var yearLength = yearArray.length;
676 | var tx;        
677 | function animate2(){
678 |     tx=1000;
679 |     for (var i = 0; i < yearLength; i++){
680 |             if (map.hasClass(yearArray[i])) {
681 |                 animate3(yearArray[i]);
682 |                 tx=tx+1000;
683 |                 } else {
684 |                 map.addClass(yearArray[i]);
685 |                 $("#"+yearArray[i]).css('opacity', '.5');
686 |                 }
687 |                 };
688 |     };
689 |         
690 | function animate3(i){
691 | console.log(tx)
692 | setTimeout(function(){
693 |     map.removeClass(i)
694 |     $("#"+i).removeAttr('style');    
695 | },tx);
696 | }        
697 | 
698 | 
699 | 
700 | 	</script>
701 | </body>
702 | </html>
703 | 


--------------------------------------------------------------------------------
/indexgl_touch.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Age of Los Angeles</title>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  8 | 	<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
  9 |     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 10 |     <link rel="stylesheet" type="text/css" href="css/style.css" />
 11 |     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.js'></script>
 12 |     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
 13 | 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
 14 | </head>
 15 | <script>
 16 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 17 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 18 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 19 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 20 | 
 21 |   ga('create', 'UA-63392200-1', 'auto');
 22 |   ga('send', 'pageview');
 23 | 
 24 | </script>    
 25 | <body>
 26 | 	<div id="map"></div>
 27 |     <div id="info_mobile"><img src="images/builtla_mobile.png">
 28 |         <div id="icons">
 29 |             <img src="images/about.png" onclick='aboutfunc("#aboutboxmobile")' id="abouticon">
 30 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 31 |         </div>   
 32 | <div id="aboutboxmobile">
 33 | <h3>The mobile version does not allow pan or zoom yet, please use a desktop for full use</h3>
 34 | <p>Built:LA developed by <a href="http://www.theworks.la/">Omar Ureta</a> <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871"> (Linkedin)</a> of the Urban Policy Collective @ Roschen Van Cleve Architects, founded by Bill Roschen, FAIA and Christi Van Cleve, AIA. Made with <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 35 | </p>
 36 | <p>Code and map research can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>          
 37 |     </div>
 38 |     </div>
 39 |     <div id="info">
 40 |         <img src="images/builtla_logo.png">
 41 |         <div id="timeline">
 42 |             <img src="images/time1909.png" onclick='changestyle("y1900",this)' id="y1909">
 43 |             <img src="images/time1910.png" onclick='changestyle("y1910",this)' id='y1910'>
 44 |             <img src="images/time1920.png" onclick='changestyle("y1920",this)' id='y1920'>
 45 |             <img src="images/time1930.png" onclick='changestyle("y1930",this)' id='y1930'>
 46 |             <img src="images/time1940.png" onclick='changestyle("y1940",this)' id='y1940'>
 47 |             <img src="images/time1950.png" onclick='changestyle("y1950",this)' id='y1950'>
 48 |             <img src="images/time1960.png" onclick='changestyle("y1960",this)' id='y1960'>
 49 |             <img src="images/time1970.png" onclick='changestyle("y1970",this)' id='y1970'>
 50 |             <img src="images/time1980.png" onclick='changestyle("y1980",this)' id='y1980'>
 51 |             <img src="images/time1990.png" onclick='changestyle("y1990",this)' id='y1990'>
 52 |             <img src="images/time2000.png" onclick='changestyle("y2000",this)' id='y2000'>
 53 |         </div>
 54 |         <div id="icons">
 55 |             <img src="images/about.png" onclick='aboutfunc("#aboutbox")' id="abouticon">
 56 |             <img src="images/animate.png" onclick='animate2(),animate2()' id="divback">
 57 |         </div>
 58 |         <div id="builtbox"></div> 
 59 |         <div id="infobox"></div>
 60 |         
 61 |         <div id="aboutbox">
 62 |             <p>Built:LA developed by <a href="http://www.theworks.la/">Omar Ureta</a> <a href="https://www.linkedin.com/pub/omar-ureta/55/95a/871"> (Linkedin)</a> of the <a href="http://www.rvca.org">Urban Policy Collective @ Roschen Van Cleve Architects</a>, founded by Bill Roschen, FAIA and Christi Van Cleve, AIA. Made with <a href="https://www.mapbox.com/">Mapbox Studio and Mapbox-GL</a>, inspired by <a href="http://labratrevenge.com/pdx/#12/45.4554/-122.6531">Portland, Oregon: The Age of a City</a> Terrain and Label Data by <a href="http://www.mapbox.com">Mapbox</a>. <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. <p>Thanks goes out to <a href="http://maptime.io/">Maptime</a> for opening the doors to amazing cartographic possibilities!!</p>
 63 | </p>
 64 | <p>Code and map update logs can be found on <a href="https://github.com/cityhubla/LA_Building_Age">Github</a></p>        
 65 | <p>Data // Building Outlines: <a href="http://egis3.lacounty.gov/dataportal/2011/04/28/countywide-building-outlines/">LA County GIS Data Portal</a>, Age Attributes <a href="http://gis.ats.ucla.edu/Mapshare/">LA County Assessor Local Roll</a> (Note: There were buildings that had no data on the time they were built. They are shown, only greyed out.)</p><p>This map uses WEBGL, which is optimized for Chrome and Firefox, Safari users need to enable <a href="https://discussions.apple.com/thread/3300585?start=0">WEBGL</a></p>    
 66 |     </div>
 67 |     </div>
 68 | 
 69 | 
 70 | 	<script>
 71 |             
 72 | 
 73 |             //Server Address will change every month
 74 | 			var mapDiv = 'map';
 75 |             var tileset0000= "http://104.236.162.144:8000/nodata/";
 76 |             var tileset1890= "http://104.236.162.144:8000/1890-1899/";
 77 |             var tileset1900= "http://104.236.162.144:8000/1900-1909/";
 78 |             var tileset1910= "http://104.236.162.144:8000/1910-1919/";
 79 |             var tileset1920= "http://104.236.162.144:8000/1920-1929/";
 80 |             var tileset1930= "http://104.236.162.144:8000/1930-1939/";
 81 |             var tileset1940= "http://104.236.162.144:8000/1940-1949/";
 82 |             var tileset1950= "http://104.236.162.144:8000/1950-1959/";
 83 |             var tileset1960= "http://104.236.162.144:8000/1960-1969/";
 84 |             var tileset1970= "http://104.236.162.144:8000/1970-1979/";
 85 |             var tileset1980= "http://104.236.162.144:8000/1980-1989/";
 86 |             var tileset1990= "http://104.236.162.144:8000/1990-1999/";
 87 | 			var tileset2000= "http://104.236.162.144:8000/2000-2009/";
 88 |             var tilesetcities= "http://104.236.162.144:8000/cities/";
 89 |             var bkbackground="#4f4d4d";
 90 |             
 91 |             //Change Button Color
 92 |             function changestyle(var1, btn){
 93 |                 var year=var1;
 94 |                 if (map.hasClass(year)) {
 95 |                     $(btn).removeAttr('style');
 96 |                     map.removeClass(year);
 97 |                     
 98 |                 } else {
 99 |                     map.addClass(year);
100 |                     $(btn).css('opacity', '.5');
101 |                     }
102 |             } 
103 |             
104 |             //Show About Information
105 |             function aboutfunc(box){
106 |             $(box).toggle();
107 |             }; 
108 |         
109 |         
110 | 
111 |             
112 | 			var mapStyle = {
113 | 				  "version": 7,
114 | 				  "sources": {
115 |                     "mapbox": {
116 |                     "type": "vector",
117 |                     "url": "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v6"
118 |                     },  
119 | 				    "1890": {
120 | 				      "type": "vector",
121 | 				      "url": "" + tileset1890 + "meta.json?vectortileflag=true"
122 | 				    },  
123 | 				    "1910": {
124 | 				      "type": "vector",
125 | 				      "url": "" + tileset1910 + "meta.json?vectortileflag=true"
126 | 				    },
127 |                     "1920": {
128 | 				      "type": "vector",
129 | 				      "url": "" + tileset1920 + "meta.json?vectortileflag=true"
130 | 				    },
131 |                     "1930": {
132 | 				      "type": "vector",
133 | 				      "url": "" + tileset1930 + "meta.json?vectortileflag=true"
134 | 				    },
135 |                     "1940": {
136 | 				      "type": "vector",
137 | 				      "url": "" + tileset1940 + "meta.json?vectortileflag=true"
138 | 				    },
139 |                      "1950": {
140 | 				      "type": "vector",
141 | 				      "url": "" + tileset1950 + "meta.json?vectortileflag=true"
142 | 				    },  
143 |                     "1960": {
144 | 				      "type": "vector",
145 | 				      "url": "" + tileset1960 + "meta.json?vectortileflag=true"
146 | 				    },
147 |                     "1970": {
148 | 				      "type": "vector",
149 | 				      "url": "" + tileset1970 + "meta.json?vectortileflag=true"
150 | 				    },
151 |                     "1980": {
152 | 				      "type": "vector",
153 | 				      "url": "" + tileset1980 + "meta.json?vectortileflag=true"
154 | 				    },
155 |                     "1990": {
156 | 				      "type": "vector",
157 | 				      "url": "" + tileset1990 + "meta.json?vectortileflag=true"
158 | 				    },
159 |                     "2000": {
160 | 				      "type": "vector",
161 | 				      "url": "" + tileset2000 + "meta.json?vectortileflag=true"
162 | 				    },
163 |                     "NODATE": {
164 | 				      "type": "vector",
165 | 				      "url": "" + tileset0000 + "meta.json?vectortileflag=true"
166 | 				    },                    
167 |                       "1900": {
168 | 				      "type": "vector",
169 | 				      "url": "" + tileset1900 + "meta.json?vectortileflag=true"
170 | 				    },  
171 |                     "lacity": {
172 | 				      "type": "vector",
173 | 				      "url": "" + tilesetcities + "meta.json?vectortileflag=true"
174 | 				    },  
175 |                        "stamen": {
176 |                         "type": "raster",
177 |                         "tiles": ["https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"],
178 |                         "tileSize": 256
179 |                     }          
180 | 				  },
181 |                     "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/outdoors",
182 |                     "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
183 |                     "layers": [
184 | 					  {
185 |                         "id": "background",
186 |                         "type": "background",
187 |                         "paint": {
188 |                                 "background-color": "#000"},
189 |                         "paint.divback":  {
190 |                                 "background-color": "#FFF"}
191 |                         },
192 |                       /*{
193 |                         "id": "stamentiles",
194 |                         "type": "raster",
195 |                         "source": "stamen",
196 |                        "paint": {
197 | 					      "raster-opacity": .25    
198 |                        }
199 |                         },
200 |                       {
201 |                         "id": "cities2", 
202 | 					    "source": "lacity",
203 | 					    "source-layer": "cities",
204 | 					    "paint": {
205 | 					      "line-color": "#FFF",
206 |                         "line-width": '2',
207 |                         "line-opacity": '.25'
208 | 					    },
209 | 					    "type": "line",
210 |                         "interactive":false
211 |                         },
212 |                         */
213 |                         {
214 |                         "id": "hillshade_highlight_bright",
215 |                         "type": "fill",
216 |                         "source": "mapbox",
217 |                         "source-layer": "hillshade",
218 |                         "filter": ["==", "level", 94],
219 |                         "paint": {
220 |                           "fill-color": "#ffd",
221 |                           "fill-opacity": {
222 |                             "stops": [[15, 0.15], [17, 0.05]]
223 |                           }
224 |                         },
225 |                         "paint.night": {
226 |                           "fill-color": "#fdfdad",
227 |                           "fill-opacity": {
228 |                             "stops": [[15, 0.25], [17, 0.05]]
229 |                           }
230 |                         }
231 |                       }, {
232 |                         "id": "hillshade_highlight_med",
233 |                         "type": "fill",
234 |                         "source": "mapbox",
235 |                         "source-layer": "hillshade",
236 |                         "filter": ["==", "level", 90],
237 |                         "paint": {
238 |                           "fill-color": "#ffd",
239 |                           "fill-opacity": {
240 |                             "stops": [[15, 0.15], [17, 0.05]]
241 |                           }
242 |                         },
243 |                         "paint.night": {
244 |                           "fill-color": "#fdfdad",
245 |                           "fill-opacity": {
246 |                             "stops": [[15, 0.25], [17, 0.05]]
247 |                           }
248 |                         }
249 |                       }, {
250 |                         "id": "hillshade_shadow_faint",
251 |                         "type": "fill",
252 |                         "source": "mapbox",
253 |                         "source-layer": "hillshade",
254 |                         "filter": ["==", "level", 89],
255 |                         "paint": {
256 |                           "fill-color": "#216",
257 |                           "fill-opacity": {
258 |                             "stops": [[14, 0.06], [17, 0.01]]
259 |                           }
260 |                         },
261 |                         "paint.night": {
262 |                           "fill-color": "#216",
263 |                           "fill-opacity": {
264 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
265 |                           }
266 |                         }
267 |                       }, {
268 |                         "id": "hillshade_shadow_med",
269 |                         "type": "fill",
270 |                         "source": "mapbox",
271 |                         "source-layer": "hillshade",
272 |                         "filter": ["==", "level", 78],
273 |                         "paint": {
274 |                           "fill-color": "#216",
275 |                           "fill-opacity": {
276 |                             "stops": [[14, 0.06], [17, 0.01]]
277 |                           }
278 |                         },
279 |                         "paint.night": {
280 |                           "fill-color": "#216",
281 |                           "fill-opacity": {
282 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
283 |                           }
284 |                         }
285 |                       }, {
286 |                         "id": "hillshade_shadow_dark",
287 |                         "type": "fill",
288 |                         "source": "mapbox",
289 |                         "source-layer": "hillshade",
290 |                         "filter": ["==", "level", 67],
291 |                         "paint": {
292 |                           "fill-color": "#216",
293 |                           "fill-opacity": {
294 |                             "stops": [[14, 0.06], [17, 0.01]]
295 |                           }
296 |                         },
297 |                         "paint.night": {
298 |                           "fill-color": "#216",
299 |                           "fill-opacity": {
300 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
301 |                           }
302 |                         }
303 |                       }, {
304 |                         "id": "hillshade_shadow_extreme",
305 |                         "type": "fill",
306 |                         "source": "mapbox",
307 |                         "source-layer": "hillshade",
308 |                         "filter": ["==", "level", 56],
309 |                         "paint": {
310 |                           "fill-color": "#216",
311 |                           "fill-opacity": {
312 |                             "stops": [[14, 0.06], [17, 0.01]]
313 |                           }
314 |                         },
315 |                         "paint.night": {
316 |                           "fill-color": "#216",
317 |                           "fill-opacity": {
318 |                             "stops": [[6, 0.15], [13, 0.2], [17, 0.01]]
319 |                           }
320 |                         }
321 |                       },
322 |                       {
323 |                             "id": "contour_line_regular",
324 |                             "type": "line",
325 |                             "source": "mapbox",
326 |                             "source-layer": "contour",
327 |                             "filter": ["!=", "index", 5],
328 |                             "paint": {
329 |                               "line-color": "#f1ff00",
330 |                               "line-width": .5,
331 |                               "line-opacity": .5
332 |                                 }
333 |                         },
334 |                       {
335 |                         "id": "1890",
336 | 					    "source": "1890",
337 | 					    "source-layer": "1800-1899",
338 | 					    "paint": {
339 | 					      "fill-color": "#22ecf0",
340 |                             "fill-opacity":1
341 | 					    },
342 |                         "paint.y1900": {
343 | 					      "fill-color": "#d7d4d4",
344 |                             "fill-opacity":.4
345 | 					    },
346 | 					    "type": "fill",
347 |                         "interactive":true
348 | 					  },
349 |                       {
350 |                         "id": "1900",
351 | 					    "source": "1900",
352 | 					    "source-layer": "1900-1909",
353 | 					    "paint": {
354 | 					      "fill-color": "#22ecf0",
355 |                             "fill-opacity":1
356 | 					    },
357 |                         "paint.y1900": {
358 | 					      "fill-color": "#d7d4d4",
359 |                             "fill-opacity":.4
360 | 					    },
361 | 					    "type": "fill",
362 |                         "interactive":true
363 | 					  },
364 |                       {
365 |                         "id": "1910",
366 | 					    "source": "1910",
367 | 					    "source-layer": "1910-1919",
368 | 					    "paint": {
369 | 					      "fill-color": "#19d1fd",
370 |                             "fill-opacity":1
371 | 					    }, 
372 |                         "paint.y1910": {
373 | 					      "fill-color": "#d7d4d4",
374 |                             "fill-opacity":.4
375 | 					    },
376 | 					    "type": "fill",
377 |                         "interactive":true
378 | 					  },
379 |                    	  {
380 |                         "id": "1920",
381 | 					    "source": "1920",
382 | 					    "source-layer": "1920-1929",
383 | 					    "paint": {
384 | 					      "fill-color": "#14b1fd",
385 |                             "fill-opacity":1
386 | 					    }, 
387 |                         "paint.y1920": {
388 | 					      "fill-color": "#d7d4d4",
389 |                             "fill-opacity":.4
390 | 					    },
391 | 					    "type": "fill",
392 |                         "interactive":true
393 | 					  },
394 |                    	  { 
395 |                         "id": "1930",
396 | 					    "source": "1930",
397 | 					    "source-layer": "1930-1939",
398 | 					    "paint": {
399 | 					      "fill-color": "#2c7fdb",
400 |                             "fill-opacity":1
401 | 					    }, 
402 |                         "paint.y1930": {
403 | 					      "fill-color": "#d7d4d4",
404 |                             "fill-opacity":.4
405 | 					    },
406 | 					    "type": "fill",
407 |                         "interactive":true
408 | 					  },
409 |                      {
410 |                         "id": "1940", 
411 | 					    "source": "1940",
412 | 					    "source-layer": "1940-1949",
413 | 					    "paint": {
414 | 					      "fill-color": "#3d52bf",
415 |                             "fill-opacity":1
416 | 					    }, 
417 |                         "paint.y1940": {
418 | 					      "fill-color": "#d7d4d4",
419 |                             "fill-opacity":.4
420 | 					    },
421 | 					    "type": "fill",
422 |                         "interactive":true
423 | 					  },
424 |                         {
425 |                         "id": "1950", 
426 | 					    "source": "1950",
427 | 					    "source-layer": "1950-1959",
428 | 					    "paint": {
429 | 					      "fill-color": "#6539b3",
430 |                             "fill-opacity":1
431 | 					    },					    
432 |                         "paint.y1950": {
433 | 					      "fill-color": "#d7d4d4",
434 |                             "fill-opacity":.4
435 | 					    },
436 | 					    "type": "fill",
437 |                         "interactive":true
438 | 					  },
439 |                      {
440 |                         "id": "1960", 
441 | 					    "source": "1960",
442 | 					    "source-layer": "1960-1969",
443 | 					    "paint": {
444 | 					      "fill-color": "#a032b2",
445 |                             "fill-opacity":1
446 | 					    }, 
447 |                         "paint.y1960": {
448 | 					      "fill-color": "#d7d4d4",
449 |                             "fill-opacity":.4
450 | 					    },
451 | 					    "type": "fill",
452 |                         "interactive":true
453 | 					  },
454 |                      {
455 |                         "id": "1970", 
456 | 					    "source": "1970",
457 | 					    "source-layer": "1970-1979",
458 | 					    "paint": {
459 | 					      "fill-color": "#d124a9",
460 |                             "fill-opacity":1
461 | 					    }, 
462 |                         "paint.y1970": {
463 | 					      "fill-color": "#d7d4d4",
464 |                             "fill-opacity":.4
465 | 					    },
466 | 					    "type": "fill",
467 |                         "interactive":true
468 | 					  },
469 |                      {
470 |                         "id": "1980", 
471 | 					    "source": "1980",
472 | 					    "source-layer": "1980-1989",
473 | 					    "paint": {
474 | 					      "fill-color": "#fd4dab",
475 |                             "fill-opacity":1
476 | 					    }, 
477 |                         "paint.y1980": {
478 | 					      "fill-color": "#d7d4d4",
479 |                             "fill-opacity":.4
480 | 					    },
481 | 					    "type": "fill",
482 |                         "interactive":true
483 | 					  },
484 |                      {
485 |                         "id": "1990", 
486 | 					    "source": "1990",
487 | 					    "source-layer": "1990-1999",
488 | 					    "paint": {
489 | 					      "fill-color": "#fea7d4",
490 |                             "fill-opacity":1
491 | 					    }, 
492 |                         "paint.y1990": {
493 | 					      "fill-color": "#d7d4d4",
494 |                             "fill-opacity":.4
495 | 					    },
496 | 					    "type": "fill",
497 |                         "interactive":true
498 | 					  },                 
499 |                       {
500 |                         "id": "2000", 
501 | 					    "source": "2000",
502 | 					    "source-layer": "2000-2009",
503 | 					    "paint": {
504 | 					      "fill-color": "#ff7911",
505 |                             "fill-opacity": 1
506 | 					    }, 
507 |                         "paint.y2000": {
508 |                           "fill-color": "#d7d4d4",
509 | 					      "fill-opacity": .4
510 | 					    },
511 | 					    "type": "fill",
512 |                         "interactive":true
513 | 					  },
514 |                      {
515 |                         "id": "NODATE", 
516 | 					    "source": "NODATE",
517 | 					    "source-layer": "NODATE",
518 | 					    "paint": {
519 | 					      "fill-color": "#d7d4d4",
520 |                             "fill-opacity":.4    
521 | 					    },"paint.ynodata": {
522 | 					      "fill-opacity": .4
523 | 					    },
524 | 					    "type": "fill",
525 |                         "interactive":true
526 | 					  },
527 |                       {
528 |                         "id": "place_label_city_l",
529 |                         "type": "symbol",
530 |                         "source": "mapbox",
531 |                         "source-layer": "place_label",
532 |                         "maxzoom": 14,
533 |                         "filter": ["all", ["==", "type", "city"], ["<=", "scalerank", 3], ["==", "$type", "Point"]],
534 |                         "layout": {
535 |                           "text-field": "{name_en}",
536 |                           "text-font": "Lato Black Italic",
537 |                           "text-max-size": 60,
538 |                           "text-max-width": 8
539 |                         },
540 |                         "paint": {
541 |                           "text-color": "#FFF",
542 |                           "text-size": {
543 |                             "stops": [[4, 11], [10, 60]]
544 |                           }
545 |                         }
546 |                       }, {
547 |                         "id": "place_label_city_s",
548 |                         "type": "symbol",
549 |                         "source": "mapbox",
550 |                         "source-layer": "place_label",
551 |                         "maxzoom": 14,
552 |                         "filter": ["all", ["==", "type", "city"], ["!in", "scalerank", 0, 1, 2, 3], ["==", "$type", "Point"]],
553 |                         "layout": {
554 |                           "text-field": "{name_en}",
555 |                           "text-font": "Lato Black Italic",
556 |                           "text-max-size": 40,
557 |                           "text-max-width": 8
558 |                         },
559 |                         "paint": {
560 |                           "text-color": "#FFF",
561 |                           "text-size": {
562 |                             "stops": [[4, 10], [14, 40]]
563 |                           }
564 |                         }},
565 | 
566 |                                           {
567 |                         "id": "place_label_town",
568 |                         "type": "symbol",
569 |                         "source": "mapbox",
570 |                         "source-layer": "place_label",
571 |                         "minzoom": 7,
572 |                         "maxzoom": 16,
573 |                         "filter": ["all", ["==", "type", "town"], ["==", "$type", "Point"]],
574 |                         "layout": {
575 |                           "text-field": "{name_en}",
576 |                           "text-font": "Lato Black Italic",
577 |                           "text-max-size": 30,
578 |                           "text-max-width": 8
579 |                         },
580 |                         "paint": {
581 |                           "text-color": "#FFF",
582 |                           "text-size": {
583 |                             "base": 1.1,
584 |                             "stops": [[9, 12], [15, 30]]
585 |                           }
586 |                         }
587 |                       }
588 | 				  ]
589 | 			};
590 | 
591 |             
592 | mapboxgl.accessToken = 'pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA';
593 | var map = new mapboxgl.Map({
594 |   container: 'map', // container id
595 |   style: mapStyle, //stylesheet location
596 |   center: [34.0267,-118.2621], // starting position
597 |   zoom: 12, // starting zoom
598 |   minZoom: 12,
599 |   hash: true
600 | });
601 | 
602 | map.on('mousemove', function(e) {
603 |       map.featuresAt(e.point, {radius: 5}, function(err, features) {
604 |           if (err) throw err;
605 |           document.getElementById('builtbox').innerHTML = features[0].properties.address+" was built in "+features[0].properties.YearBuilt;
606 |       });
607 |   });
608 | 
609 | //Click Functionality
610 | /*
611 | map.on('click', function(e) {
612 |       map.featuresAt(e.point, {radius: 5}, function(err, features) {
613 |           alert(features[0].properties.address+" was built in "+features[0].properties.YearBuilt);
614 |           if (err) throw err;
615 |           document.getElementById('builtbox').innerHTML = features[0].properties.address+" was built in "+features[0].properties.YearBuilt;
616 |       });
617 |   });
618 | */
619 |         
620 |     
621 |         
622 | var yearArray= ["y1900","y1910","y1920","y1930","y1940","y1950","y1960","y1970","y1980","y1990","y2000","ynodata"];
623 | var yearLength = yearArray.length;
624 | var tx;        
625 | function animate2(){
626 |     tx=1000;
627 |     for (var i = 0; i < yearLength; i++){
628 |             if (map.hasClass(yearArray[i])) {
629 |                 animate3(yearArray[i]);
630 |                 tx=tx+1000;
631 |                 } else {
632 |                 map.addClass(yearArray[i]);
633 |                 $("#"+yearArray[i]).css('opacity', '.5');
634 |                 }
635 |                 };
636 |     };
637 |         
638 | function animate3(i){
639 | console.log(tx)
640 | setTimeout(function(){
641 |     map.removeClass(i)
642 |     $("#"+i).removeAttr('style');    
643 | },tx);
644 | }        
645 | 
646 | 
647 | 
648 | 	</script>
649 | </body>
650 | </html>
651 | 


--------------------------------------------------------------------------------