Content integreren

Wanneer u uw pagina bewerkt in expert modus, kan u andere content rechtstreeks in uw pagina integreren.

Een Opendatasoft-weergave invoegen

Wanneer u een weergave op een Opendatasoft-portaal (inclusief uw eigen portaal) doorbladert, kan u onderaan enkele opties zien om de content te delen, waaronder "Invoegen", die u een kleine HTML-code zal geven die u in uw pagina kan plakken. Hiermee kan u de weergave in uw pagina invoegen.

Een Twitter-tijdslijn invoegen

Wanneer u een Twitter-account heeft, kan u Twitter "widgets" aanmaken vanuit de accountpagina van Twitter die speciaal ontwikkeld zijn om geïntegreerd te worden in andere websites (zoals een blog). Wanneer u een widget aanmaakt, geeft Twitter u een kleine "code" die u in uw HTML-code kan plakken. Uit veiligheidsoverwegingen is JavaScript geblokkeerd in de pagina editor van Opendatasoft, dus kan u de code die gegeven wordt door Twitter niet rechtstreeks gebruiken. Wel bieden we u Opendatasoft-widget om dit te doen.

Eerst moet u het "Widget-ID" terugvinden dat in de eerste lijn van de code staat in het attribuut data-widget-id:

<a class="twitter-timeline" data-dnt="true" href="**https://twitter.com/hashtag/opendata**" data-widget-id="12341234123412341234">My tweets</a>

In dit voorbeeld is het Widget-ID "12341234123412341234".

Voeg vervolgens deze widget toe in uw pagina met behulp van uw Widget-ID in het attribuut widget-id:

<ods-twitter-timeline widget-id=""12341234123412341234></ods-twitter-timeline>

Content van derden invoegen

Diensten, zoals YouTube voorzien vaak manieren om hun content in te voegen in andere websites onder de vorm van een plakbare code. Uit veiligheidsoverwegingen laten we gebruikers niet toe om JavaScript te schrijven in pagina's en mogelijk zijn sommige van deze invoegcodes opgemaakt in JavaScript, waardoor deze niet zullen werken op uw pagina's. De meeste diensten voorzien evenwel een code die gebaseerd is op "iframes", wat ok is. Werkende embeds omvatten YouTube, Vimeo of Dailymotion.

Widgets gebruiken

Wanneer u uw paginacontent bewerkt in expert modus, wil u misschien gebruik maken van de ODS-Widgets bibliotheek. Dit is een reeks componenten, die beschikbaar zijn als HTML-elementen en die u toelaten dataweergaves te integreren in uw paginacode en interactieve pagina's te bouwen door widgets te combineren.

De ODS-Widgets bibliotheek is een open source, AngularJS-gebaseerd kader dat door Opendatasoft ontwikkeld en onderhouden wordt op GitHub. Ze beschikt over een volledige en allesomvattende online documentatie.

Ze kan rechtstreeks gebruikt worden in de contentpagina's van uw domein of in websites van derden als een stand-alone toolkit.

Opmerking

Ondanks het feit dat ze gebaseerd zijn op AngularJS, zijn ODS-Widgets ontwikkeld om gebruik te worden als een reeks HTML-elementen en kunnen ze daardoor volledig gebruikt worden in HTML-code, zonder dat JavaScript moet geschreven worden. Daardoor kunnen ze door iedereen die enkele noties heeft van HTML gebruikt worden en vereisen ze geen ontwikkelingsvaardigheden. Bovendien verschaffen vele weergaves uit Opendatasoft de equivalente widgetscode in real time wanneer u deze gebruikt vanuit het portaal. Dus kan u leren door te starten vanuit het resultaat van een weergave en van daaruit herhalen.

Naast alle widgets die aangeboden worden door de ods-widgets bibliotheek, zijn er enkele bijkomende richtlijnen beschikbaar om te worden gebruikt binnen de contentpagina's op het platform. In tegenstelling tot de widgets, kunnen deze niet gebruikt worden op websites van derden aangezien deze strak gekoppeld zijn met het platform.

Lijst met widgets

odsAggregation

  • Deze widget toont de resultaten van een aggregatiefunctie op een datasetveld. Kan bijvoorbeeld gebruikt worden om de gemiddelde temperatuur van een weerdataset weer te geven. Het resultaat wordt weergegeven in een nieuwe variabele die u in andere widgets of rechtstreeks in uw HTML kan gebruiken.

  • Volledige documentatie

odsAnalysis

  • Deze widget toont de resultaten van meervoudige aggregatie op basis van een as. Net zoals voor een grafiek berekent ze voor elke waarde van de X-as aggregatiefuncties. Deze kan gebruikt worden met ngRepeat van AngularJS om gewoon een tabel met analyseresultaten te bouwen.

  • Volledige documentatie

  • Gekoppeld aan odsAnalysisSerie

