As a web developer for a school, I've always enjoyed the challenge of creating a good campus map. The school I work for has a growing online seminary program to train pastors around the world, but helping people get around the main campus in Dallas is a still an integral part of any school.
TL;DR: Final result: DTS '3D' campus map
Google 3d Graphing
Back Story: The Old Map
Create your own designs with Canvas. Express yourself with natural brushes and hand-picked colors. Never lose a masterpiece with automatic syncing to your Google account. Make use of Google Earth's detailed globe by tilting the map to save a perfect 3D view or diving into Street View for a 360 experience. Share your story with the world. Tilt Brush lets you paint in 3D space with virtual reality. Your room is your canvas. Your palette is your imagination. The possibilities are endless. Experience painting as you have never before. Stay connected with Google VR. Tilt Brush Help Center.
Several years ago, I wanted to make an interactive 3D building map, so I learned Papervision 3D a powerful Flash-based 3D engine (papervision map). I really liked it at the time but now that Flash is largely out of the picture, it was time to replace the map. I've wanted to port the old map to Three.js a JavaScript based 3D engine, but I found that conversion wasn't as easy as I thought (three.js experiment).
To Google Maps
Since I also want to give first-class support to mobile devices, I decided to switch gears to Google Maps API since it runs really well on phones and tablets now. The problem was finding a way to display the map in an interesting and clear way.
Attempt #1: Flat polygons
My team and I drew out the floor line of several buildings using Google's Polygon tool with editable:true turned on, then we created a little loop to draw them all at once. No internet download when online. It looks great, but the problem is that it's not really clear that we're showing buildings and other than color, it's hard to tell what's a parking lot.
Attempt #2: Roof
The next step was trying draw a floating roof simply by copying the the coordinates and adding a little bit to the latitude to make it seem like it was 'up in the air.' The result doesn't really make sense, but it starts to give some building like feeling:
Attempt #3: Drawing a single 'Wall'
My next thought was to remove the floor and then draw to draw a single wall on the South side to make it look like a wrap around wall. To do this, I looked through the coordinates and found the western and eastern edge and then tried to draw along it. It worked in many places, but in complex buildings it looked a little strange since there is only one 'south' wall.
Google 3d Drawing Software
Attempt #4: Drawing individual Walls
To fix the problem of complex buildings, I decided to draw a polygon for each wall. This involves taking each floor coordinate and making a pair with the next one and then stretching it upward. Here's what my new function looks like
Here is the result:
This looks much better, but now we have two problems. First, some walls incorrectly overlap since I haven't explicitly told Google the correct order to draw them in z-index problem. Second, if you were to rotate the map 180 degrees (see below), the buildings would be upside-down. This is because I'm not checking which wall is the southern most or the direction of the map.
Google 3d Graphing
Back Story: The Old Map
Create your own designs with Canvas. Express yourself with natural brushes and hand-picked colors. Never lose a masterpiece with automatic syncing to your Google account. Make use of Google Earth's detailed globe by tilting the map to save a perfect 3D view or diving into Street View for a 360 experience. Share your story with the world. Tilt Brush lets you paint in 3D space with virtual reality. Your room is your canvas. Your palette is your imagination. The possibilities are endless. Experience painting as you have never before. Stay connected with Google VR. Tilt Brush Help Center.
Several years ago, I wanted to make an interactive 3D building map, so I learned Papervision 3D a powerful Flash-based 3D engine (papervision map). I really liked it at the time but now that Flash is largely out of the picture, it was time to replace the map. I've wanted to port the old map to Three.js a JavaScript based 3D engine, but I found that conversion wasn't as easy as I thought (three.js experiment).
To Google Maps
Since I also want to give first-class support to mobile devices, I decided to switch gears to Google Maps API since it runs really well on phones and tablets now. The problem was finding a way to display the map in an interesting and clear way.
Attempt #1: Flat polygons
My team and I drew out the floor line of several buildings using Google's Polygon tool with editable:true turned on, then we created a little loop to draw them all at once. No internet download when online. It looks great, but the problem is that it's not really clear that we're showing buildings and other than color, it's hard to tell what's a parking lot.
Attempt #2: Roof
The next step was trying draw a floating roof simply by copying the the coordinates and adding a little bit to the latitude to make it seem like it was 'up in the air.' The result doesn't really make sense, but it starts to give some building like feeling:
Attempt #3: Drawing a single 'Wall'
My next thought was to remove the floor and then draw to draw a single wall on the South side to make it look like a wrap around wall. To do this, I looked through the coordinates and found the western and eastern edge and then tried to draw along it. It worked in many places, but in complex buildings it looked a little strange since there is only one 'south' wall.
Google 3d Drawing Software
Attempt #4: Drawing individual Walls
To fix the problem of complex buildings, I decided to draw a polygon for each wall. This involves taking each floor coordinate and making a pair with the next one and then stretching it upward. Here's what my new function looks like
Here is the result:
This looks much better, but now we have two problems. First, some walls incorrectly overlap since I haven't explicitly told Google the correct order to draw them in z-index problem. Second, if you were to rotate the map 180 degrees (see below), the buildings would be upside-down. This is because I'm not checking which wall is the southern most or the direction of the map.
Attempt #5: Re-Ordering the Walls
So in my final attempt, I've taken the pairs above and ordered them based on the Google's heading (map.getHeading()). Adobe premiere cc pro 2018 crack mac. This allows me to figure out which way is 'up' and correctly layer the walls so that they look like real 3D objects. Here's the final function and map result:
Final Map
Google 3d Drawing App
Here is the final result. We've changed the parking lots to just have a colored border to help people know where to park and the full map has some interactivity on the buildings, lots, and departments. Go give it a try!
Adobe reader 9 download offline installer. Thanks to Google Maps Mania for the kind words here and here.
