Embed Hitchmap in Hitchwiki

[tillwenke]

We wanna introduce iframes on all city pages in hitchwiki to make this work from our side we need the following:

• make sure the iframe does not contain all the distraction buttons (see below) e.g. through a subpage that just has non of these buttons and input fields
• passing coordinates of a city to the link to hitchmap, such that the iframe is centered at the specified city

This is how it looks like before this issue was tackled:

[bopjesvla]

Beware of having the same functionality in multiple issues, just reference #38

Hitchmap is pretty heavy to embed, the interface would probably be pretty bad in the small square. Iframes are generally discouraged in mobile interfaces.

How about using a static image that links to the Hitchmap view? Hitchmap can render an svg of all spots in a bounding box, then we just need to find a server that can provide the background map

[bopjesvla]

Yes, there are a few options to get OpenStreetMap (OSM) map images with a specified center point, zoom level, and custom size. Here are some popular options:

1. OSM Static Map Services

Some servers allow you to create static map images without needing to set up your own tile server.

• OpenStreetMap Static Map API (via MapQuest or similar):
  MapQuest provides a free API for generating OSM-based static maps. You can specify parameters like center latitude and longitude, zoom level, width, and height of the image.

  Example URL format:

  https://www.mapquestapi.com/staticmap/v5/map?key=YOUR_KEY&center=latitude,longitude&zoom=zoom_level&size=width,height
  

  Note: You need to register and get an API key to use the service.

• StaticMapLite: A lightweight, open-source PHP script that can be hosted on your server to generate static map images from OSM tiles.

  • StaticMapLite on GitHub
  • Requires PHP and an OSM tile source but can generate custom images.

2. Mapbox Static Images API

Mapbox provides access to OSM-based maps and supports static map generation with various styling options.

Example URL format:

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/longitude,latitude,zoom/widthxheight?access_token=YOUR_TOKEN

This API requires a Mapbox account and an access token.

3. StaticMap API

This service provides a free API endpoint to generate static maps using OSM tiles. It's commonly used for quick map generation.

Example:

https://staticmap.openstreetmap.de/staticmap.php?center=latitude,longitude&zoom=zoom_level&size=widthxheight

• The size parameter (e.g., size=400x400) controls the image dimensions.
• No API key is required for this service, making it a convenient choice for simple applications.

4. Using Your Own Tile Server

If you need more control or high-volume requests, setting up a local OSM tile server with Leaflet and Leaflet Image plugins allows you to generate static images programmatically. This setup is more complex but suitable for scalable or offline use cases.

Among these, staticmap.openstreetmap.de and Mapbox are widely used for quick OSM-based images with center point and zoom level settings.

[bopjesvla]

I'd first implement #38, use staticmap.openstreetmap.de for images on Hitchwiki, and make the image clickable so it links to the place on Hitchmap.

We can worry about actually displaying spots on the image later.

[bopjesvla]

I couldn't find a nice library to display a static OSM map, so I asked ChatGPT to write one. Seems to work fine:

https://github.com/bopjesvla/tiny-static-map

I'd use this as the "image", and wrap it with a link to the right place/zoom level on Hitchmap.

[bopjesvla]

The easiest way to go about is to add the map tag to the allowed tags on Mediawiki, then run a script on every page that replaces map tags with a hyperlinked map.

---

To allow a new HTML tag on a wiki, the process generally depends on the wiki software you're using. Here’s a basic guide for some popular wiki platforms:

1. MediaWiki

   Configuration File: In MediaWiki, allowed HTML tags are controlled through the AllowedHTML configuration variable. To add tags, you can modify this variable in the LocalSettings.php file.
   Steps:
   Open the LocalSettings.php file in your MediaWiki installation.
   Add or modify the $wgAllowHTMLElements variable to include the tags you want to allow:

   $wgAllowHTMLElements[] = 'newtag';

   Replace newtag with the HTML tag you want to add, e.g., iframe, video, etc.
   Save the changes and clear the cache if needed.

Security Note: Enabling additional HTML tags can pose a security risk, especially for tags like <script>, <iframe>, and others that can be exploited.