Add shareable link with current geojson encoded in the URL

[benibargera]

Hi there, in the about page (https://github.com/mapbox/geojson.io/blob/main/about.html), it says: "If you just want to share your map, you can click the 'Share' tab and send a link to friends, or grab HTML for embedding it on your website". But I can't find that functionality anywhere. What am I missing? Is there a way to embed a map on another website?

Great app btw :)

[chriswhong]

The Share tab was removed, but you can create shareable links by encoding your geojson into the URL, e.g http://geojson.io/#data=data:application/json,%7B%22type%22%3A%22LineString%22%2C%22coordinates%22%3A%5B%5B0%2C0%5D%2C%5B10%2C10%5D%5D%7D

This will only work with geojson data up to a certain size however.

I've changed the name of this issue and think it would be a good idea to provide a URL with the current geojson so it's easy to share.

[Countdown369]

You should also be aware that the example for importing data using the schema data=data:text/x-url is broken, i.e. "http://geojson.io/#data=data:text/x-url,http%3A%2F%2Fapi.tiles.mapbox.com%2Fv3%2Ftmcw.map-gdv4cswo%2Fmarkers.geojson" leads to an error.

(I checked every example in Help; this is the only one with a broken link.)

[benibargera]

@chriswhong and @Countdown369, thank you kindly for your reply :)

In that case, I might run geojsonio on my own server and see what happens!

[chriswhong]

FYI @Countdown369, the example you referenced doesn't work because it's an old URL that no longer returns geojson (http://api.tiles.mapbox.com/v3/tmcw.map-gdv4cswo/markers.geojson)

[jacob-8]

@chriswhong I'm interested in helping with this issue. May I ask why the share tab was removed?

An easy fix would be to just add it back but I'm going to assume there was a certain reason behind the removal that should be known first. So then my question is: are you looking for an alternate solution like making the URL update along with the geojson changes so the user can just copy the url at any point to share?

[Countdown369]

@jacob-8 This is a guess, but since very large GeoJSON cause the URL to exceed its maximum length, I bet that's why. It would have required building reactivity to the "Share" tab to disallow sharing when the URL would be too big due to GeoJSON size, or and may mean implementing another solution for sharing large GeoJSON via URL that doesn't exist yet.

Again, a guess, and I'll tag in @chriswhong

[jacob-8]

It would have required building reactivity to the "Share" tab to disallow sharing when the URL would be too big due to GeoJSON size, or and may mean implementing another solution for sharing large GeoJSON via URL that doesn't exist yet.

I hope that is not the reason. It's trivial to implement a simple length check and alert the user that their URL may not work. Much better than throwing out the feature altogether. Something like the following code would do the job perfectly:

const geojson_url_prefix = 'http://geojson.io/#data=data:application/json,'

async function copy_geojson_to_clipboard() {
  const stringified_geojson = JSON.stringify(geojson)
  const url_friendly_geojson = encodeURIComponent(stringified_geojson)
  const url = geojson_url_prefix + url_friendly_geojson

  try {
    await navigator.clipboard.writeText(url);

    if (url.length > 2048) {
      // max url length is 2048 in Edge but 2MB in Chrome: https://www.geeksforgeeks.org/maximum-length-of-a-url-in-different-browsers/
      alert("Share URL copied to clipboard. Note this URL is very long. Consider testing it in your target browser before sharing. If it does not work, simplify your geojson before sharing");
    } else {
      alert("Share URL copied to clipboard");
    }
  } catch (err) {
    alert("Failed to copy URL: " + err);
  }
}

https://www.geeksforgeeks.org/maximum-length-of-a-url-in-different-browsers/ says Chrome can handle 2MB - if so, that's news to me and astoundingly long. If not, then the above code will also help alert Chrome users.

[chriswhong]

May I ask why the share tab was removed?

I can't recall at this point but I feel like it was linked to the github/gist integration I don't believe it ever had a simple URL-based sharing feature when it existed. I could be wrong.