Location posting from mobile to micro.blog

Developers
1

I was looking into the Location API document and this post with a good answer from @sod

So, already, it seems that my question, “Can I post a location with a map snippet to micro.blog?” is answered with a “yes,” which is what I originally came here for! Very happy about that.

I need a bit more “connecting the dots,” if I may, please. slight_smile:

It seems MB supports this with a theme, which means that any post I put up will have a location once it’s published. I was wondering if there’s a way to do a “location check” box, a condition so I can choose to do so.

I haven’t heard of OwnYourSwarm before, and it seems to be exactly the solution I’m looking for - but is there any mobile implication? The whole point is to post from my phone (since I’m mobile then and in different locations), but what’s the front end for this? Which app? In other words, I’m at a library somewhere, I pull up my phone, and…? (it seems like it works with Swarm, which I do have, but eventually I will want to stop using Swarm?)

The other side is, can we have this in MB somewhere? Pretty please? Is there a big hurdle somewhere that prevents this from being done? (please explain it to me, I’d love to know)?

Ideally, it would be another button, so can start a post with a location (with an emoji) with the sentence “I’m at… (location name) :compass:” and pull in a map thumb (apple maps probably can be open maps…)

Are there any examples of this anywhere? The person who posted above doesn’t seem to have a working blog with those.

1 Like
2

Yes, you’re correct, OwnYourSwarm publishes your Swarm check-ins to your blog. Swarm is your front-end/app if you choose to use OwnYourSwarm.

There’s currently no way to publish location information from the official Micro.blog apps, so you have to use a third-party solution like OwnYourSwarm or…

3

This doesn’t help today, but I wanted to mention that our plan is still to first add a location check-in UI to our iOS photo app Sunlit. I think that will be a good place to experiment and see what people want. There is so much potential for this and I hope to get back to it.

Personally, I use Swarm as my everyday check-in app, and then I move a bunch of check-ins over to a separate blog at https://manton.coffee. But it’s a manual process, so everything is about a year out of date already.

4

Also @sod please help me a bit more with this, even though it’s getting out of MB business – I’ve been using Swarm for years, then stopped because it’s a closed system and they dropped IFTTT at one point which allowed me to export to Google Docs (and in turn download location data).

I understand the generic Lego blocks: OwnMySwarm, Swarm, iPhone… but I don’t understand how to make them work together. I read the documentation about using a token, a server that supports this (it’s Microblog I take it) but it’s over my head. It seems that at least @manton has this working through Swarm, which I do have on my iPhone, and it will be fine for now… so the questions I have are:

  1. Can you download your location data? Say into a CSV file where you see GPS coordinates?
  2. How do you make Swarm and OwnMySwarm work together? The instructions are written at a level I don’t understand, but if it’s broken down a bit further - maybe you can tell me where I can get more help?

I’d love to get this working somehow. It’s been annoyingly missing for me since 2021.

5