odsBreezometer

  • Integreert een Breezometer "widget" met behulp van de widgetsleutel die verschaft wordt door Breezometer

  • Volledige documentatie

odsCalendar

  • Deze widget kan elke dataset nemen die minstens twee datumtijdvelden en een tekstveld bevat en deze gebruiken om een kalender weer te geven. Deze kan in één keer maximaal 1000 gebeurtenissen (records) laden.

  • Volledige documentatie

odsCatalogContext

  • Een "cataloguscontext" vertegenwoordigt de volledige catalogus (lijst) van datasets uit een welbepaald domein en een reeks parameters die gebruikt worden op zoekopdrachten uit te voeren in deze catalogus.

  • Volledige documentatie

odsChart

  • Deze widget is de basiswidget waarmee grafieken uit Opendatasoft-datasets kunnen worden weergegeven. Een grafiek wordt gedefinieerd door één of meerdere reeksen die hun data krijgen uit één of meerdere datasets die vertegenwoordigd worden door een Dataset Context, een type grafiek en meerdere parameters om het voorkomen van de grafiek te finetunen.

  • Volledige documentatie

  • Gekoppeld aan odsChartQuery en odsChartSerie

odsClearAllFilters

  • Deze widget toont een knop die alle actieve filters in de gegeven context zal wissen.

  • Volledige documentatie

odsDatasetCard

  • Wanneer u deze richtlijn rond een element of een reeks elementen vouwt, geeft deze een uitrekbare kaart erboven weer om de titel en de beschrijving van de dataset te tonen, samen met een koppeling naar het portaal dat de dataset en de licentie die verbonden is aan de data toont.

  • Volledige documentatie

odsDatasetContext

  • Een "datasetcontext" vertegenwoordigt een dataset en een reeks parameters die gebruikt worden om zoekopdrachten uit te voeren op deze data. Een context kan gebruikt worden door één of meerdere richtlijnen zodat deze informatie kunnen delen (meestal de parameters van de zoekopdracht).

  • Volledige documentatie

odsDatetime

  • Geeft de lokale ISO datumtijd en slaat deze op in een variabele (in het toepassingsgebied).

  • Volledige documentatie

odsDisqus

  • Deze widget toont een Disqus-paneel waar gebruikers commentaar kunnen geven op de pagina.

  • Volledige documentatie

  • Meer informatie over Disqus configereren /!nog te schrijven

odsDomainStatistics

  • Deze widget somt statistische waarden op voor een welbepaalde catalogus en injecteert deze als variabelen in de context.

  • Volledige documentatie

odsFacetResults

  • Deze widget haalt de resultaten op van het opsommen van de waarden ("categorieën") van een facet en stelt deze voor in een variabele die beschikbaar is in het toepassingsgebied. Deze kan gebruikt worden met ngRepeat van AngularJS om gewoon een lijst met resultaten te bouwen.

  • Volledige documentatie

odsFacets

  • Deze widget geeft filters (facetten) weer voor een dataset of een catalogus van datasets van een domein waardoor de gebruikers dynamisch kunnen "verfijnen" op één of meerdere categorieën voor de context.

  • Volledige documentatie

odsFilterSummary

  • Deze widget geeft een samenvatting weer van alle actieve filters op een context: zoekopdracht van tekst, verfijningen, ...

  • Volledige documentatie

odsGauge

  • Deze widget geeft een peilstok weer op één van de volgende twee manieren: cirkel of horizontale balk. De widget berust op CSS3 en SVG en het gevolg hiervan is dat deze volledig kan worden aangepast in CSS.

  • Volledige documentatie

odsGeoSearch

  • Deze widget geeft een minikaart weer met een tool "teken rechthoek" die gebruikt kan worden om in een volledige catalogus te zoeken.

  • Volledige documentatie

odsGeotooltip

  • Deze richtlijn, wanneer deze gebruikt worden om een tekst te omringen, geeft een tooltip weer die een punt en/of een vorm in een kaart toont.

  • Volledige documentatie

odsHubspotForm

odsInfiniteScrollResults

  • Deze widget geeft de resultaten weer van een zoekopdracht in een oneindige scroll-lijst. Hij gebruikt de HTML-template in de widget tag en herhaalt deze voor elk resultaat.

  • Volledige documentatie

odsLastDatasetsFeed

  • Deze widget geeft de laatste datasets van een catalogus weer (standaard is de laatste 5), gebaseerd op de gewijzigde metadata.

  • Volledige documentatie

