[{"data":1,"prerenderedAt":650},["Reactive",2],{"navigation-list":3,"page-/examples/vehicles/vehicle-list-navigation-name":460,"page-/examples/vehicles/vehicle-list":461},{"api-reference":4,"basics":312,"examples":353,"tree":440},{"asideHeader":5,"sectionList":6,"mainHeader":311},"API reference",[7,29,50,95,120,142,155,188,217,249,270],{"label":8,"navigation":-1,"to":9,"icon":10,"itemList":11},"API","/api-reference/api","medium/products/api",[12,17,21,25],{"label":13,"navigation":14,"to":15,"icon":-1,"itemList":16},"Quick setup guide","api-reference","/api-reference/api/quick-setup-guide",[],{"label":18,"navigation":14,"to":19,"icon":-1,"itemList":20},"Pagination","/api-reference/api/pagination",[],{"label":22,"navigation":14,"to":23,"icon":-1,"itemList":24},"API lifecycle","/api-reference/api/api-lifecycle",[],{"label":26,"navigation":14,"to":27,"icon":-1,"itemList":28},"Beta features","/api-reference/api/beta-features",[],{"label":30,"navigation":-1,"to":31,"icon":32,"itemList":33},"Vehicles","/api-reference/vehicle","medium/products/vehicle",[34,38,42,46],{"label":35,"navigation":14,"to":36,"icon":-1,"itemList":37},"Vehicle introduction","/api-reference/vehicle/introduction",[],{"label":39,"navigation":14,"to":40,"icon":-1,"itemList":41},"Query vehicles","/api-reference/vehicle/query-vehicles",[],{"label":43,"navigation":14,"to":44,"icon":-1,"itemList":45},"Query vehicle details","/api-reference/vehicle/query-vehicle-details",[],{"label":47,"navigation":14,"to":48,"icon":-1,"itemList":49},"Query premium vehicle details","/api-reference/vehicle/query-premium-vehicle-details",[],{"label":51,"navigation":-1,"to":52,"icon":53,"itemList":54},"Stations","/api-reference/stations","medium/products/charge-station",[55,59,63,67,71,75,79,83,87,91],{"label":56,"navigation":14,"to":57,"icon":-1,"itemList":58},"Station introduction","/api-reference/stations/introduction",[],{"label":60,"navigation":14,"to":61,"icon":-1,"itemList":62},"Query station details","/api-reference/stations/query-station-details",[],{"label":64,"navigation":14,"to":65,"icon":-1,"itemList":66},"Query stations around a GeoJSON point","/api-reference/stations/query-stations-around",[],{"label":68,"navigation":14,"to":69,"icon":-1,"itemList":70},"Query station reviews","/api-reference/stations/query-stations-reviews",[],{"label":72,"navigation":14,"to":73,"icon":-1,"itemList":74},"Mutate to create a station review","/api-reference/stations/mutate-station-reviews",[],{"label":76,"navigation":14,"to":77,"icon":-1,"itemList":78},"Query station operators","/api-reference/stations/query-station-operators",[],{"label":80,"navigation":14,"to":81,"icon":-1,"itemList":82},"Query station operator details","/api-reference/stations/query-station-operator-details",[],{"label":84,"navigation":14,"to":85,"icon":-1,"itemList":86},"Query station tariffs","/api-reference/stations/query-station-tariffs",[],{"label":88,"navigation":14,"to":89,"icon":-1,"itemList":90},"Query station tariff details","/api-reference/stations/query-station-tariff-details",[],{"label":92,"navigation":14,"to":93,"icon":-1,"itemList":94},"Query station amenities","/api-reference/stations/query-station-amenities",[],{"label":96,"navigation":-1,"to":97,"icon":98,"itemList":99},"Legacy | Routes","/api-reference/routes-legacy","medium/products/route",[100,104,108,112,116],{"label":101,"navigation":14,"to":102,"icon":-1,"itemList":103},"Route legacy introduction","/api-reference/routes-legacy/introduction",[],{"label":105,"navigation":14,"to":106,"icon":-1,"itemList":107},"Mutate to create a new legacy route","/api-reference/routes-legacy/mutate-route",[],{"label":109,"navigation":14,"to":110,"icon":-1,"itemList":111},"Subscribe to route updates","/api-reference/routes-legacy/subscribe-to-route-updates",[],{"label":113,"navigation":14,"to":114,"icon":-1,"itemList":115},"Query route details","/api-reference/routes-legacy/query-route-details",[],{"label":117,"navigation":14,"to":118,"icon":-1,"itemList":119},"Query route path","/api-reference/routes-legacy/query-route-path",[],{"label":121,"navigation":-1,"to":122,"icon":98,"itemList":123},"Routes","/api-reference/routes",[124,128,132,136,139],{"label":125,"navigation":14,"to":126,"icon":-1,"itemList":127},"Route introduction","/api-reference/routes/introduction",[],{"label":129,"navigation":14,"to":130,"icon":-1,"itemList":131},"Migration from Route Legacy","/api-reference/routes/migration",[],{"label":133,"navigation":14,"to":134,"icon":-1,"itemList":135},"Mutate to create a new route","/api-reference/routes/mutate-route",[],{"label":109,"navigation":14,"to":137,"icon":-1,"itemList":138},"/api-reference/routes/subscribe-to-route-updates",[],{"label":113,"navigation":14,"to":140,"icon":-1,"itemList":141},"/api-reference/routes/query-route-details",[],{"label":143,"navigation":-1,"to":144,"icon":145,"itemList":146},"Emissions","/api-reference/route-emissions","medium/content/leaf",[147,151],{"label":148,"navigation":14,"to":149,"icon":-1,"itemList":150},"Route emissions introduction","/api-reference/route-emissions/introduction",[],{"label":152,"navigation":14,"to":153,"icon":-1,"itemList":154},"Query route emissions","/api-reference/route-emissions/query-route-emissions",[],{"label":156,"navigation":-1,"to":157,"icon":158,"itemList":159},"Navigation","/api-reference/navigation","medium/products/navigation",[160,164,168,172,176,180,184],{"label":161,"navigation":14,"to":162,"icon":-1,"itemList":163},"Navigation introduction","/api-reference/navigation/introduction",[],{"label":165,"navigation":14,"to":166,"icon":-1,"itemList":167},"Mutate to start a new navigation session","/api-reference/navigation/mutate-start-navigation",[],{"label":169,"navigation":14,"to":170,"icon":-1,"itemList":171},"Subscribe to navigation updates","/api-reference/navigation/subscribe-to-navigation-updates",[],{"label":173,"navigation":14,"to":174,"icon":-1,"itemList":175},"Query navigation session","/api-reference/navigation/query-a-navigation-session",[],{"label":177,"navigation":14,"to":178,"icon":-1,"itemList":179},"Mutate to update a navigation session","/api-reference/navigation/mutate-update-navigation",[],{"label":181,"navigation":14,"to":182,"icon":-1,"itemList":183},"Mutate to recalculate navigation","/api-reference/navigation/mutate-recalculate-navigation",[],{"label":185,"navigation":14,"to":186,"icon":-1,"itemList":187},"Mutate to finish navigation","/api-reference/navigation/mutate-to-finish-navigation",[],{"label":189,"navigation":-1,"to":190,"icon":191,"itemList":192},"Legacy | Tile service","/api-reference/tile-service-legacy","medium/products/tile-set",[193,197,201,205,209,213],{"label":194,"navigation":14,"to":195,"icon":-1,"itemList":196},"Legacy | Tile service introduction","/api-reference/tile-service-legacy/introduction",[],{"label":198,"navigation":14,"to":199,"icon":-1,"itemList":200},"Legacy | Mapbox Vector Tile","/api-reference/tile-service-legacy/mvt",[],{"label":202,"navigation":14,"to":203,"icon":-1,"itemList":204},"Legacy | JSON Tile","/api-reference/tile-service-legacy/json",[],{"label":206,"navigation":14,"to":207,"icon":-1,"itemList":208},"Legacy | Filters","/api-reference/tile-service-legacy/filters",[],{"label":210,"navigation":14,"to":211,"icon":-1,"itemList":212},"Legacy | Selectors","/api-reference/tile-service-legacy/selectors",[],{"label":214,"navigation":14,"to":215,"icon":-1,"itemList":216},"Legacy | Integration","/api-reference/tile-service-legacy/integration",[],{"label":218,"navigation":-1,"to":219,"icon":191,"itemList":220},"Tile service","/api-reference/tile-service",[221,225,229,233,237,241,245],{"label":222,"navigation":14,"to":223,"icon":-1,"itemList":224},"Tile service introduction","/api-reference/tile-service/introduction",[],{"label":226,"navigation":14,"to":227,"icon":-1,"itemList":228},"Mapbox Vector Tile","/api-reference/tile-service/mvt",[],{"label":230,"navigation":14,"to":231,"icon":-1,"itemList":232},"JSON Tile","/api-reference/tile-service/json",[],{"label":234,"navigation":14,"to":235,"icon":-1,"itemList":236},"Filters","/api-reference/tile-service/filters",[],{"label":238,"navigation":14,"to":239,"icon":-1,"itemList":240},"Selectors","/api-reference/tile-service/selectors",[],{"label":242,"navigation":14,"to":243,"icon":-1,"itemList":244},"Station count","/api-reference/tile-service/count",[],{"label":246,"navigation":14,"to":247,"icon":-1,"itemList":248},"Integration","/api-reference/tile-service/integration",[],{"label":250,"navigation":-1,"to":251,"icon":252,"itemList":253},"Isolines","/api-reference/isolines","medium/products/isoline",[254,258,262,266],{"label":255,"navigation":14,"to":256,"icon":-1,"itemList":257},"Isoline introduction","/api-reference/isolines/introduction",[],{"label":259,"navigation":14,"to":260,"icon":-1,"itemList":261},"Mutation to create an isoline","/api-reference/isolines/mutate-isoline",[],{"label":263,"navigation":14,"to":264,"icon":-1,"itemList":265},"Subscribe to isoline details","/api-reference/isolines/subscribe-to-isoline",[],{"label":267,"navigation":14,"to":268,"icon":-1,"itemList":269},"Query isoline details","/api-reference/isolines/query-isoline",[],{"label":271,"navigation":-1,"to":272,"icon":273,"itemList":274},"Vehicle connectivity","/api-reference/vehicle-connectivity","medium/products/connectivity",[275,279,283,287,291,295,299,303,307],{"label":276,"navigation":14,"to":277,"icon":-1,"itemList":278},"Introduction","/api-reference/vehicle-connectivity/introduction",[],{"label":280,"navigation":14,"to":281,"icon":-1,"itemList":282},"Mutate to create a new connected vehicle","/api-reference/vehicle-connectivity/mutate-create-connected-vehicle",[],{"label":284,"navigation":14,"to":285,"icon":-1,"itemList":286},"Subscribe to a connected vehicle","/api-reference/vehicle-connectivity/subscribe-connected-vehicle",[],{"label":288,"navigation":14,"to":289,"icon":-1,"itemList":290},"Mutate to authorize a connected vehicle","/api-reference/vehicle-connectivity/mutate-authorize-connected-vehicle",[],{"label":292,"navigation":14,"to":293,"icon":-1,"itemList":294},"Query connected vehicle list","/api-reference/vehicle-connectivity/query-connected-vehicle-list",[],{"label":296,"navigation":14,"to":297,"icon":-1,"itemList":298},"Query data from vehicle","/api-reference/vehicle-connectivity/query-connected-vehicle-data",[],{"label":300,"navigation":14,"to":301,"icon":-1,"itemList":302},"Query connected vehicle","/api-reference/vehicle-connectivity/query-connected-vehicle",[],{"label":304,"navigation":14,"to":305,"icon":-1,"itemList":306},"Mutate to update a connected vehicle","/api-reference/vehicle-connectivity/mutate-update-connected-vehicle",[],{"label":308,"navigation":14,"to":309,"icon":-1,"itemList":310},"Mutate to remove a connected vehicle","/api-reference/vehicle-connectivity/mutate-remove-connected-vehicle",[],"Sections",{"asideHeader":313,"sectionList":314,"mainHeader":311},"Basics",[315,341],{"label":316,"navigation":-1,"to":317,"icon":318,"itemList":319},"API Basics","/basics/api-basics","medium/code/code",[320,325,329,333,337],{"label":321,"navigation":322,"to":323,"icon":-1,"itemList":324},"Getting started","basics","/basics/api-basics/getting-started",[],{"label":326,"navigation":322,"to":327,"icon":-1,"itemList":328},"Authorization","/basics/api-basics/authorization",[],{"label":330,"navigation":322,"to":331,"icon":-1,"itemList":332},"Security","/basics/api-basics/security",[],{"label":334,"navigation":322,"to":335,"icon":-1,"itemList":336},"Status & error codes","/basics/api-basics/status-and-error-codes",[],{"label":338,"navigation":322,"to":339,"icon":-1,"itemList":340},"Subscriptions","/basics/api-basics/subscriptions",[],{"label":342,"navigation":-1,"to":343,"icon":318,"itemList":344},"Learn more","/basics/other-basics",[345,349],{"label":346,"navigation":322,"to":347,"icon":-1,"itemList":348},"GraphQL Basics","/basics/other-basics/graphql-basics",[],{"label":350,"navigation":322,"to":351,"icon":-1,"itemList":352},"EV basics","/basics/other-basics/ev-basics",[],{"asideHeader":354,"sectionList":355,"mainHeader":439},"API Section",[356,369,380,420,432],{"label":30,"navigation":-1,"to":357,"icon":358,"itemList":359},"/examples/vehicles","car",[360,365],{"label":361,"navigation":362,"to":363,"icon":-1,"itemList":364},"Vehicle list","examples","/examples/vehicles/vehicle-list",[],{"label":366,"navigation":362,"to":367,"icon":-1,"itemList":368},"Vehicle details","/examples/vehicles/vehicle-details",[],{"label":51,"navigation":-1,"to":370,"icon":371,"itemList":372},"/examples/stations","charge-stations",[373,376],{"label":51,"navigation":362,"to":374,"icon":-1,"itemList":375},"/examples/stations/station-list",[],{"label":377,"navigation":362,"to":378,"icon":-1,"itemList":379},"Station details","/examples/stations/station-info",[],{"label":121,"navigation":-1,"to":381,"icon":382,"itemList":383},"/examples/routes","route",[384,388,392,396,400,404,408,412,416],{"label":385,"navigation":362,"to":386,"icon":-1,"itemList":387},"Route","/examples/routes/route",[],{"label":389,"navigation":362,"to":390,"icon":-1,"itemList":391},"Route (NEW)","/examples/routes/route-new",[],{"label":393,"navigation":362,"to":394,"icon":-1,"itemList":395},"Alternative routes","/examples/routes/alternative-routes",[],{"label":397,"navigation":362,"to":398,"icon":-1,"itemList":399},"Alternative stations","/examples/routes/stations-along-route",[],{"label":401,"navigation":362,"to":402,"icon":-1,"itemList":403},"Operator preference","/examples/routes/preferred-operator",[],{"label":405,"navigation":362,"to":406,"icon":-1,"itemList":407},"Elevation plot","/examples/routes/elevation-plot",[],{"label":409,"navigation":362,"to":410,"icon":-1,"itemList":411},"Battery capacity","/examples/routes/battery-capacity",[],{"label":413,"navigation":362,"to":414,"icon":-1,"itemList":415},"State of charge","/examples/routes/state-of-charge",[],{"label":417,"navigation":362,"to":418,"icon":-1,"itemList":419},"Toll roads and Ferries","/examples/routes/tolls-and-ferries",[],{"label":218,"navigation":-1,"to":421,"icon":422,"itemList":423},"/examples/tile-service","layers",[424,428],{"label":425,"navigation":362,"to":426,"icon":-1,"itemList":427},"Mapbox Vector Tiles","/examples/tile-service/tile-server",[],{"label":429,"navigation":362,"to":430,"icon":-1,"itemList":431},"GeoJSON tiles","/examples/tile-service/tile-json",[],{"label":250,"navigation":-1,"to":433,"icon":434,"itemList":435},"/examples/isolines","isoline",[436],{"label":250,"navigation":362,"to":437,"icon":-1,"itemList":438},"/examples/isolines/isoline",[],"Examples",[441,445,447,452,457],{"label":313,"navigation":442,"to":443,"icon":444,"itemList":314},"main","/basics","medium/content/bookmark",{"label":5,"navigation":442,"to":446,"icon":318,"itemList":6},"/api-reference",{"label":448,"navigation":442,"to":449,"icon":450,"itemList":451},"Release notes","/release-notes","medium/content/megaphone",[],{"label":453,"navigation":442,"to":454,"icon":455,"itemList":456},"Deprecations","/deprecations","medium/content/shredded",[],{"label":439,"navigation":442,"to":458,"icon":459,"itemList":355},"/examples","code",{"navigation":362},{"_path":363,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":361,"description":465,"img":466,"background":467,"navigation":362,"body":468,"_type":645,"_id":646,"_source":647,"_file":648,"_extension":649},"vehicles",false,"","Example of how to query the list of vehicles.","/examples/vehicles/vehicle-list.png","accent",{"type":469,"children":470,"toc":642},"root",[471,490],{"type":472,"tag":473,"props":474,"children":477},"element","ct-section",{"className":475},[476],"!pt-6",[478],{"type":472,"tag":479,"props":480,"children":489},"ct-iframe-wrapper",{"className":481,"src":488},[482,483,484,485,486,487],"w-full","h-[640px]","relative","overflow-hidden","rounded-lg","shadow-sm","https://examples.chargetrip.com/vehicle-list/",[],{"type":472,"tag":491,"props":492,"children":493},"ct-grid-section",{},[494,629],{"type":472,"tag":495,"props":496,"children":499},"ct-content",{"className":497},[498],"col-span-6",[500,508,514,527,534,570,576,611,617],{"type":472,"tag":501,"props":502,"children":504},"h1",{"id":503},"query-the-vehicle-list",[505],{"type":506,"value":507},"text","Query the vehicle list",{"type":472,"tag":509,"props":510,"children":511},"p",{},[512],{"type":506,"value":513},"Routing a vehicle requires a consumption model. Learn how to render a list of vehicles to be able to select the right consumption model.",{"type":472,"tag":515,"props":516,"children":521},"ct-button",{":is-rounded":517,"href":518,"icon-right":519,"type":520},"true","https://github.com/chargetrip/examples/tree/main/examples/1.vehicles/1.vehicle-list","IconName.MD_NAVIGATION_ARROW_UP_RIGHT","primary",[522],{"type":472,"tag":509,"props":523,"children":524},{},[525],{"type":506,"value":526},"View on Github",{"type":472,"tag":528,"props":529,"children":531},"h2",{"id":530},"requirements",[532],{"type":506,"value":533},"Requirements",{"type":472,"tag":535,"props":536,"children":537},"ul",{},[538,553,558],{"type":472,"tag":539,"props":540,"children":541},"li",{},[542,551],{"type":472,"tag":543,"props":544,"children":548},"a",{"href":545,"rel":546},"https://account.chargetrip.com",[547],"nofollow",[549],{"type":506,"value":550},"Chargetrip API key",{"type":506,"value":552}," - to fetch all vehicles instead of a subset.",{"type":472,"tag":539,"props":554,"children":555},{},[556],{"type":506,"value":557},"A Mapbox API key - to display the map",{"type":472,"tag":539,"props":559,"children":560},{},[561,568],{"type":472,"tag":543,"props":562,"children":565},{"href":563,"rel":564},"https://formidable.com/open-source/urql/",[547],[566],{"type":506,"value":567},"URQL",{"type":506,"value":569}," - a lightweight graphQL client",{"type":472,"tag":528,"props":571,"children":573},{"id":572},"steps-to-take",[574],{"type":506,"value":575},"Steps to take",{"type":472,"tag":577,"props":578,"children":579},"ol",{},[580,593,606],{"type":472,"tag":539,"props":581,"children":582},{},[583,585,591],{"type":506,"value":584},"Use the ",{"type":472,"tag":459,"props":586,"children":588},{"className":587},[],[589],{"type":506,"value":590},"vehicleList",{"type":506,"value":592}," query to retrieve a list of vehicles. GraphQL will allow for only fetching the fields that are needed. The filter and search argument can be used to improve the way of how to look up vehicles. Use the page and size argument to implement pagination. To improve performance even more, the thumbnail image of the vehicle is used.",{"type":472,"tag":539,"props":594,"children":595},{},[596,598,604],{"type":506,"value":597},"After fetching the data, an ",{"type":472,"tag":459,"props":599,"children":601},{"className":600},[],[602],{"type":506,"value":603},"intersectionObserver",{"type":506,"value":605}," needs to be implemented to support endless scroll pagination.",{"type":472,"tag":539,"props":607,"children":608},{},[609],{"type":506,"value":610},"With everything set up, it's time to render the list of vehicles alongside the filters and search onto the screen.",{"type":472,"tag":528,"props":612,"children":614},{"id":613},"next-steps",[615],{"type":506,"value":616},"Next steps",{"type":472,"tag":509,"props":618,"children":619},{},[620,622,627],{"type":506,"value":621},"With the ",{"type":472,"tag":459,"props":623,"children":625},{"className":624},[],[626],{"type":506,"value":590},{"type":506,"value":628}," up and running, it's possible to retrieve additional vehicle details. This will be explained in our next example.",{"type":472,"tag":630,"props":631,"children":633},"div",{"className":632},[498],[634],{"type":472,"tag":635,"props":636,"children":641},"ct-code-tabs",{":codeList":637,":is-inversed":517,"className":638},"[{\"label\":\"client.js\",\"code\":\"/* eslint-disable max-len */\\nimport { createClient, defaultExchanges } from '@urql/core';\\nimport { groupVehicles } from './interface';\\nimport { vehicleListQuery } from './queries';\\n\\n/**\\n * For the purpose of this example we use urgl - lightweights GraphQL client.\\n * To establish a connection with Chargetrip GraphQL API you need to have an API key.\\n * The key in this example is a public one and gives an access only to a part of our extensive database.\\n * You need a registered `x-client-id` to access the full database.\\n * Read more about an authorisation in our documentation (https://docs.chargetrip.com/#authorisation).\\n */\\nconst headers = {\\n  'x-client-id': '5ed1175bad06853b3aa1e492',\\n  'x-app-id': '623998b2c35130073829b2d2',\\n};\\n\\nconst client = createClient({\\n  url: 'https://api.chargetrip.io/graphql',\\n  fetchOptions: {\\n    method: 'POST',\\n    headers,\\n  },\\n  exchanges: [...defaultExchanges],\\n});\\n\\n/**\\n * The function that handles all our GraphQL networking alongside it's parameters.\\n * @param { Object } - Object that manages the page, size and search to be send towards our request\\n * @param { number } page - Number of the page we are on\\n * @param { number } size - Number of vehicles that we should fetch in one request\\n * @param { string } search - The keywords that we should filter our vehicle list on\\n */\\nexport const getVehicleList = ({ page, size = 10, search = '' }) => {\\n  client\\n    .query(vehicleListQuery, { page, size, search })\\n    .toPromise()\\n    .then(response => {\\n      groupVehicles(response.data?.vehicleList);\\n    })\\n    .catch(error => console.log(error));\\n};\\n\"},{\"label\":\"index.js\",\"code\":\"import { drawMap } from './map.js';\\nimport { getVehicleList } from './client.js';\\n\\n/**\\n * This project shows you how to fetch a vehicle list and render the vehicle details\\n * The project structure contains;\\n *\\n *    - client.js - All networking requests\\n *    - interface.js - All interface rendering\\n *    - map.js - All map rendering (including routes and waypoints)\\n *    - queries.js - The GraphQL queries used in the networking requests\\n */\\n\\ndrawMap();\\ngetVehicleList({ page: 0 });\\n\"},{\"label\":\"interface.js\",\"code\":\"import { debounce } from '../../../utils';\\nimport { getVehicleList } from './client';\\n\\n// Keeps track of the active search keyword. This way we always fetch the right results when using pagination.\\nlet searchKeyword = '';\\n\\n// Keeps track of which page of vehicles we are currently on.\\nlet currentPage = 0;\\n\\n// Keep a full list of sorted Vehicles\\nlet groupedVehicles = new Map();\\n\\n// Keep track of what headers we already rendered when doing pagination\\nlet renderedHeaders = [];\\n\\n// Keep track of which vehicles we already rendered when doing pagination\\nlet renderedVehicles = [];\\n\\n/**\\n * A function to group the Vehiclelist by make\\n * @param { Map } groupedVehicles - Our current set of already rendered Vehicles grouped by make\\n * @param { Object } vehicles - An array of vehicles coming from the Chargetrip API\\n * @param { string } vehicles[].naming.make - The make of the Vehicles\\n */\\nexport const groupVehicles = vehicles => {\\n  // Loop through all the Vehicles\\n  vehicles.forEach(vehicle => {\\n    // Check whether we have a specific make as a key in our map\\n    if (groupedVehicles.has(vehicle.naming.make)) {\\n      // If we have the specific key in our map extend it's children by adding the vehicle to it\\n      groupedVehicles.set(vehicle.naming.make, [...groupedVehicles.get(vehicle.naming.make), vehicle]);\\n    } else {\\n      // If we don't have the specific key in our map add it alongside the Vehicles\\n      groupedVehicles.set(vehicle.naming.make, [vehicle]);\\n    }\\n  });\\n\\n  // Now that we formatted our data we can start rendering our UI\\n  renderVehicleList(groupedVehicles, vehicles);\\n};\\n\\n/**\\n * Render function that constructs or list and list headers.\\n * @param { Map } groupedVehicles - Contains our Vehicles grouped by make\\n * @param { string } groupedVehicles[].header - The header for this specific section (make)\\n * @param { Object } groupedVehicles[].vehicles - The vehicles within a specific section\\n * @param { string } groupedVehicles[].vehicles[].id - The id of the specific vehicle that we are rendering\\n */\\nconst renderVehicleList = (groupedVehicles, vehicles) => {\\n  groupedVehicles.forEach((vehicles, header) => {\\n    // Check if we are not searching and if we have already rendered the header\\n    if (searchKeyword === '' && !renderedHeaders.includes(header)) renderHeader(header);\\n\\n    vehicles.forEach(vehicle => {\\n      // Check whether the vehicle has already been rendered or not\\n      if (!renderedVehicles.includes(vehicle.id)) {\\n        renderVehicle(vehicle);\\n      }\\n    });\\n  });\\n\\n  // Now that we rendered our UI we can configure our intersection observer that will take\\n  // care of our endless scroll pagination.\\n  handleObserving(groupedVehicles, vehicles);\\n};\\n\\n/**\\n * Constructs the header HTML and inserts it into the HTML right before the end of vehicle-list.\\n * @param {String} header - The title that we want to render.\\n */\\nconst renderHeader = header => {\\n  // Prevent duplicates by setting the header as rendered\\n  renderedHeaders.push(header);\\n\\n  document.getElementById('vehicle-list').insertAdjacentHTML(\\n    'beforeend',\\n    `\\n    \u003Cli class=\\\"vehicle-list-header\\\">${header}\u003C/li>\\n    `,\\n  );\\n};\\n\\n/**\\n * Constructs the vehicle HTML and inserts it into the HTML right before the end of vehicle-list.\\n * @param { Object } vehicle - All vehicle properties which we use to render a vehicle list entry\\n * @param { string } vehicle.id - The id of the vehicle\\n * @param { string } vehicle.naming.chargetrip_version - A Chargetrip version to create destinction between specific models\\n * @param { string } vehicle.media.image.thumbnail_url - The url of the vehicle image\\n * @param { string } vehicle.naming.model - The name of the model\\n * @param { string } vehicle.naming.make - The name of the make\\n */\\nconst renderVehicle = vehicle => {\\n  // Add the id of the vehicle being rendered to our array\\n  renderedVehicles.push(vehicle.id);\\n\\n  // We insert the new html bottom-up. This way we maintain the right alphabetical order.\\n  document.getElementById('vehicle-list').insertAdjacentHTML(\\n    'beforeend',\\n    `\\n    \u003Cli class=\\\"vehicle-list-element\\\">\\n      \u003Cdiv class=\\\"vehicle-list-image\\\">\\n        \u003Cimg class=\\\"vehicle-image\\\" alt=\\\"vehicle image\\\" src=\\\"${vehicle.media.image.thumbnail_url}\\\"/>\\n      \u003C/div>\\n      \u003Cdiv class=\\\"vehicle-list-data\\\">\\n        \u003Cp>\u003Cstrong>${vehicle.naming.model} ${vehicle.naming.chargetrip_version || ''}\u003C/strong>\u003C/p>\\n        \u003Cp>${vehicle.naming.make}\u003C/p>\\n      \u003C/div>\\n    \u003C/li>\\n    `,\\n  );\\n};\\n\\n/**\\n * Intersection observer\\n * The following code takes care of updating our pagination when we scroll through the list\\n *\\n * 1. We initialize a new intersection observer\\n * 2. We attach a callback to our intersection observer that takes care of updating our page and fetching more cars\\n * 3. We then use this interaction observer to observe the 3rd last item in our vehicle list\\n * 4. If we cross past that object we will call or intersection observer callback to fetch new data\\n * 5. The new data will be added to the list and we will repeat this process until we fetched everything\\n */\\n\\n/**\\n * A function that manages the state of our observer. It either connects or disconnects to our vehicle list.\\n * @param { Map } vehicles - Contains our vehicles grouped by make\\n */\\nconst handleObserving = (groupedVehicles, vehicles) => {\\n  // Get every vehicle list element\\n  let targets = [...document.querySelectorAll('.vehicle-list-element')];\\n\\n  // Setup our offset that defines when we are going to fetch new data.\\n  let offset = 3;\\n\\n  if (vehicles.length - offset > 0) {\\n    // Attach our observer to the 3rd last element in our list\\n    // We don't attach it to the last one, because then it will block the scrolling behaviour\\n    // Now it will fetch and attach before the user is at the end so the scroll interaction feels fluid.\\n    observer.observe(targets[targets.length - offset]);\\n  } else {\\n    // Disconnect the observer when we don't need it anymore\\n    observer.disconnect();\\n  }\\n};\\n\\n/**\\n * The callback of the intersection observer that fetches the new data for us when we reach the end\\n * @param { Element } entries - An array of elements that are being observed by our observer\\n */\\nconst loadNextPage = entries => {\\n  entries.forEach(entry => {\\n    if (entry.isIntersecting) {\\n      currentPage += 1;\\n      getVehicleList({ page: currentPage, size: 10, search: searchKeyword });\\n    }\\n  });\\n};\\n\\n// Initialize a new intersection observer with the following options\\nconst options = {\\n  root: document.getElementById('scroll-area'),\\n  rootMargin: '0px',\\n  threshold: 1.0,\\n};\\n\\nconst observer = new IntersectionObserver(loadNextPage, options);\\n\\n/**\\n * Search\\n * The following code takes care of searching for vehicles.\\n *\\n * 1. Attaches an event listener to our search inputfield\\n * 2. Adds a debounce handler so we don't create too much API calls and view refreshes when the users searches\\n * 3. Executes our search request with the page set to 0, size set to 10 and the new search keyword.\\n */\\ndocument.getElementById('search-area').addEventListener(\\n  'input',\\n  debounce(e => {\\n    // Updates our searchKeyword to reflect our inputfield\\n    searchKeyword = e.target.value;\\n\\n    // When we are searching we no longer have a sticky header so we can remove that\\n    if (searchKeyword !== '') {\\n      document.getElementsByTagName('header')[0].classList.add('no-shadow');\\n    }\\n\\n    // Resets our current page param to 0 so we don't miss any search results\\n    currentPage = 0;\\n\\n    // Empties our current vehicle-list so we can replace it with the search results\\n    document.getElementById('vehicle-list').textContent = '';\\n\\n    // Reset our rendered and grouped defaults so we have a clean list to start building our search results.\\n    renderedVehicles = [];\\n    renderedHeaders = [];\\n    groupedVehicles.clear();\\n\\n    // Initializes the search request\\n    getVehicleList({ page: currentPage, size: 10, search: searchKeyword });\\n  }, 250),\\n);\\n\"},{\"label\":\"map.js\",\"code\":\"import mapboxgl from 'mapbox-gl';\\n\\nmapboxgl.accessToken = 'pk.eyJ1IjoiY2hhcmdldHJpcCIsImEiOiJjazhpaG8ydTIwNWNpM21ud29xeXc2amhlIn0.rGKgR3JfG9Z5dCWjUI_oGA';\\n\\nexport const drawMap = () => {\\n  new mapboxgl.Map({\\n    cooperativeGestures: true,\\n    container: 'map',\\n    style: 'mapbox://styles/chargetrip/ckgcbf3kz0h8819qki8uwhe0k',\\n    zoom: 5,\\n    center: [8.1320104, 52.3758916],\\n  });\\n};\\n\"},{\"label\":\"queries.js\",\"code\":\"import qql from 'graphql-tag';\\n\\nexport const vehicleListQuery = qql`\\nquery vehicleList($page: Int, $size: Int, $search: String) {\\n  vehicleList(\\n    page: $page, \\n    size: $size, \\n    search: $search, \\n  ) {\\n    id\\n    naming {\\n      make\\n      model\\n      chargetrip_version\\n    }\\n    media {\\n      image {\\n        thumbnail_url\\n      }\\n    }\\n  }\\n}\\n`;\\n\"}]",[639,640],"stick","top-6",[],{"title":464,"searchDepth":643,"depth":643,"links":644},2,[],"markdown","content:5.examples:1.vehicles:1.vehicle-list.md","content","5.examples/1.vehicles/1.vehicle-list.md","md",1775054245073]