BCC Routes by maptastik

index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BCC Rides - April 2013 - July 20,2015</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://developer.mapsense.co/mapsense.css" media="screen" type="text/css">
	<link href='map-style.css' rel='stylesheet' />

   	<script src='//d3js.org/d3.v3.min.js' type="text/javascript"></script>
   	<script src='//d3js.org/topojson.v1.min.js' type="text/javascript"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
	<script src='L.TileLayer.d3_JSON_mapsense.js' type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#map {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
		.leaflet-clickable {
			mix-blend-mode: color-dodge;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script src='app.js'></script>
</body>
</html>

4hksq0i0.ldo.txt

[user]
	name = maptastik
	email = ryancooper729@gmail.com
[core]
	autocrlf = input
	safecrlf = false
[filter "lfs"]
	clean = git lfs clean %f
	smudge = git lfs smudge %f
	required = true

L.TileLayer.d3_JSON_mapsense.js

L.TileLayer.d3_JSON = L.TileLayer.extend({
    //extending L.TileLayer to support topoJSON and geoJSON vector sources
    //rendering with d3, borrows from zjonsson & https://github.com/glenrobertson/leaflet-tilelayer-geojson/

    onAdd: function(map) {
        var map_container_svg = d3.select(map._container).select("svg");

        L.TileLayer.prototype.onAdd.call(this, map);
        this.mapsenseStyle = this.options.mapsenseStyle;

        this._path = d3.geo.path().projection({
            stream: function(stream) {
                // no sampling along great arc
                // just a pure projection, without the default d3 projection-stream pipeline
                // so, long lines don't make curves, i.e. they obey the mercator projection
                return {
                    point: function(x, y) {
                        var p = map.latLngToLayerPoint(new L.LatLng(y, x));
                        stream.point(p.x, p.y);
                    },
                    lineStart: stream.lineStart,
                    lineEnd: stream.lineEnd,
                    polygonStart: stream.polygonStart,
                    polygonEnd: stream.polygonEnd,
                    sphere: stream.sphere
                };
            }

        });

        this.on("tileunload", function(d) {
            if (d.tile.xhr) d.tile.xhr.abort();
            if (d.tile.nodes) d.tile.nodes.remove();
            d.tile.nodes = null;
            d.tile.xhr = null;
        });
    },
    _loadTile: function(tile, tilePoint) {
        var self = this;
        this._adjustTilePoint(tilePoint);
        var mapsenseStyle = this.mapsenseStyle;

        if (!tile.nodes && !tile.xhr) {
            tile.xhr = d3.json(this.getTileUrl(tilePoint), function(data) {
                var geoJson;

                if (data === '') {
                    // Ignore empty submissions
                } else {
                    geoJson = topo2Geo(data);
                }

                tile.xhr = null;

                nwPoint = tilePoint.multiplyBy(256);
                sePoint = nwPoint.add([256, 256]);
                nw = map.unproject(nwPoint);
                se = map.unproject(sePoint);

                var point = map.latLngToLayerPoint(new L.LatLng(nw.lat, nw.lng));
                var tile_coords = "tile_" + point.x + "_" + point.y;

                d3.select(map._container).select("svg")
                    .append("clipPath")
                    .attr("id", tile_coords)
                    .attr("style", "fill: none; stroke: pink; transform: translate(" + point.x + "px, " + point.y + "px); -webkit-transform: translate(" + point.x + "px, " + point.y + "px);")
                    .append("rect")
                    .attr("width", "256")
                    .attr("height", "256");

                d3.select(map._container).select("svg")
                    .append("rect")
                    .attr("style", "transform: translate(" + point.x + "px, " + point.y + "px); -webkit-transform: translate(" + point.x + "px, " + point.y + "px);")
                    .attr("width", "256")
                    .attr("height", "256")
                    .attr("class", "mapsense-"+self.mapsenseStyle +" tile-background");

                tile.nodes = d3.select(map._container).select("svg").append("g");

                // tile.nodes is now a bunch of appended g's

                var grp = tile.nodes.selectAll("path")
                    .data(geoJson.features)
                    .enter()
                    .append("g")
                    .attr("class", "groupr");

                grp.append("path")
                    .attr("d", self._path)
                    .attr("clip-path", "url(#" + tile_coords + ")")
                    .attr("class", self.options.class)
                    .attr("class", function(d) { // this data is a bunch of features
                        var zoomClass = "_" + Math.floor(map.getZoom());
                        var classes = ['mapsense-'+self.mapsenseStyle];

                        if (d.properties) {
                            if (d.properties) {
                                if (d.properties.layer)
                                    classes.push(d.properties.layer);
                                if (d.properties.natural)
                                    classes.push(d.properties.natural);
                                if (d.properties.sub_layer)
                                    classes.push(d.properties.sub_layer);
                            } else {
                                classes.push('unknown');
                            }
                            classes = classes.join(' ');
                            return classes;
                        } else {}
                    });
            });
        }
    }

});


function topologyFeatures(topology) {
    function convert(topology, object, layer, features) {
        var featureOrCollection = topojson.feature(topology, object),
            layerFeatures;

        if (featureOrCollection.type === "FeatureCollection") {
            layerFeatures = featureOrCollection.features;
        } else {
            layerFeatures = [featureOrCollection];
        }
        layerFeatures.forEach(function(f) {
            f.properties.layer = layer;
        });
        features.push.apply(features, layerFeatures);
    }

    var features = [];
    for (var o in topology.objects) {
        convert(topology, topology.objects[o], o, features);
    }
    return features;
}

function topo2Geo(tj) {
    var gj = {
        type: "FeatureCollection",
        features: topologyFeatures(tj)
    };
    return gj;
}

app.js

L.mapbox.accessToken = 'pk.eyJ1IjoiZ3NjcGxhbm5pbmciLCJhIjoiRVZMNXpsQSJ9.5OxUlJTCDplPkdkKNlB91A';
var map = L.map('map').setView([38.046441, -84.497019], 10);

var base = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(map);


new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

var mapsense_url = "https://{s}-api.mapsense.co/explore/api/universes/mapsense.demographics/{z}/{x}/{y}.topojson?s=10&ringSpan=8&api-key=key-b4bc5affdce44f7d86e3efdf72f5d0d4";
mapsense_url += "&where=layer=='county'";

new L.TileLayer.d3_JSON(mapsense_url, {
    attribution: '<a target="_blank" href="https://developer.mapsense.co/tileViewer/?tileset=mapsense.demographics">©Mapsense ©OpenStreetMap</a>',
    // https://developer.mapsense.co/documentation/basemap
    mapsenseStyle: false // choose a basemap style, or style your own at styler.mapsense.co
}).addTo(map);




var bcc2013, bcc2014, bcc2015, ky, layers

var kyStyle = {
		color: '#333',
		fillOpacity: 0,
		// opacity:0.1,
		weight: 2
	}

var style = {
		color: '#E80087',
		opacity: 0.06,
		weight: 1
	}



bcc2013 = omnivore.topojson('bcc_2013.json')
	.on('ready', function(e) {
		layers = e.target;
		myStyleFunction();
	}).addTo(map);
bcc2014 = omnivore.topojson('bcc_2014.json')
	.on('ready', function(e) {
		layers = e.target;
		myStyleFunction();
	}).addTo(map);
bcc2015 = omnivore.topojson('bcc_201501-201507.json')
	.on('ready', function(e) {
		layers = e.target;
		myStyleFunction();
	}).addTo(map);

// ky  = omnivore.topojson('ky_counties.json')
// 	.on('ready', function(e) {
// 		layers = e.target;
// 		kyStyleFunction();
// 	}).addTo(map);

function kyStyleFunction() {
	layers.setStyle(kyStyle);
}
function myStyleFunction() {
	layers.setStyle(style);
}

L.control.layers({}, {
    '2013': bcc2013,
    '2014': bcc2014,
    '2015': bcc2015
},{collapsed:false}).addTo(map);

$( "form" ).before( "<p><strong>BCC Ride Years</strong></p>" );

map-style.css

.county {
	fill:none;
	stroke:#ababab;
	stroke-width: 1px;
	stroke-opacity: 0.2;
	stroke-dasharray: 3;
} 
.tile-background{
	fill:none;
	stroke:none;
}

.leaflet-clickable {
			mix-blend-mode: color-dodge;
		}