odsLastReusesFeed

  • Deze widget geeft de laatste hergebruiken weer die gepubliceerd zijn op een domein (standaard 5).

  • Volledige documentatie

odsMap

  • Met deze widget kan u een kaartweergave bouwen en data tonen door gebruik te maken van verschillende weergavemanieren met behulp van lagen. Elke laag is gebaseerd op een Dataset Context, een weergavemanier (clusters, ...) en verschillende eigenschappen om te weergave zelf te definiëren, zoals kleuren.

  • Volledige documentatie

odsMediaGallery

  • Deze widget geeft een afbeeldingengalerij van een dataset weer die media met thumbnails (afbeeldingen, pdf-bestanden, ...) bevat met oneindige scroll.

  • Volledige documentatie

odsMostPopularDatasets

  • Deze widget geeft de belangrijkste datasets van een catalogus weer (standaard de 5 belangrijkste datasets) op basis van het aantal downloads.

  • Volledige documentatie

odsMostUsedThemes

odsPicto

  • Deze widget geeft een "picto" weer die gespecificeerd wordt door een URL en dwingt om een kleur ervoor in te vullen. Dit element kan gestyled worden (hoogte, breedte, ...), vooral wanneer de picto vectoreel is (SVG).

  • Volledige documentatie

odsPlumeAirQuality

odsRecordImage

odsRedirectIfNotLoggedIn

  • Deze widget forceert een doorsturing naar de inlogpagina van het domein wanneer de gebruiker niet ingelogd is.

  • Volledige documentatie

odsResultEnumerator

  • Deze widget somt de resultaten op van een zoekopdracht (records voor een Dataset Context, datasets voor een Catalog Context) en herhaalt de template (de content van het richtlijnelement) voor elk ervan.

  • Volledige documentatie

odsResults

  • Deze widget geeft de resultaten weer van een zoekopdracht (als een array) in een variabele die beschikbaar is in het toepassingsgebied. Deze kan gebruikt worden met ngRepeat van AngularJS om gewoon een lijst met resultaten te bouwen.

  • Volledige documentatie

odsReuses

  • Deze widget geeft alle hergebruiken weer die gepubliceerd zijn op een domein, in een oneindige lijst met grote vakken die deze weergeven in een duidelijke weergave. In de lijsten staan eerst de meest recente hergebruiken.

  • Volledige documentatie

odsSearchbox

  • Deze widget geeft een breed zoekvak weer dat de zoekopdracht op de Explore homepagina van het domein doorstuurt.

  • Volledige documentatie

odsSocialButtons

  • Deze widget geeft een deel-knop weer die deel-knoppen voor sociale media zal onthullen.

  • Volledige documentatie

odsSpinner

  • Deze widget geeft de aanpasbare Opendatasoft-spinner weer. De grote en kleur ervan stemt overeen met de huidige lettertypes.

  • Volledige documentatie

odsTable

  • Deze widget geeft een tabelweergave van een dataset weer met oneindige scroll en een mogelijkheid om kolommen te sorteren (afhankelijk van de soorten kolommen).

  • Volledige documentatie

odsTagCloud

  • Deze widget geeft een "tag cloud" weer van de waarden die beschikbaar zijn in een facet (ofwel de facet van een dataset of een facet uit de datasetcatalogus).

  • Volledige documentatie

odsTextSearch

  • Deze widget geeft een zoekvak weer dat gebruikt kan worden om een zoekopdracht met volledige tekst uit te voeren op een context.

  • Volledige documentatie

odsThemeBoxes

  • Deze widget somt de thema's op die beschikbaar zijn op het domein, door het tonen van hun pictogrammen en het aantal datasets die ze bevatten.

  • Volledige documentatie

odsThemePicto

odsTimerange

  • Deze widget geeft de twee velden weer om de twee grenzen van een datum- en tijdbereik te selecteren.

  • Volledige documentatie

odsTimescale

  • Geeft een controle weer om ofwel laatste dag, laatste week, laatste maand of laatste jaar te selecteren.

  • Volledige documentatie

odsTopPublishers

odsTwitterTimeline

  • Integreert een Twitter "widget" door gebruikt te maken van het widget-ID dat aangeleverd wordt door Twitter.

  • Volledige documentatie

Filters

Naast AngularJS-filters, omvat de widgetsbibliotheek van Opendatasoft enkele extra widgets die gebruikt kunnen worden in aanpasbare pagina's:
capitalize, fieldsFilter, firstValue, imageify, imageUrl, isAfter, isBefore, isDefined, isEmpty, join, keys, moment, momentadd, momentdiff, nofollow, normalize, numKeys, shortSummary, slugify, split, stringify, themeColor, themeSlug, thumbnailUrl, timesince, toObject, truncate, values, videoify