How to write hyperlinks to local files in GeoJSON properties? Kko PL89TOhSs n Vv Bb Aa1 Jj9AaWw
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?
1 Answer
Couple of subtly wrong things here.
A
fileURL starts withfile:///, not withfile:\\\\\\, as per the WhatWG URL specificationBackslashes 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 ..."
},
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) + "'>");