How to write hyperlinks to local files in GeoJSON properties?Clickable hyperlink from GeoJSON field in featureHow to make a displayed geoJson property a link to another property in a Leaflet popupGeoJSON opening hyperlink to local file in the local aplication instead of browserSelect independent objects using GEOJson on OpenlayersSelecting feature programmatically from GeoJSON using OpenLayers?Loading GEOJSON in Leaflet and separating attributesMarkerCluster don't work with geojson layer in leafletChange style of GeoJSON circle marker by feature propertiesLeaflet L.geoJSON from a js variable geojson object not showing on mapHow to append geojson file using featureselectionGet GeoJSON from a database by the AJAX method for OpenLayers

Can a Rogue PC teach an NPC to perform Sneak Attack?

How to gently end involvement with an online community?

Add newline to prompt if it's too long

How to determine car loan length as a function of how long I plan to keep a car

Why isn't "I've" a proper response?

How many String objects would be created when concatenating multiple Strings?

Lost property on Portuguese trains

Most natural way to use the negative with つもり

Did a flight controller ever answer Flight with a no-go?

pgfplots: Missing one group of bars

Can RMSE and MAE have the same value?

“T” in subscript in formulas

Very slow boot time and poor perfomance

Transposing from C to Cm?

Is gzip atomic?

Is there any way to keep a player from killing an NPC?

What is the best type of paint to paint a shipping container?

Disambiguation of "nobis vobis" and "nobis nobis"

How long do you think advanced cybernetic implants would plausibly last?

Uri tokenizer as a simple state machine

Network helper class with retry logic on failure

Is "The life is beautiful" incorrect or just very non-idiomatic?

Are modern clipless shoes and pedals that much better than toe clips and straps?

French abbreviation for comparing two items ("vs")



How to write hyperlinks to local files in GeoJSON properties?


Clickable hyperlink from GeoJSON field in featureHow to make a displayed geoJson property a link to another property in a Leaflet popupGeoJSON opening hyperlink to local file in the local aplication instead of browserSelect independent objects using GEOJson on OpenlayersSelecting feature programmatically from GeoJSON using OpenLayers?Loading GEOJSON in Leaflet and separating attributesMarkerCluster don't work with geojson layer in leafletChange style of GeoJSON circle marker by feature propertiesLeaflet L.geoJSON from a js variable geojson object not showing on mapHow to append geojson file using featureselectionGet GeoJSON from a database by the AJAX method for OpenLayers






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








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 LineDesign & Build2. ClientsOpenreach3. MDU DesignsCoventryOR66 - 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










share|improve this question
































    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 LineDesign & Build2. ClientsOpenreach3. MDU DesignsCoventryOR66 - 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










    share|improve this question




























      2












      2








      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 LineDesign & Build2. ClientsOpenreach3. MDU DesignsCoventryOR66 - 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










      share|improve this 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 LineDesign & Build2. ClientsOpenreach3. MDU DesignsCoventryOR66 - 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







      leaflet javascript geojson hyperlink






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Aug 12 at 14:39









      IvanSanchez

      6,9421 gold badge10 silver badges22 bronze badges




      6,9421 gold badge10 silver badges22 bronze badges










      asked Aug 12 at 14:05









      Mariusz KrukarMariusz Krukar

      497 bronze badges




      497 bronze badges























          1 Answer
          1






          active

          oldest

          votes


















          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 LineDesign ..."
          ,


          ...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 LineDesign....



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





          share|improve this answer





























            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "79"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f331746%2fhow-to-write-hyperlinks-to-local-files-in-geojson-properties%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            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 LineDesign ..."
            ,


            ...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 LineDesign....



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





            share|improve this answer































              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 LineDesign ..."
              ,


              ...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 LineDesign....



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





              share|improve this answer





























                4














                4










                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 LineDesign ..."
                ,


                ...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 LineDesign....



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





                share|improve this answer















                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 LineDesign ..."
                ,


                ...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 LineDesign....



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






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Aug 13 at 14:03

























                answered Aug 12 at 14:38









                IvanSanchezIvanSanchez

                6,9421 gold badge10 silver badges22 bronze badges




                6,9421 gold badge10 silver badges22 bronze badges






























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f331746%2fhow-to-write-hyperlinks-to-local-files-in-geojson-properties%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Get product attribute by attribute group code in magento 2get product attribute by product attribute group in magento 2Magento 2 Log Bundle Product Data in List Page?How to get all product attribute of a attribute group of Default attribute set?Magento 2.1 Create a filter in the product grid by new attributeMagento 2 : Get Product Attribute values By GroupMagento 2 How to get all existing values for one attributeMagento 2 get custom attribute of a single product inside a pluginMagento 2.3 How to get all the Multi Source Inventory (MSI) locations collection in custom module?Magento2: how to develop rest API to get new productsGet product attribute by attribute group code ( [attribute_group_code] ) in magento 2

                    Category:9 (number) SubcategoriesMedia in category "9 (number)"Navigation menuUpload mediaGND ID: 4485639-8Library of Congress authority ID: sh85091979ReasonatorScholiaStatistics

                    Magento 2.3: How do i solve this, Not registered handle, on custom form?How can i rewrite TierPrice Block in Magento2magento 2 captcha not rendering if I override layout xmlmain.CRITICAL: Plugin class doesn't existMagento 2 : Problem while adding custom button order view page?Magento 2.2.5: Overriding Admin Controller sales/orderMagento 2.2.5: Add, Update and Delete existing products Custom OptionsMagento 2.3 : File Upload issue in UI Component FormMagento2 Not registered handleHow to configured Form Builder Js in my custom magento 2.3.0 module?Magento 2.3. How to create image upload field in an admin form