Mapbox OZ

by bnw3_2000

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.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>
      .filter-ctrl {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        width: 290px;
      }

      .filter-ctrl input[type=text] {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        width: 100%;
        border: 0;
        background-color: #fff;
        height: 40px;
        margin: 0;
        color: rgba(0, 0, 0, .5);
        padding: 10px;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }

      #features {
        position: absolute;
        top: 60px;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 3px;
      }

      #map canvas {
        cursor: crosshair;
      }

    </style>


    <div id='map'></div>
    <div class='filter-ctrl'>
      <input id='filter-input' type='text' name='filter' placeholder='Filter by GEOID' />
    </div>
    <pre id='features'></pre>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYm53MzIwMDAiLCJhIjoiY2l6c3dzeXk2MDAxZDMyb2Rza3Y2aWZzOCJ9.vT-LGs6havpB1hdFSHg_jg';

var layerIDs = []; // Will contain a list used to filter against.
var filterInput = document.getElementById('filter-input'); //text to filter with
var featuresOZ = [];

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-118.221674, 33.933235],
  zoom: 10.0
}); //setup map

function normalize(string) {
  return string.trim().toLowerCase();
}

map.on('load', function() {

  var layers = map.getStyle().layers;
  // Find the index of the first symbol layer in the map style
  var firstSymbolId;
  for (var i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol') {
      firstSymbolId = layers[i].id;
      break;
    }
  }


  map.addSource('OZ-Tracks', {
    "type": "vector",
    "url": "mapbox://bnw32000.7gn9h9tf"
  });

  map.addLayer({
    "id": "OZ-Tracks-Fill",
    "type": "fill",
    "source": "OZ-Tracks",
    "source-layer": "FnlOZTracts-a2h0cy",
    "paint": {
      "fill-outline-color": "rgba(0,0,0,0.1)",
      "fill-color": "rgba(0,0,0,0.1)",
      "fill-opacity": 0.75
    }
  }, firstSymbolId); // Place polygon under these labels.

  map.addLayer({
    "id": "OZ-Tracks-Outline",
    "type": "line",
    "source": "OZ-Tracks",
    "source-layer": "FnlOZTracts-a2h0cy",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "#ff69b4",
      "line-width": 2
    }
  }, firstSymbolId);





  map.on('click', 'OZ-Tracks-Fill', function(e) {
    new mapboxgl.Popup()
      .setLngLat(e.lngLat)
      .setHTML(e.features[0].properties.GEOID)
      .addTo(map);
  });

  // Change the cursor to a pointer when the mouse is over the states layer.
  map.on('mouseenter', 'OZ-Tracks-Fill', function() {
    map.getCanvas().style.cursor = 'pointer';
  });

  // Change it back to a pointer when it leaves.
  map.on('mouseleave',...