Roads - TIGER/OSM

by brockhicks

HTML

// Mapbox compare example: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Swipe between maps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

    </style>
  </head>

  <body>

    <style>
      body {
        overflow: hidden;
      }

      body * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .mapboxgl-compare::before {
        content: 'TIGER';
        margin-top: 155px;
        margin-left: -100px;
        padding-left: 20px;
        border-radius: 30px 0 0 30px;
      }

      .mapboxgl-compare::after {
        content: 'OSM';
        margin-top: -50px;
        margin-right: -100px;
        padding-left: 35px;
        border-radius: 0 30px 30px 0;
        border-left: 1px solid white;
      }

      .mapboxgl-compare::before,
      .mapboxgl-compare::after {
        display: block;
        background-color: #111;
        font-size: 12px;
        color: #FFF;
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
      }

    </style>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' /> 
    
  ...