D3 Examples - Lexington Address Data

Lexington Address Data

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!

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>It's Full of Points - Lexington Address Locations</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.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="https://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('https://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>
​
    