Skip to content

Add inital support for vector tiles#114

Merged
maurerle merged 2 commits intofreifunk:mainfrom
jplitza:vector
Dec 30, 2025
Merged

Add inital support for vector tiles#114
maurerle merged 2 commits intofreifunk:mainfrom
jplitza:vector

Conversation

@jplitza
Copy link
Contributor

@jplitza jplitza commented Nov 20, 2024 •
edited
Loading

Description

Add support for vector tiles.

Motivation and Context

Fixes #74.

Adding to the reasoning there, vector tiles can easily be customized using styles, without setting up a rendering server.

How Has This Been Tested?

Not yet / there are still bugs:

  • Zooming a vector tile layer with the sidebar shown has weird effects. (If the map is fullscreen, it works correctly.)

Screenshots/links:

Checklist:

  • My code follows the code style of this project. (CI will test it anyway and also needs approval)
  • My change requires a change to the documentation.
    • I have updated the documentation accordingly.

@jplitza jplitza marked this pull request as draft November 20, 2024 20:10
@jplitza
Copy link
Contributor Author

jplitza commented Nov 20, 2024

The zoom problem seems to be caused by leaflet-active-area, called here:

meshviewer/lib/map.ts

Lines 47 to 55 in 8131fae

function mapActiveArea() {
map.setActiveArea({
position: "absolute",
left: sidebar.getWidth() + "px",
right: 0,
top: 0,
bottom: 0,
});
}

I don't see an easy fix for that, yet.

@Jeidnx
Copy link
Collaborator

Jeidnx commented Jan 17, 2025

I just tested this on Firefox 134 and Ungoogled-Chromium 131. I didn't have any issues whatsoever! Can you try to reproduce this and maybe upload a video of the problem?

@T0biii
Copy link
Contributor

T0biii commented Feb 19, 2025 •
edited
Loading

i tried this pr because of thinking about using: https://versatiles.org/
i also tested and got the zoom problem too but only if the node infos is expaned

Aufzeichnung.2025-02-19.204834.mp4

config.yml used:

