<commit_before><!doctype html>
<!--
Vector maps with Canvas and WebGL

Demo of client-side map rendering, using GeoJSON vector tiles as the remote source,
and the HTML Canvas and WebGL APIs as the rendering engines. Uses Leaflet for standard slippy map functionality.

<NAME>
-->
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vector map</title>
<style>

body {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

#map {
    background: rgba(0, 0, 0, 0);
    /*opacity: 0.5;*/
}

.label {
    width: 200px;
    margin-left: -100px;
    position: absolute;
    z-index: 1;
    text-align: center;
}

.labelInner {
    padding: 2px;
    background: white;
    opacity: 0.75;
}

</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
</head>

<body>

<div id="map"></div>
<canvas id="webgl-canvas" style="position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<!-- <script src="../libs/Leaflet/dist/leaflet.js"></script> -->
<script src="lib/TileLayer.DivGrid.js"></script>
<script src="lib/libtess.cat.js"></script>
<script src="triangulate.js"></script>
<script src="gl.js"></script>
<script src="canvas_renderer.js"></script>
<script src="gl_renderer.js"></script>

<script>

var tiles = {};

// Makeshift style-sheet
var styles = {
    water: {
        color: {
            default: [25, 150, 220]
        }
    },
    land: {
        color: {
            default: [32, 200, 125]
        }
    },
    buildings: {
        color: {
            default: [150, 150, 150]
        },
        border: [75, 75, 75],
        // dash: {
        //     default: [4, 2]
        // }
    },
    roads: {
        color: {
            'highway': [0, 0, 0],
            'major_road': [100, 100, 100],
            'minor_road': [150, 150, 150],
            'path': [255, 255, 255],
            'rail': [0, 0, 0]
        },
        size: {
            'highway': 5,
            'major_road': 2.5,
            'minor_road': 1.5,
            'path': 0.5,
            'rail': 0.5
        },
        dash: {
            // 'rail': [4, 2]
        }
    }
};

// Point
function Point (x, y)
{
    return {
        x: x,
        y: y
    };
}

Point.copy = function (p)
{
    if (p == null) {
        return null;
    }
    return { x: p.x, y: p.y };
};

// Projection constants
var tile_size = Point(256, 256);
var half_circumference_meters = 20037508.34;
var map_origin_meters = Point(-half_circumference_meters, half_circumference_meters);
var min_zoom_meters_per_pixel = 156543.0339;
var meters_per_pixel = [];
var max_zoom = 18;
for (var z=1; z <= max_zoom; z++) {
    meters_per_pixel[z] = min_zoom_meters_per_pixel / Math.pow(2, z);
}

// Convert tile location to mercator meters - multiply by pixels per tile, then by meters per pixel, adjust for map origin
function metersForTile (tile)
{
    return Point(
        (tile.x * tile_size.x * meters_per_pixel[tile.z]) + map_origin_meters.x,
        ((tile.y * tile_size.y * meters_per_pixel[tile.z]) * -1) + map_origin_meters.y
    );
}

// Convert mercator meters to lat-lng
function metersToLatLng (meters)
{
    var c = Point.copy(meters);

    c.x /= half_circumference_meters;<commit_msg>increase max zoom to 20 works well for webgl, but have seen zooms > 18 cause seams in canvas, so may want to vary per-renderer<commit_after><!doctype html>
<!--
Vector maps with Canvas and WebGL

Demo of client-side map rendering, using GeoJSON vector tiles as the remote source,
and the HTML Canvas and WebGL APIs as the rendering engines. Uses Leaflet for standard slippy map functionality.

<NAME>
-->
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vector map</title>
<style>

body {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

#map {
    background: rgba(0, 0, 0, 0);
    /*opacity: 0.5;*/
}

.label {
    width: 200px;
    margin-left: -100px;
    position: absolute;
    z-index: 1;
    text-align: center;
}

.labelInner {
    padding: 2px;
    background: white;
    opacity: 0.75;
}

</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
</head>

<body>

<div id="map"></div>
<canvas id="webgl-canvas" style="position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<!-- <script src="../libs/Leaflet/dist/leaflet.js"></script> -->
<script src="lib/TileLayer.DivGrid.js"></script>
<script src="lib/libtess.cat.js"></script>
<script src="triangulate.js"></script>
<script src="gl.js"></script>
<script src="canvas_renderer.js"></script>
<script src="gl_renderer.js"></script>

<script>

var tiles = {};

// Makeshift style-sheet
var styles = {
    water: {
        color: {
            default: [25, 150, 220]
        }
    },
    land: {
        color: {
            default: [32, 200, 125]
        }
    },
    buildings: {
        color: {
            default: [150, 150, 150]
        },
        border: [75, 75, 75],
        // dash: {
        //     default: [4, 2]
        // }
    },
    roads: {
        color: {
            'highway': [0, 0, 0],
            'major_road': [100, 100, 100],
            'minor_road': [150, 150, 150],
            'path': [255, 255, 255],
            'rail': [0, 0, 0]
        },
        size: {
            'highway': 5,
            'major_road': 2.5,
            'minor_road': 1.5,
            'path': 0.5,
            'rail': 0.5
        },
        dash: {
            // 'rail': [4, 2]
        }
    }
};

// Point
function Point (x, y)
{
    return {
        x: x,
        y: y
    };
}

Point.copy = function (p)
{
    if (p == null) {
        return null;
    }
    return { x: p.x, y: p.y };
};

// Projection constants
var tile_size = Point(256, 256);
var half_circumference_meters = 20037508.34;
var map_origin_meters = Point(-half_circumference_meters, half_circumference_meters);
var min_zoom_meters_per_pixel = 156543.0339;
var meters_per_pixel = [];
var max_zoom = 20;
for (var z=1; z <= max_zoom; z++) {
    meters_per_pixel[z] = min_zoom_meters_per_pixel / Math.pow(2, z);
}

// Convert tile location to mercator meters - multiply by pixels per tile, then by meters per pixel, adjust for map origin
function metersForTile (tile)
{
    return Point(
        (tile.x * tile_size.x * meters_per_pixel[tile.z]) + map_origin_meters.x,
        ((tile.y * tile_size.y * meters_per_pixel[tile.z]) * -1) + map_origin_meters.y
    );
}

// Convert mercator meters to lat-lng
function metersToLatLng (meters)
{
    var c = Point.copy(meters);

    c.x /= half_circumference_meters;
{'fraction_non_alphanumeric': 0.16329543776760666, 'fraction_numerical': 0.04163590727890152, 'mean_word_length': 2.3937875751503004, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 76, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5776255', 'n_tokens_mistral': 2668, 'n_tokens_neox': 2424, 'n_words': 602}