2

I am wondering how to make a hyperlink from GeoJSON file properties to the local drive file. I found two options here:

Clickable hyperlink from GeoJSON field in feature this option refers to a whole .geojson file, whereas I need to have an unique hyperlink for every single object property included in this file

This option:

How to make a displayed geoJson property a link to another property in a Leaflet popup

Looks better, but I have problems with implementation it into my code, that looks:

var church = L.geoJSON(test, {
  pointToLayer: function(feature, latlng) {
    feature.properties.myKey =
      feature.properties.Title + ", " + feature.properties.Head;
    return L.circleMarker(latlng, geojsonMarkerOptions2);
  },
  onEachFeature: function(feature, layer) {
    layer.bindPopup(
      '<h1><u><font color="red">' +
        feature.properties.Title +
        "</h1></u></font><h2>Address: " +
        feature.properties.Head +
        "</h2><p>" +
        feature.properties.Description +
        "</p><a href='" +
        feature.properties.URL +
        "'>"
    );
  }
}).addTo(map);

Once I put a single link in GeoJSON file property, then works fine:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Title": "Sitec IS",
        "Head": "7400 Beach Drive",
        "Description": "Gavin Sinclair"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [0.16964435577392578, 52.29220753602784]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Title": "JHG",
        "Head": "Shortstanton sidings",
        "Description": "Conor Murphy",
        "URL": "<a href='https://www.johnhenrygroup.co.uk/' target='blank'>JHG</a>"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [0.05458831787109375, 52.29163006501503]
      }
    }
  ]
}

However I would like to have a path to my local file instead of URL...

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Title": "Priory Court",
        "Head": "188 Albany Road",
        "Description": "MDU",
        "URL": "file:\\\Z:\Fixed Line\Design & Build\2. Clients\Openreach\3. MDU Designs\Coventry\OR66 - Priory Court, Coventry"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-1.530101, 52.400199]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Title": "Stretham house",
        "Head": "Flat to leave",
        "Description": "N/A"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [0.211212, 52.344149]
      }
    }
  ]
}

but the code doesn't work at all. I believe, that problem lies somewhere in the apostrophs/quotation marks. I have an empty text instead or nothing.

Is there some option to make the hyperlink towards a specified path in the local drive file/folder, analogically i.e to the MS Excel?

Hyperlink to the local file

4

Couple of subtly wrong things here.

  1. A file URL starts with file:///, not with file:\\\, as per the WhatWG URL specification

  2. Backslashes in JSON must be escaped (from \ to \\), as explained in this answer on stackoverflow

Therefore, you should replace...

  "properties": {
    "URL": "file:\\\Z:\Fixed Line\Design ..."
  },

...with something like...

  "properties": {
    "URL": "file:///Z:\\Fixed Line\\Design ..."
  },

If you were not using Windows but Linux or Mac, you could forego backslashes altogether, e.g. ...

  "properties": {
    "URL": "file:////home/user/Fixed Line/Design ..."
  },

Using forward slashes in lieu of backslashes in a Windows environment might or might not work for hyperlinks.

Note that, because it's a escaped string, doing a console.log(feature.properties.URL) will output file:///Z:\Fixed Line\Design....

Also note that, because of how you're concatenating strings together at...

layer.bindPopup("<a href='" + feature.properties.URL + "'>");

...things will fail if your filenames contain quotes or double quotes. Consider using encodeURI() (don't forget to check the reference), e.g.:

layer.bindPopup("<a href='" + encodeURI(feature.properties.URL) + "'>");

Your Answer

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

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