Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add inital support for vector tiles #114

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add inital support for vector tiles #114

wants to merge 1 commit into from

Conversation

jplitza
Copy link

@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
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

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

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

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
3 participants
@jplitza @Jeidnx @T0biii