{
  "reverseGeocodingApi": "https://nominatim.openstreetmap.org/reverse",
  "maxAge": 7,
  "maxAgeAlert": 3,
  "nodeZoom": 18,
  "labelZoom": 13,
  "clientZoom": 15,
  "fullscreen": true,
  "fullscreenFrame": true,
  "nodeAttr": [
     {
        "name": "node.status",
        "value": "Status"
     },
     {
        "name": "node.gateway",
        "value": "Gateway"
     },
     {
        "name": "node.coordinates",
        "value": "GeoURI"
     },
     {
        "name": "node.contact",
        "value": "owner"
     },
     {
        "name": "node.hardware",
        "value": "model"
     },
     {
        "name": "node.primaryMac",
        "value": "mac"
     },
     {
        "name": "node.firmware",
        "value": "Firmware"
     },
     {
        "name": "node.uptime",
        "value": "Uptime"
     },
     {
        "name": "node.firstSeen",
        "value": "FirstSeen"
     },
     {
        "name": "node.systemLoad",
        "value": "Load"
     },
     {
        "name": "node.ram",
        "value": "RAM"
     },
     {
        "name": "node.ipAddresses",
        "value": "IPs"
     },
     {
        "name": "node.update",
        "value": "Autoupdate"
     },
     {
        "name": "node.domain",
        "value": "Domain"
     },
     {
        "name": "node.clients",
        "value": "Clients"
     }
  ],
  "supportedLocale": [
     "en",
     "de",
     "cz",
     "fr",
     "tr",
     "ru"
  ],
  "icon": {
     "base": {
        "fillOpacity": 0.6,
        "opacity": 0.6,
        "weight": 2,
        "radius": 6,
        "className": "stroke-first"
     },
     "online": {
        "color": "#1566A9",
        "fillColor": "#1566A9"
     },
     "offline": {
        "color": "#D43E2A",
        "fillColor": "#D43E2A",
        "radius": 3
     },
     "lost": {
        "color": "#D43E2A",
        "fillColor": "#D43E2A",
        "radius": 4
     },
     "alert": {
        "color": "#D43E2A",
        "fillColor": "#D43E2A",
        "radius": 5
     },
     "new": {
        "color": "#1566A9",
        "fillColor": "#93E929"
     }
  },
  "client": {
     "wifi24": "rgba(220, 0, 103, 0.7)",
     "wifi5": "rgba(10, 156, 146, 0.7)",
     "other": "rgba(227, 166, 25, 0.7)"
  },
  "map": {
     "labelNewColor": "#459c18",
     "tqFrom": "#F02311",
     "tqTo": "#04C714",
     "highlightNode": {
        "color": "#ad2358",
        "weight": 8,
        "fillOpacity": 1,
        "opacity": 0.4,
        "className": "stroke-first"
     },
     "highlightLink": {
        "weight": 4,
        "opacity": 1,
        "dashArray": "5, 10"
     }
  },
  "forceGraph": {
     "nodeColor": "#fff",
     "nodeOfflineColor": "#D43E2A",
     "highlightColor": "rgba(255, 255, 255, 0.2)",
     "labelColor": "#fff",
     "tqFrom": "#770038",
     "tqTo": "#dc0067",
     "zoomModifier": 1
  },
  "locate": {
     "outerCircle": {
        "stroke": false,
        "color": "#4285F4",
        "opacity": 1,
        "fillOpacity": 0.3,
        "clickable": false,
        "radius": 16
     },
     "innerCircle": {
        "stroke:": true,
        "color": "#ffffff",
        "fillColor": "#4285F4",
        "weight": 1.5,
        "clickable": false,
        "opacity": 1,
        "fillOpacity": 1,
        "radius": 7
     },
     "accuracyCircle": {
        "stroke": true,
        "color": "#4285F4",
        "weight": 1,
        "clickable": false,
        "opacity": 0.7,
        "fillOpacity": 0.2
     }
  },
  "cacheBreaker": "22967a527",
  "nodeInfos": [
     {
        "name": "Clients (24 Stunden)",
        "image": "https://stats.ffmuc.net/render/d-solo/hRIn3dRWk/mesh-nodes?orgId=1&panelId=2&var-nodeid={NODE_ID}&width=450&height=300&theme=light&from=now-24h",
        "href": "https://stats.ffmuc.net/d/hRIn3dRWk/mesh-nodes?orgId=1&var-nodeid={NODE_ID}",
        "title": "Clients - Knoten {NODE_ID}"
     },
     {
        "name": "Traffic (24 Stunden)",
        "image": "https://stats.ffmuc.net/render/d-solo/hRIn3dRWk/mesh-nodes?panelId=6&var-nodeid={NODE_ID}&width=450&height=400&theme=light&from=now-24h",
        "href": "https://stats.ffmuc.net/d/hRIn3dRWk/mesh-nodes?orgId=1&var-nodeid={NODE_ID}",
        "title": "Traffic - Knoten {NODE_ID}"
     },
     {
        "name": "Clients (7 Tage)",
        "image": "https://stats.ffmuc.net/render/d-solo/hRIn3dRWk/mesh-nodes?panelId=2&var-nodeid={NODE_ID}&width=450&height=300&theme=light&from=now-7d",
        "href": "https://stats.ffmuc.net/d/hRIn3dRWk/mesh-nodes?orgId=1&var-nodeid={NODE_ID}",
        "title": "Clients - Knoten {NODE_ID}"
     },
     {
        "name": "Traffic (7 Tage)",
        "image": "https://stats.ffmuc.net/render/d-solo/hRIn3dRWk/mesh-nodes?panelId=6&var-nodeid={NODE_ID}&width=450&height=400&theme=light&from=now-7d",
        "href": "https://stats.ffmuc.net/d/hRIn3dRWk/mesh-nodes?orgId=1&var-nodeid={NODE_ID}",
        "title": "Traffic - Knoten {NODE_ID}"
     },
     {
        "name": "Uptime (7 Tage)",
        "image": "https://stats.ffmuc.net/render/d-solo/hRIn3dRWk/mesh-nodes?panelId=8&var-nodeid={NODE_ID}&width=450&height=400&theme=light&from=now-7d",
        "href": "https://stats.ffmuc.net/d/hRIn3dRWk/mesh-nodes?orgId=1&var-nodeid={NODE_ID}",
        "title": "Traffic - Knoten {NODE_ID}"
     }
  ],
  "globalInfos": [
     {
        "name": "Clients",
        "title": "Clients pro Segment",
        "href": "https://stats.ffmuc.net",
        "image": "https://stats.ffmuc.net/render/d-solo/kUoZ2DRWz/network-overview?panelId=6&orgId=1&theme=light&width=500&height=500"
     },
     {
        "name": "Traffic",
        "title": "Traffic pro Server",
        "href": "https://stats.ffmuc.net",
        "image": "https://stats.ffmuc.net/render/d-solo/kUoZ2DRWz/network-overview?panelId=7&orgId=1&theme=light&width=500&height=500"
     }
  ],
  "dataPath": [
     "https://map.ffmuc.net/data/"
  ],
  "siteName": "Freifunk München",
  "mapLayers": [
  {
    "name": "versatiles",
    "url": "https://demotiles.maplibre.org/style.json",
    "type": "vector",
    "config": {
      "type": "osm",
      "maxZoom": 19,
      "attribution": "<a href='https://github.com/freifunk/meshviewer/issues' target='_blank'>Report Bug</a> | Map data &copy; <a href\"http://openstreetmap.org\">OpenStreetMap</a> contributor"
    }
  }
  ],
  "backup_map_provider_ffmuc": [
     {
        "name": "HERE",
        "url": "https://{s}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=YOUR_KEY&app_code=YOUR_CODE&lg=deu",
        "config": {
           "attribution": "Map &copy; 1987-2014 <a href=\"http://developer.here.com\">HERE</a>",
           "subdomains": "1234",
           "maxZoom": 20
        }
     },
     {
        "name": "HERE.hybridDay",
        "url": "https://{s}.aerial.maps.api.here.com/maptile/2.1/maptile/newest/{variant}/{z}/{x}/{y}/256/png8?app_id=YOUR_KEY&app_code=YOUR_CODE&lg=deu",
        "config": {
           "attribution": "Map &copy; 1987-2014 <a href=\"http://developer.here.com\">HERE</a>",
           "subdomains": "1234",
           "variant": "hybrid.day",
           "maxZoom": 20
        }
     }
  ],
  "fixedCenter": [
     [
        48.3957886,
        12.012732
     ],
     [
        48.0428527,
        11.2707154
     ]
  ],
  "domainNames": [
     {
        "domain": "",
        "name": "Unknown Domain"
     },
     {
        "domain": "ffdon_mitte",
        "name": "Donau-Ries - Mitte"
     },
     {
        "domain": "ffdon_nordwest",
        "name": "Donau-Ries - Nordwest"
     },
     {
        "domain": "ffdon_sued",
        "name": "Donau-Ries - Süd"
     },
     {
        "domain": "ffmuc_muc_cty",
        "name": "München - Stadt"
     },
     {
        "domain": "ffmuc_muc_nord",
        "name": "München - Nord"
     },
     {
        "domain": "ffmuc_muc_ost",
        "name": "München - Ost"
     },
     {
        "domain": "ffmuc_muc_sued",
        "name": "München - Süd"
     },
     {
        "domain": "ffmuc_muc_west",
        "name": "München - West"
     },
     {
        "domain": "ffmuc_uml_nord",
        "name": "Bayern - Südnord"
     },
     {
        "domain": "ffmuc_uml_ost",
        "name": "Bayern - Südost"
     },
     {
        "domain": "ffmuc_uml_sued",
        "name": "Bayern - Südsüd"
     },
     {
        "domain": "ffmuc_uml_west",
        "name": "Bayern - Südwest"
     },
     {
        "domain": "ffmuc_welt",
        "name": "Welt"
     },
     {
        "domain": "ffmuc_augsburg",
        "name": "Augsburg"
     },
     {
        "domain": "ffmuc_gauting",
        "name": "Gauting"
     },
     {
        "domain": "ffmuc_freising",
        "name": "Freising"
     },
     {
       "domain": "ffmuc_ulm",
       "name": "Ulm"
     },
     {
        "domain": "ffwert_city",
        "name": "Wertingen - City"
     },
     {
        "domain": "ffwert_events",
        "name": "Wertingen - Events"
     },
     {
        "domain": "ffmuc_unifi_respondd_fallback",
        "name": "UniFi",
        "filterClients": true
     },
     {
        "domain": "omada_respondd_fallback",
        "name": "Omada",
        "filterClients": true
     }
  ],
  "linkList": [
     {
        "title": "Chat",
        "href": "https://chat.ffmuc.net"
     },
     {
        "title": "Tickets",
        "href": "https://tickets.ffmuc.net"
     },
     {
        "title": "Statistiken",
        "href": "https://stats.ffmuc.net"
     },
     {
        "title": "Kontakt",
        "href": "https://ffmuc.net/kontakt"
     },
     {
        "title": "Impressum",
        "href": "https://ffmuc.net/impressum/"
     }
  ],
   "devicePictures": "https://map.aachen.freifunk.net/pictures-svg/{MODEL_NORMALIZED}.svg",
   "devicePicturesSource": "<a href='https://github.com/freifunk/device-pictures'>https://github.com/freifunk/device-pictures</a>",
   "devicePicturesLicense": "CC-BY-NC-SA 4.0",
  "deprecation_text": "Dieses Gerät ist leider veraltet und wird voraussichtlich nach 2024 nicht mehr durch Software-Updates unterstützt - <a href='https://ffmuc.net/freifunkmuc/2023/12/08/supportende-von-8-64-routern/'>Mehr Infos</a>",
  "eol_text": "Dieses Gerät ist leider veraltet und wird nicht mehr durch Software-Updates unterstützt - <a href='https://bitte-router-erneuern.ffmuc.net/'>Mehr Infos</a>",
  "deprecation_enabled": true,
  "eol": [
    "A5-V11",
    "AP121",
    "AP121U",
    "D-Link DIR-615",
    "D-Link DIR-615 D",
    "D-Link DIR-825",
    "AVM FRITZ!Box 7320",
    "AVM FRITZ!Box 7330",
    "AVM FRITZ!Box 7330 SL",
    "TP-Link RE200 v1",
    "TP-Link RE200 v2",
    "TP-Link RE200 v3",
    "TP-Link RE200 v4",
    "TP-Link RE305 v1",
    "TP-Link RE305 v2",
    "TP-Link RE305 v3",
    "TP-Link RE355 v1",
    "TP-Link RE450 v1",
    "TP-Link RE450 v2",
    "TP-Link RE450 v3",
    "TP-Link TL-MR13U v1",
    "TP-Link TL-MR3020 v1",
    "TP-Link TL-MR3040 v1",
    "TP-Link TL-MR3040 v2",
    "TP-Link TL-MR3220 v1",
    "TP-Link TL-MR3220 v2",
    "TP-Link TL-MR3420 v1",
    "TP-Link TL-MR3420 v2",
    "TP-Link TL-WA701N/ND v1",
    "TP-Link TL-WA701N/ND v2",
    "TP-Link TL-WA730RE v1",
    "TP-Link TL-WA750RE v1",
    "TP-Link TL-WA801N/ND v1",
    "TP-Link TL-WA801N/ND v2",
    "TP-Link TL-WA801N/ND v3",
    "TP-Link TL-WA830RE v1",
    "TP-Link TL-WA830RE v2",
    "TP-Link TL-WA850RE v1",
    "TP-Link TL-WA860RE v1",
    "TP-Link TL-WA901N/ND v1",
    "TP-Link TL-WA901N/ND v2",
    "TP-Link TL-WA901N/ND v3",
    "TP-Link TL-WA901N/ND v4",
    "TP-Link TL-WA901N/ND v5",
    "TP-Link TL-WA7210N v2",
    "TP-Link TL-WA7510N v1",
    "TP-Link TL-WR703N v1",
    "TP-Link TL-WR710N v1",
    "TP-Link TL-WR710N v2",
    "TP-Link TL-WR710N v2.1",
    "TP-Link TL-WR740N/ND v1",
    "TP-Link TL-WR740N/ND v3",
    "TP-Link TL-WR740N/ND v4",
    "TP-Link TL-WR740N/ND v5",
    "TP-Link TL-WR741N/ND v1",
    "TP-Link TL-WR741N/ND v3",
    "TP-Link TL-WR741N/ND v4",
    "TP-Link TL-WR741N/ND v5",
    "TP-Link TL-WR743N/ND v1",
    "TP-Link TL-WR743N/ND v2",
    "TP-Link TL-WR840N v2",
    "TP-Link TL-WR841N/ND v3",
    "TP-Link TL-WR841N/ND v5",
    "TP-Link TL-WR841N/ND v7",
    "TP-Link TL-WR841N/ND v8",
    "TP-Link TL-WR841N/ND v9",
    "TP-Link TL-WR841N/ND v10",
    "TP-Link TL-WR841N/ND v11",
    "TP-Link TL-WR841N/ND v12",
    "TP-Link TL-WR841N/ND Mod (16M) v11",
    "TP-Link TL-WR841N/ND Mod (16M) v10",
    "TP-Link TL-WR841N/ND Mod (16M) v8",
    "TP-Link TL-WR841N/ND Mod (16M) v9",
    "TP-Link TL-WR841N/ND Mod (8M) v10",
    "TP-Link TL-WR842N/ND v1",
    "TP-Link TL-WR842N/ND v2",
    "TP-Link TL-WR843N/ND v1",
    "TP-Link TL-WR940N v1",
    "TP-Link TL-WR940N v2",
    "TP-Link TL-WR940N v3",
    "TP-Link TL-WR940N v4",
    "TP-Link TL-WR940N v5",
    "TP-Link TL-WR940N v6",
    "TP-Link TL-WR941N/ND v2",
    "TP-Link TL-WR941N/ND v3",
    "TP-Link TL-WR941N/ND v4",
    "TP-Link TL-WR941N/ND v5",
    "TP-Link TL-WR941N/ND v6",
    "TP-Link TL-WR1043N/ND v1",
    "D-Link DIR-615 D1",
    "D-Link DIR-615 D2",
    "D-Link DIR-615 D3",
    "D-Link DIR-615 D4",
    "D-Link DIR-615 H1",
    "Ubiquiti NanoStation loco M2",
    "Ubiquiti NanoStation M2",
    "Ubiquiti PicoStation M2",
    "Ubiquiti Bullet M",
    "Ubiquiti Bullet M2",
    "Ubiquiti AirRouter",
    "VoCore 8M",
    "VoCore 16M"
  ],
  "deprecated": [
     "TP-Link Archer C2 v3",
     "TP-Link Archer C6 v2 (EU/RU/JP)",
     "TP-Link Archer C6 v2",
     "TP-Link Archer C6 v3",
     "TP-Link Archer C20 v4",
     "TP-Link Archer C20i",
     "TP-Link Archer C25 v1",
     "TP-Link Archer C50 v1",
     "TP-Link Archer C50 v3",
     "TP-Link Archer C50 v4",
     "TP-Link Archer C50 v6",
     "TP-Link Archer C60 v1",
     "TP-Link Archer C60 v2",
     "TP-Link CPE210 v1.0",
     "TP-Link CPE210 v1.1",
     "TP-Link CPE210 v1",
     "TP-Link CPE210 v2.0",
     "TP-Link CPE210 v2",
     "TP-Link CPE210 v3.0",
     "TP-Link CPE210 v3.20",
     "TP-Link CPE210 v3",
     "TP-Link CPE510 v1.0",
     "TP-Link CPE510 v1.1",
     "TP-Link CPE510 v1",
     "TP-Link CPE510 v2",
     "TP-Link CPE510 v3",
     "TP-Link TL-WR902AC v1",
     "TP-Link TL-WR902AC v3",
     "TP-Link WBS210 v1.20",
     "TP-Link WBS210 v2",
     "TP-Link WBS510 v1"
  ]
}

