Add inital support for vector tiles #114

jplitza · 2024-11-20T20:10:02Z

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 · 2024-11-20T20:50:15Z

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 · 2025-01-17T16:42:20Z

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 · 2025-02-19T19:43:50Z

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 · 2025-02-21T23:14:02Z

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 · 2025-06-25T06:28:54Z

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

jplitza · 2025-06-28T18:29:09Z

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 · 2025-06-28T18:52:27Z

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 · 2025-06-29T11:42:12Z

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.

this is required for compatibility with client libraries which are imported differently

maurerle · 2025-08-01T19:19:27Z

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

jplitza marked this pull request as draft November 20, 2024 20:10

jplitza force-pushed the vector branch 3 times, most recently from 2a3bb01 to 0f26167 Compare June 28, 2025 18:27

jplitza marked this pull request as ready for review June 28, 2025 18:28

maurerle mentioned this pull request Jun 29, 2025

make map.ts compliant to latest leaflet version #179

Merged

3 tasks

maurerle and others added 2 commits August 1, 2025 20:45

npm: fix tsconfig

9e182e1

this is required for compatibility with client libraries which are imported differently

Add inital support for vector tiles

356eb1d

maurerle force-pushed the vector branch from 63c769f to d50491d Compare August 1, 2025 19:17

add attribution and fix zooming bug

3ea930c

maurerle force-pushed the vector branch from d50491d to 3ea930c Compare August 1, 2025 19:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add inital support for vector tiles #114

Add inital support for vector tiles #114

jplitza commented Nov 20, 2024 •

edited

Loading

Uh oh!

jplitza commented Nov 20, 2024

Uh oh!

Jeidnx commented Jan 17, 2025

Uh oh!

T0biii commented Feb 19, 2025 •

edited

Loading

Uh oh!

T0biii commented Feb 21, 2025

Uh oh!

maurerle commented Jun 25, 2025

Uh oh!

jplitza commented Jun 28, 2025 •

edited

Loading

Uh oh!

jplitza commented Jun 28, 2025

Uh oh!

maurerle commented Jun 29, 2025 •

edited

Loading

Uh oh!

maurerle commented Aug 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

Add inital support for vector tiles #114

Are you sure you want to change the base?

Add inital support for vector tiles #114

Conversation

jplitza commented Nov 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

How Has This Been Tested?

Screenshots/links:

Checklist:

Uh oh!

jplitza commented Nov 20, 2024

Uh oh!

Jeidnx commented Jan 17, 2025

Uh oh!

T0biii commented Feb 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

T0biii commented Feb 21, 2025

Uh oh!

maurerle commented Jun 25, 2025

Uh oh!

jplitza commented Jun 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jplitza commented Jun 28, 2025

Uh oh!

maurerle commented Jun 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maurerle commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jplitza commented Nov 20, 2024 •

edited

Loading

T0biii commented Feb 19, 2025 •

edited

Loading

jplitza commented Jun 28, 2025 •

edited

Loading

maurerle commented Jun 29, 2025 •

edited

Loading

maurerle commented Aug 1, 2025 •

edited

Loading