LYOBBom

index.html

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css' type='text/css' />

<div id='map'></div>
  <div class="map-overlay" id="features">
    <h2>Scottish Index of Multiple Deprivation (SIMD)</h2>
    <div id="pd">
      <p>Hover over a data zone!</p>
    </div>
  </div>
  <div class="map-overlay" id="legend">
    <div>&#8592; more deprived</div>
  </div>

lyobbom.markdown

LYOBBom

A Pen by Ziqi Li on CodePen.

License.

script.js

mapboxgl.accessToken = 'pk.eyJ1IjoiYzA0MDEyMG1iIiwiYSI6ImNreWtpYWZ4ZTJ3ZjkydnA4YTFkcXVxb3oifQ.Jk2yP5Db0fcp5cHKNuS7OQ';

const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/c040120mb/cl01d7gfn001x14npzgd16vcn' // replace this with your style URL
});




map.on('load', () => {
    const layers = [
    "<10",
    "20 ",
    "30 ",
    "40 ",
    "50 ",
    "60 ",
    "70 ",
    "80 ",
    "90 ",
    "100"
  ];
  const colors = [
    "#67001f",
    "#b2182b",
    "#d6604d",
    "#f4a582",
    "#fddbc7",
    "#d1e5f0",
    "#92c5de",
    "#4393c3",
    "#2166ac",
    "#053061"
  ];

// create legend
const legend = document.getElementById('legend');



  layers.forEach((layer, i) => {
    const color = colors[i];
    const key = document.createElement("div");
    
    if (i <= 1 || i >= 8) {
      key.style.color = "white";
    }

    key.className = "legend-key";
    key.style.backgroundColor = color;
    key.innerHTML = `${layer}`;

    legend.appendChild(key);
  });

  map.addSource("hover", {
    type: "geojson",
    data: { type: "FeatureCollection", features: [] }
  });

  map.addLayer({
    id: "dz-hover",
    type: "line",
    source: "hover",
    layout: {},
    paint: {
      "line-color": "black",
      "line-width": 4
}
});



map.on("mousemove", (event) => {
  const dzone = map.queryRenderedFeatures(event.point, {
    layers: ["glasgow-simd"]
  });

  document.getElementById("pd").innerHTML = dzone.length
    ? `<h3>${dzone[0].properties.DZName}</h3><p>Rank: <strong>${dzone[0].properties.Percentv2}</strong> %</p>`
    : `<p>Hover over a data zone!</p>`;
  
    map.getSource("hover").setData({
    type: "FeatureCollection",
    features: dzone.map(function (f) {
      return { type: "Feature", geometry: f.geometry };
    })
  });
  

});
});



const geocoder = new MapboxGeocoder({
  // Initialize the geocoder
  accessToken: mapboxgl.accessToken, // Set the access token
  mapboxgl: mapboxgl, // Set the mapbox-gl instance
  marker: false, // Do not use the default marker style
  placeholder: "Search for places in Glasgow", // Placeholder text for the search bar
  proximity: {
    longitude: 55.8642,
    latitude: 4.2518
  } // Coordinates of Glasgow center
});

map.addControl(geocoder, "top-left");

map.addControl(new mapboxgl.NavigationControl(), "top-left");

map.addControl(
  new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true,
    showUserHeading: true
  }),
  "top-left"
);

style.css

body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

p {
  margin: 10px;
}

/**
* Create a position for the map
* on the page */
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}


/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  margin-right: 20px;
  font-family: 'Open Sans', sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 200px;
  margin-top: 20px;
  width: 220px;
}

#legend {
  padding: 5px 10px 5px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 30px;
  height: 100px;
  bottom: 80px;
  width: 170px;
}
.legend-key {
  display: inline;
  border-radius: 20%;
  width: 20px;
  height: 20px;
  padding: 5px;
}

.mapboxgl-ctrl-geocoder {
  width: 280px !important;
}