@T0biii
Copy link
Contributor

T0biii commented Feb 21, 2025

https://github.com/jplitza/meshviewer/blob/66d5494a643d5d0bbb8aeeb68a02136bafb87347/lib/map.ts#L50
chaning this to relative did the fix for me
See:
https://github.com/T0biii/meshviewer/commit/b523f40cc9248ee3776bb8e2bbfc7af9b292b2f0.diff

1.mp4

@maurerle
Copy link
Member

maurerle commented Jun 25, 2025

@jplitza can you please rebase this PR and adapt the fix for the open issue mentioned in the previous comment:
#114 (comment)

@jplitza jplitza force-pushed the vector branch 3 times, most recently from 2a3bb01 to 0f26167 Compare June 28, 2025 18:27
@jplitza jplitza marked this pull request as ready for review June 28, 2025 18:28
@jplitza
Copy link
Contributor Author

jplitza commented Jun 28, 2025 •
edited
Loading

I could have saved a lot of time if I hadn't tried to be clever and update maplibre-gl-leaflet to the latest 0.1.1 release. I had my reasons for choosing 0.0.17 (namely that it's the last release to support leaflet 1.7.1, which meshviewer seems to require).

Anyway, rebased and including the "relative fix".

@jplitza
Copy link
Contributor Author