I don’t know if I can be of much help, I’ve never used OwnYourSwarm or Swarm myself. But I will try my best. :blush:

  1. I don’t know about CSV, but according to Foursquare’s documentation there are at least feeds available (in addition to the API).
  2. From my understanding of the instructions, you first sign in to OwnYourSwarm (via your blog’s URL, http://taonaw.com), then hit the Connect Foursquare button to connect your Swarm account, and the next update you do in Swarm should be posted to your blog. But, again, I can’t confirm that it actually works as I have no Foursquare account.
6

That’s right. Sign into OwnYourSwarm with your Micro.blog-hosted blog URL, then OwnYourSwarm will automatically grab Swarm check-ins and create them in Micro.blog as blog posts. It will send location details which can be used in a Micro.blog theme (and they also appear in Posts in Microblog on the web with a little :world_map: emoji, so you can confirm it’s working).

7

Thank you both. This seems to be working with the snippet @sod put up:

{{ if .Params.location_latitude }}
  <a href="http://maps.apple.com/?ll={{ .Params.location_latitude }},{{ .Params.location_longitude}}&z=4">🗺 See this location on a map</a>
{{ end }}

However, I want a link to connect to the online map (Apple’s or Google whatever), not the maps app on macOS. There isn’t any map tile grabbed with this snippet either. I’m trying to get a location name (it’s there), time of check-in, and if possible a picture if I took it. I understand that I can’t make a post out of it, so I have to go into it later and edit the post if I want to add information - unless (if I understand this correctly) I use a plug in, say, like in Drafts.

My test post is at The Art Of Not Asking Why. How do I get a map icon in there, preferably open maps over Google (but I’ll use Google if that’s the only thing you know to work)?

While connecting my Swarm account, it took me to FourSquare where I saw an RSS feed… I’m wondering if this can be utilized too, I don’t see it contains anything. It didn’t get refreshed after I checked in.

Also - (I know I’m all over the place lol), if I want to export these posts, will they be in Markdown? I can include an automatic category (with the compass) and then look for those exports that way.

8

If you view source on this post you can see an example of embedding a Google Maps tile. Note that you need to grab your own Google API key, though. You can see mine in the img URL parameter but there are limits so not a good idea to share it. :slightly_smiling_face:

https://manton.coffee/2022/10/01/dutch-bros-coffee.html

The theme code looks something like this:

{{ if .Params.location_latitude }}
<img src="https://maps.googleapis.com/maps/api/staticmap?center={{ .Params.location_latitude }},{{ .Params.location_longitude}}&zoom=13&size=300x300&scale=2&key=YOURKEYHERE" width="300" height="300" alt="map" style="width: 300px; height: 300px; margin-top: 15px;" />
{{ end }}
9

Thanks…! I’m trying to see if I can do this with OpenMaps somehow. Grrr, it’s very technical but it seems to be doable even without API key from them, something like they show here

https://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

I hate how it all says “Here’s how you do it,” and I’m like, “Do what now? Do where? where does this go? change what?” I might just and up getting the Google Api and call it a day, since I have the code in front of me.

10

If you want an alternative to Google’s static (image) maps, there’s a list of them on the OpenStreetMap wiki. Mapbox and Geoapify both have free tiers and look relatively easy. Here’s one of their examples:

https://maps.geoapify.com/v1/staticmap?style=osm-bright-smooth&width=600&height=600&center=lonlat:-74.004158,40.722619&zoom=12.1401&apiKey=d548c5ed24604be6a9dd0d989631f783

Replace the hard-coded coordinates with {{ .Params.location_longitude}},{{ .Params.location_latitude }} and insert your own API key, and you should have a complete image URL that can replace the Google Maps URL in @manton’s example.

11

Replace the hard-coded coordinates with {{ .Params.location_longitude}},{{ .Params.location_latitude }}

Ah thanks! I needed someone to explain that to me :slight_smile:
In this example, they use an API key, but elsewhere, they say it’s not needed and to use Javascript instead. That code is seems to be on leaflet (Quick Start Guide - Leaflet - a JavaScript library for interactive maps) so I was trying to understand that. I could use your example then in that case too, use the code and replace the coordinates with the hugo snippets I take it.

12

Hmm I think I almost got it. It seems to be stuck on “The page you requested is still being published. It should be available soon.” (when you click on the posts, you see it).

Here’s what I used:

{{ if .Params.location_latitude }}
  <https://maps.geoapify.com/v1/staticmap?style=osm-carto&width=600&height=400&center=lonlat:{{ .Params.location_longitude}},{{ .Params.location_latitude }}&zoom=15.2862&apiKey=b50691d48f5445d5a006d1d241524816"> 🧭 See this location on a map</a>

I’m not sure I “sliced” the example they gave correctly with the longitude and latitude they way you explained.

I realized I was missing img src, and I don’t have a " at the beginning. I fixed it to:

{{ if .Params.location_latitude }}
  <img src="https://maps.geoapify.com/v1/staticmap?style=osm-carto&width=600&height=400&center=lonlat:{{ .Params.location_longitude}},{{ .Params.location_latitude }}&zoom=15.2862&apiKey=b50691d48f5445d5a006d1d241524816"> 🧭 See this location on a map</a>
{{ end }}

Still seems stuck.

13

I checked your test blog and the reason the “the page is still being published” message is showing up is because there is an error in your edited theme template. You should see it on the Design page and in the Account → View logs.

This is what I’m seeing:

“layouts/post/single.html:19:1”: parse failed: template: post/single.html:19: unexpected “}” in end

