Lexington-Fayette County recently released their address data set to the public. This is amazing! This map is just a simple rendering of Lexington-Fayette County as represented by address points. The colors are based on the type of location. I'll update them as I find out what each single-letter code represents!
Last active
August 29, 2015 14:20
-
-
Save maptastik/d168001b63751a8381db to your computer and use it in GitHub Desktop.
Lexington Address Data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>It's Full of Points - Lexington Address Locations</title> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> | |
| <link href="style.css" rel="stylesheet" type="text/css" /> | |
| <style> | |
| body { | |
| margin:0; | |
| padding:0; | |
| } | |
| #map { | |
| position:absolute; | |
| top:0; bottom:0; | |
| width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='legend'> | |
| <div class='my-legend'> | |
| <div class='legend-map-title'>It's Full of Points!</div> | |
| <div class='legend-map-subtitle'><em>Lexington Address Locations</em></div> | |
| <hr> | |
| <div class='legend-title'>Location Type</div> | |
| <div class='legend-scale'> | |
| <ul class='legend-labels'> | |
| <li><span id='o-type'></span>O</li> | |
| <li><span id='r-type'></span>R</li> | |
| <li><span id='u-type'></span>U</li> | |
| <li><span id='v-type'></span>V</li> | |
| <li><span id='x-type'></span>X</li> | |
| <li><span id='other-type'></span>Other/Unspecified</li> | |
| </ul> | |
| </div> | |
| <div class='legend-source'>Source: <a href="http://data.lexingtonky.gov/dataset/address-points">LFUCG</a></div> | |
| </div> | |
| </div> | |
| <div id='map'></div> | |
| <script> | |
| L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ' | |
| var map = L.mapbox.map('map','', { | |
| minZoom: 10, | |
| maxZoom: 15 | |
| }).setView([38.040584, -84.503716], 11); | |
| // Plain base | |
| var base = L.tileLayer('http://plaintiles.herokuapp.com/gray8/X/Y/Z.png').addTo(map); | |
| // Address stuff | |
| var addTiles = L.mapbox.tileLayer('maptastik.lex-address', { | |
| attribution: "LFUCG" | |
| }).addTo(map); | |
| var addGrid = L.mapbox.gridLayer('maptastik.lex-address').addTo(map); | |
| var addControl = L.mapbox.gridControl(addGrid).addTo(map); | |
| map.legendControl.addLegend(document.getElementById('legend').innerHTML); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .my-legend { | |
| padding: 5px; | |
| font-family: 'Open Sans', sans-serif; | |
| -webkit-box-shadow: 0px 0px 30px 10px rgba(192,192,192,0.1); | |
| -moz-box-shadow: 0px 0px 30px 10px rgba(192,192,192,0.1); | |
| box-shadow: 0px 0px 30px 10px rgba(192,192,192,0.1); | |
| border-radius: 10px; | |
| } | |
| .my-legend .legend-map-title { | |
| text-align: left; | |
| color: #fff; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| font-size: 150%; | |
| } | |
| .my-legend .legend-map-subtitle { | |
| text-align: left; | |
| color: #fff; | |
| margin-bottom: 5px; | |
| font-weight: normal; | |
| font-size: 110%; | |
| } | |
| .my-legend hr { | |
| color: white; | |
| } | |
| .my-legend .legend-title { | |
| text-align: left; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| font-size: 125%; | |
| } | |
| .my-legend .legend-scale ul { | |
| margin: 0; | |
| margin-bottom: 5px; | |
| padding: 0; | |
| float: left; | |
| list-style: none; | |
| } | |
| .my-legend .legend-scale ul li { | |
| font-size: 100%; | |
| list-style: none; | |
| margin-left: 0; | |
| line-height: 18px; | |
| margin-bottom: 2px; | |
| } | |
| .my-legend ul.legend-labels li span { | |
| display: block; | |
| float: left; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 10px; | |
| margin-right: 5px; | |
| margin-left: 0; | |
| } | |
| .my-legend .legend-source { | |
| font-size: 70%; | |
| color: #fff; | |
| clear: both; | |
| } | |
| .my-legend a { | |
| color: #fff; | |
| } | |
| .legend-labels, .legend-title { | |
| color: #fff; | |
| } | |
| .map-legend { | |
| background: #141414; | |
| } | |
| /*patches*/ | |
| #o-type { | |
| background-color: #1C86EE; | |
| } | |
| #r-type { | |
| background-color: #c71585; | |
| } | |
| #u-type { | |
| background-color: #ffd700; | |
| } | |
| #v-type { | |
| background-color: #00cd66; | |
| } | |
| #x-type { | |
| background-color: #ff3030; | |
| } | |
| #other-type { | |
| background-color: #ffffff; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment