0

I'm attempting to add a drop down select menu for # of bedrooms to a mapbox map. The data source that I'm attempting to filter on is a geojson data file. I setup window onchange event listener appended to the bedrooms id. But I don't think I have the event listener setup correctly to handle this. Any ideas?

<!DOCTYPE html>
 <html>
 <head>
  <meta charset='utf-8' />
  <title>Test</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; height:500px;}
    #map { position:absolute; top:0; bottom:0; width:91%; 
    height:500px;}
          img {
      height: 100px;
      width: 120px;
    }
    .mapboxgl-ctrl-compass {
      display: none !important;
    }
        .map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 200px;
    top: 0;
    left: 0;
    padding: 60px;
 }

 .map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
 }

 .map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
 }

 .map-overlay-inner fieldset:last-child {
    margin: 0;
 }

 .map-overlay-inner select {
    width: 100%;
 }

 .map-overlay-inner label {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
 }

 .map-overlay-inner button {
    display: inline-block;
    width: 36px;
    height: 20px;
    border: none;
    cursor: pointer;
 }

 .map-overlay-inner button:focus {
    outline: none;
 }

 .map-overlay-inner button:hover {
    box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
 }
  </style>
 </head>
 <body>

 <div id='map'></div>
 <div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label>Bedrooms</label>
            <select id='Bedrooms' name='Bedrooms'>
                <option> </option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
            </select>
        </fieldset>
    </div>
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl- 
 geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
 <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl- 
 js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' 
type='text/css' />
 <script>
    var select = document.getElementById('Bedrooms');
 mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0bHVzIiwiYSI6ImNqcXBqMDVnejAyMmczeG8xa2M1dm45dWcifQ.enUJybM DhnwWOHPdm4XInA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-103.59179687498357, 40.66995747013945],
    zoom: 3
});

map.on('load', function() {
    // Add a new source from our GeoJSON data and set the
    // 'cluster' option to true. GL-JS will add the point_count property to your source data.
    map.addSource("Properties", {
        type: "geojson",
        // Point to GeoJSON data.
        data: "20.geojson",
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
    });

    map.addLayer({
        id: "clusters",
        type: "circle",
        source: "Properties",
        filter: ["has", "point_count"],
        paint: {
            // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
            // with three steps to implement three types of circles:
            //   * Blue, 20px circles when point count is less than 100
            //   * Yellow, 30px circles when point count is between 100 and 750
            //   * Pink, 40px circles when point count is greater than or equal to 750
            "circle-color": [
                "step",
                ["get", "point_count"],
                "#ffffff",
                100,
                "#ffffff",
                750,
                "#ffffff"
            ],
            "circle-radius": [
                "step",
                ["get", "point_count"],
                20,
                100,
                30,
                750,
                40
            ]
        }
    });

    map.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "Properties",
        filter: ["has", "point_count"],
        layout: {
            "text-field": "{point_count_abbreviated}",
            "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
            "text-size": 12
        }
    });

    map.addLayer({
        id: "unclustered-point",
        type: "circle",
        source: "Properties",
        filter: ["!", ["has", "point_count"]],
        paint: {
            "circle-color": "#ffffff",
            "circle-radius": 8,
            "circle-stroke-width": 1,
            "circle-stroke-color": "#fff"
        }
    });


    // inspect a unclustered-point on click
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['unclustered-point'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML(myhtml)
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
});

window.change_map = function(){
var e = document.getElementById("Bedrooms");
var v = e.value;
}


    map.on('mouseenter', 'unclustered-point', function () {
        map.getCanvas().style.cursor = 'pointer';
    });
    map.on('mouseleave', 'unclustered-point', function () {
        map.getCanvas().style.cursor = '';
    });
    map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    placeholder: "Location",
    animate: false,
    zoom: 7.2
}), 'top-left');
  map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
  </script>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.