2

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.

2
  • First, coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. Second, I would say this is not GIS related question and as such more suitable for StackOverflow site.
    – TomazicM
    Apr 28 at 14:20

1 Answer 1

0

This will read the owner parameter from your url and will flyTo the owner if it exists in your GeoJSON.


<!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/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.