Interactieve plattegrond webapplicatie (image map?)

[Brammiiee]

Ik ben op dit moment bezig een webapplicatie te ontwikkelen. Het doel van deze applicatie is het makkelijker te maken om gegevens van ruimtes op te zoeken. Op dit moment is alle informatie op verschillende plekken verspreid en deze wil ik centraliseren.

Hierbij denk ik aan een interactieve plattegrond van het gebouw. Door op een ruimte te klikken, krijg je alle relevantie informatie te zien (op welke manier dit getoond wordt, is nog niet relevant).

Na wat rondneuzen kwam ik een image map tegen. Hier zou ik alle ruimtes mee kunnen aangeven. Echter is dit een enorme klus aangezien het per verdieping over meer dan 400 ruimtes gaat.

Is een image map bruikbaar om bovenstaande te realiseren? Zijn er betere alternatieven?

dwg's van het gebouw zijn aanwezig. Op dit moment ben ik bezig deze om te zetten naar een svg voor de image map.

Graag hoor ik jullie ideeën hierover!
Alvast bedankt!

[Eric Z]

Weinig ervaring met front-end, maar een imagemap op alle verschillende scherm formaten van nu lijkt mij niet werkbaar.

Een SVG is iets wat je browser snapt, die zijn ook interactief te maken. In die richting zou ik het zoeken.
Dus de SVG niet in een IMG-element stoppen, maar onderdeel van de DOM maken.

[Juup]

Wat Eric Z zegt.
Daarbij helpt het enorm als je dwg export niet alles in 1 grote path stopt maar er losse rect's enzo van maakt.
Daar kun je dan mouse events aan hangen.

[Brammiiee]

Dank voor jullie antwoorden! Ik zal dit verder uitzoeken. Wanneer ik opnieuw hulp nodig heb, weet ik jullie te vinden.

[orf]

Kun je niet gewoon Leaflet gebruiken? https://leafletjs.com/SlavaUkraini/index.html

[Thy...]

Wat @orf zegt, als jou was zou ik eens kijken naar Leaflet. Dit is niet alleen voor de wereldkaart te gebruiken maar ook voor eigen kaarten. Voorbeeld van iemand die een fantasy-kaart klikbaar in Leaflet heeft gemaakt: https://www.youtube.com/watch?v=EmfE9VyAYcY

[Brammiiee]

Dank jullie voor het idee om gebruik te maken van Leaflet. Dit werkt inderdaad erg goed!
Ik heb de tutorial gevolgd en heb nu een kaart waarop ik kan inzoomen.

Nu zou ik willen dat ik op iedere ruimte zou kunnen klikken en hiervan de id kan ophalen. Ik dacht dit te doen door een SVGoverlay met polygons te maken . Ik heb een svg met alle polygons & id's van ruimtes . Echter kan ik niet vinden op welke manier ik al deze polygons in een overlay kan gooien. Handmatig toevoegen van iedere polygon is geen optie, aangezien het 1200+ polygons zijn.

Graag hoor ik of dit mogelijk is.

EDIT: Ik heb de tutorial van een choropleth gekeken, dit is eigenlijk wat ik wil. Echter heb ik geen geoJSON maar een svg file. Ik kan niet vinden hoe ik een dergelijke overlay vanuit svg kan maken

[ Voor 18% gewijzigd door Brammiiee op 22-04-2022 19:23 ]

[matthijsln]

Brammiiee schreef op vrijdag 22 april 2022 @ 19:18:
EDIT: Ik heb de tutorial van een choropleth gekeken, dit is eigenlijk wat ik wil. Echter heb ik geen geoJSON maar een svg file. Ik kan niet vinden hoe ik een dergelijke overlay vanuit svg kan maken

Misschien kan je met QGIS wat. Deze kan ook DXF openen (textformaat van DWG). Met Layer -> Export -> Save Features As... kan je GeoJSON opslaan.

[Brammiiee]

Beste Allen,

Met behulp van QGIS heb ik een GeoJson kunnen maken van de ruimtes. Echter heb ik het volgende probleem:

De overlay met polygons komt niet overeen met de tiles. Onderstaande output krijg ik als ik de geojson in de leaflet toevoeg. Nu kan ik handmatig berekenen( ) hoe ver deze layer uitgezoomd moet worden en hoe deze getransleerd moet worden, echter moet dat makkelijker (en automatisch?) kunnen.

Graag jullie input hierbij

[M0nkeymen]

Er bestaat een viewbox property daarmee kun je schalen en schuiven.