GeoJSON – How to Write Hyperlinks to Local Files in Properties

Question

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?

Answer 1

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) + "'>");