jplitza commented Jun 28, 2025

While adding a vector tile layer to the config.example.json, I noticed that this old version of maplibre-gl-leaflet doesn't support attribution correctly. That probably should be a blocker for this PR.

@maurerle maurerle mentioned this pull request Jun 29, 2025
Merged
3 tasks
@maurerle
Copy link
Member

maurerle commented Jun 29, 2025 •
edited
Loading

nice @jplitza - can you check if everything works with the updated leaflet version in #179 ?
I don't quite know how the latest version of maplibre-gl-leaflet must be held and got errors when using this PR with the updated version.

Checked: It works fine with 0.0.17, but not with 0.1.1.
There I get The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@mapbox/tiny-sdf")' call instead. which seemst to be an issue in maplibre-gl.

@maurerle maurerle force-pushed the vector branch 2 times, most recently from d50491d to 3ea930c Compare August 1, 2025 19:18
@maurerle
Copy link
Member

maurerle commented Aug 1, 2025 •
edited
Loading

tested and working - attribution works, zooming works.
@jplitza can you have a look at this?

@maurerle
Copy link
Member

maurerle commented Dec 30, 2025

I think that this did lay around for long enough - we had this deployed in FFAC for quite a while and did not have any issues with it.

@maurerle maurerle merged commit 10180c3 into freifunk:main Dec 30, 2025
2 checks passed
@jplitza jplitza deleted the vector branch January 1, 2026 14:51
@T0biii
Copy link
Contributor

T0biii commented Feb 24, 2026

just notice mode, maxzoom and order is missing when vectore is selected as type
maxzoom i added via #301 but the mode for darkmode i am not sure how to add this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Support of vectortiles

4 participants

@jplitza @Jeidnx @T0biii @maurerle