'Providing parameters in a URL to select and zoom to a feature on startup

I have a Leaflet map with GeoJSON data that shows various properties and I would like to append a parameter like "owner" to a URL (not a coordinate) and have the feature selected and zoomed to without refreshing the map every time the URL is passed.

For example http://localhost/web-gis/test2/GeoJSON.html?owner='J Smith' would select and zoom to the property owned by J Smith. If I then change the owner parameter to W Wilson (http://localhost/web-gis/test2/GeoJSON.html?owner='W Wilson') and press enter, I need the property owned by W Wilson to be selected and zoomed to without reloading the entire dataset.

Below is some code that I use but get a "cannot read properties of undefined (reading 'coordinates') error". Can any please point me in the right direction?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>providing-parameters-in-a-url-to-select-and-zoom-to-a-feature-on-startup</title>
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

    <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .leaflet-container {
      height: 400px;
      width: 600px;
      max-width: 100%;
      max-height: 100%;
    }

    html, body, #map {
        height: 100%;
        width: 100%;
    }
    </style>

    
</head>
<body>
<div id='map'></div>

<script>
  // Init Map
    const map = L.map('map').setView([ 48.191725575618726,16.446533203125], 13);
    const tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);

  // Sample Data
  const geojsonData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "owner": "wilson"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            16.360015869140625,
            48.23199134320962
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "owner": "smith"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            16.28997802734375,
            48.179822811961785
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "owner": "samson"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            16.446533203125,
            48.191725575618726
          ]
        }
      }
    ]
  };

  // Load Geojson Layer
  const geoJsonLayer = L.geoJSON(geojsonData, {
    onEachFeature: function (feature, layer) {
        layer.bindTooltip(feature.properties.owner,{permanent: true});
    }
  }).addTo(map);

  // Get url param and flyto if owner exists in geojson
  const owner = location.search.split('owner=')[1]
  if (owner) {
    for (feature of geojsonData.features) {
      if (feature.properties.owner === owner) {
        map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 16);
        break;
      }
    }
  }


</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Providing parameters in a URL to select and zoom to a feature on startup

Sources

Related Questions