So when you fix the “}” that it is complaining about, that should fix the publishing. I don’t see any obvious problem glancing at what you pasted in, though, unless it wants a space before } in the location_longitude} part?

14

Yeah, like @manton already said, the snippet you provided should work once you get rid of the build error. Although there are some unnecessary bits there, like the “see this location” text and a lingering </a>.

I modified your code a bit and can confirm that the following works.

{{ if .Params.location_latitude }}
  <img src="https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=300&height=300&center=lonlat:{{ .Params.location_longitude}},{{ .Params.location_latitude }}&zoom=14&scaleFactor=2&apiKey=b50691d48f5445d5a006d1d241524816" width="300" height="300" alt="">
{{ end }}

The resulting post looks like this:

Screenshot of a blog post with an attached map.
Screenshot of a blog post with an attached map.820×816 622 KB

15

Cool, thanks @sod!

I wonder if it’s time for us to consider having little map thumbnails like this built in to all the default themes. I think the main issue is having a maps source that is free or reasonable for Micro.blog to cover the cost for. Open to suggestions here so that not everyone has to go through this manually.

16

Besides the additional width= and height= which I realize should be in the same line (I could also add alt) I don’t see what the error is.

It says there’s unexpected } in the end, as in {{end}} from what I understand, so I closed curly brackets more than I opened them if I understand this error - but I don’t see where, like @manton said… the two bits seem identical to me, but I have this issue where I don’t see a typo right under my nose.

And @manton , I’m out of my league here, obviously, but OpenMAps does document a way to do this without an API and using javascript instead (which I believe can be added to the themes), and since OSM is open (though not as detailed as Google Maps or Apple Maps) maybe that’s worth looking into? A plug in perhaps?

---- edit 1

@sod I just copy pasted your code and it didn’t do a thing… I looked closely and I saw “¢er=lonlat” where I believe it should be &center=. I changed that and now I’m back at where I was before, with the same error in the log as before.

---- edit 2

Ah HA! I was so focused on that bit of code that I didn’t realize I removed an “}” from the previous {{ end }}, duhhhhh! OK, so now it works…! Kinda… with a… broken image icon. I’m trying to figure this out still.

17

The build error you get has nothing to do with the code snippet you posted; the } balance there. And, again, my slightly modified example has been tested and confirmed to work. The error message @manton posted from your logs tells us that the error is in the template single.html close to line 19. So look around there, and you may spot the error.

Regarding the ¢er: you’re totally right. Looks like something is going on with the Micro.blog editor that escape text weirdly. I’ll look into that. I’ve updated my code sample now.

18

OK! It works now. The image takes a bit to load, but it does (which I also think what happened when I tested before, it got “impatient” and just displayed a broken image)

Should have followed to line 19. I was so focused on the little line I forgot there’s more code in the template. My bad. With this fixed (the } ) the code you gave me works (with the change to the center thing).

19

Yay! :tada:

I’ve confirmed that the center thing is a bug in Micro.blog’s custom theme editor and reported it to @manton. &cent gets replaced with ¢ the next time you edit the template. So, look out for that if you edit the template again. You might have ¢ in the image URL. If so, replace it with &cent before saving your changes.

20

Related tangent:

  1. Thanks to both Sven and Manton for translating the theme error messages.
  2. Hugo error messaging is, pardon me, fucking awful.
  3. Now I have a better idea of what it is that has been bothering me so much about theme work.