[{"data":1,"prerenderedAt":680},["Reactive",2],{"navigation-list":3,"page-/examples/isolines/isoline-navigation-name":460,"page-/examples/isolines/isoline":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":437,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":250,"description":465,"img":466,"background":467,"navigation":362,"body":468,"_type":675,"_id":676,"_source":677,"_file":678,"_extension":679},"isolines",false,"","Example of how to show how far a vehicle is able to go from a certain location","/examples/isolines/isoline.png","accent-light",{"type":469,"children":470,"toc":672},"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/isolines/",[],{"type":472,"tag":491,"props":492,"children":493},"ct-grid-section",{},[494,659],{"type":472,"tag":495,"props":496,"children":499},"ct-content",{"className":497},[498],"col-span-6",[500,508,514,527,534,577,583,641,647],{"type":472,"tag":501,"props":502,"children":504},"h1",{"id":503},"display-an-isoline-to-show-driving-distance",[505],{"type":506,"value":507},"text","Display an isoline to show driving distance",{"type":472,"tag":509,"props":510,"children":511},"p",{},[512],{"type":506,"value":513},"Is the destination reachable with the current state of charge? Can an electric vehicle really go that far? Questions often heard. By using isolines, these questions don't go unanswered. Display the driving distance from a location on a map.",{"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/5.isolines/1.isoline","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,565],{"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 plot routes outside this region",{"type":472,"tag":539,"props":554,"children":555},{},[556,563],{"type":472,"tag":543,"props":557,"children":560},{"href":558,"rel":559},"https://www.mapbox.com",[547],[561],{"type":506,"value":562},"Mapbox API key",{"type":506,"value":564}," - to display the map",{"type":472,"tag":539,"props":566,"children":567},{},[568,575],{"type":472,"tag":543,"props":569,"children":572},{"href":570,"rel":571},"https://formidable.com/open-source/urql/",[547],[573],{"type":506,"value":574},"URQL",{"type":506,"value":576}," - a lightweight graphQL client",{"type":472,"tag":528,"props":578,"children":580},{"id":579},"steps-to-take",[581],{"type":506,"value":582},"Steps to take",{"type":472,"tag":584,"props":585,"children":586},"ol",{},[587,616,628],{"type":472,"tag":539,"props":588,"children":589},{},[590,592,598,600,606,608,614],{"type":506,"value":591},"To display an isoline, a mutation and subscription are required. The ",{"type":472,"tag":459,"props":593,"children":595},{"className":594},[],[596],{"type":506,"value":597},"createIsoline",{"type":506,"value":599}," mutation will be used to define variables such as the ",{"type":472,"tag":459,"props":601,"children":603},{"className":602},[],[604],{"type":506,"value":605},"polygon_count",{"type":506,"value":607}," and location. In return an ",{"type":472,"tag":459,"props":609,"children":611},{"className":610},[],[612],{"type":506,"value":613},"id",{"type":506,"value":615}," will be created that can be used on the subscription.",{"type":472,"tag":539,"props":617,"children":618},{},[619,621,626],{"type":506,"value":620},"The isoline subscription will provide status updates. Calculation of an isoline can take a little while depending on the ",{"type":472,"tag":459,"props":622,"children":624},{"className":623},[],[625],{"type":506,"value":605},{"type":506,"value":627},".",{"type":472,"tag":539,"props":629,"children":630},{},[631,633,639],{"type":506,"value":632},"When the isoline is ready and the subscription returns status ",{"type":472,"tag":459,"props":634,"children":636},{"className":635},[],[637],{"type":506,"value":638},"done",{"type":506,"value":640},", it can be plotted on the map.",{"type":472,"tag":528,"props":642,"children":644},{"id":643},"next-steps",[645],{"type":506,"value":646},"Next steps",{"type":472,"tag":509,"props":648,"children":649},{},[650,652,658],{"type":506,"value":651},"This example illustrates the basics of how to display an isoline. To learn more about isolines and their capabilities navigate to our ",{"type":472,"tag":543,"props":653,"children":656},{"href":654,"rel":655},"https://developers.chargetrip.com/api-reference/",[547],[657],{"type":506,"value":5},{"type":506,"value":627},{"type":472,"tag":660,"props":661,"children":663},"div",{"className":662},[498],[664],{"type":472,"tag":665,"props":666,"children":671},"ct-code-tabs",{":codeList":667,":is-inversed":517,"className":668},"[{\"label\":\"client.js\",\"code\":\"import { SubscriptionClient } from 'subscriptions-transport-ws';\\nimport { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';\\nimport { createIsoline, isolineSubscription } from './queries';\\nimport { pipe, subscribe } from 'wonka';\\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 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 authorisation in our documentation (https://docs.chargetrip.com/#authorisation).\\n */\\nconst headers = {\\n  //Replace this x-client-id and app-id with your own to get access to more cars and stations\\n  'x-client-id': '5ed1175bad06853b3aa1e492',\\n  'x-app-id': '623998b2c35130073829b2d2',\\n};\\n\\nconst subscriptionClient = new SubscriptionClient('wss://api.chargetrip.io/graphql', {\\n  reconnect: true,\\n  connectionParams: headers,\\n});\\n\\nconst client = createClient({\\n  url: 'https://api.chargetrip.io/graphql',\\n  fetchOptions: {\\n    method: 'POST',\\n    headers,\\n  },\\n  exchanges: [\\n    ...defaultExchanges,\\n    subscriptionExchange({\\n      forwardSubscription(operation) {\\n        return subscriptionClient.request(operation);\\n      },\\n    }),\\n  ],\\n});\\n\\n/*\\n * To create an isoline you need to:\\n *\\n * 1. create an isoline and receive back its ID;\\n * 2. subscribe to isoline updates in order to receive its details.\\n */\\nexport const getIsoline = callback => {\\n  client\\n    .mutation(createIsoline)\\n    .toPromise()\\n    .then(response => {\\n      const isolineId = response.data.createIsoline;\\n      const { unsubscribe } = pipe(\\n        client.executeSubscription(createRequest(isolineSubscription, { id: isolineId })),\\n        subscribe(result => {\\n          const { isoline } = result.data;\\n          // To improve performance please unsubscribe when you have reached a final status.\\n          if (isoline.status === 'done') {\\n            unsubscribe();\\n            callback(isoline);\\n          } else if (isoline.status === 'not_found') {\\n            callback();\\n          }\\n        }),\\n      );\\n    })\\n    .catch(error => console.log('error', error));\\n};\\n\"},{\"label\":\"index.js\",\"code\":\"import { drawIsoline } from './map';\\nimport { getIsoline } from './client';\\nimport { renderErrorToast } from './interface';\\n\\n/**\\n * This project shows you how to fetch an isoline and render it on a map\\n * The project structure contains;\\n *\\n *    - client.js - All networking requests\\n *    - interface.js - All interface rendering\\n *    - map.js - All map rendering\\n *    - queries.js - The GraphQL queries used in the networking requests\\n */\\n\\ngetIsoline(isoData => {\\n  if (isoData) {\\n    drawIsoline(isoData);\\n  } else {\\n    renderErrorToast();\\n  }\\n});\\n\"},{\"label\":\"interface.js\",\"code\":\"export const renderErrorToast = () => {\\n  const errorToast = document.getElementById('error-toast');\\n  errorToast.style.transform = `translateY(0)`;\\n\\n  setTimeout(() => {\\n    errorToast.style.transform = `translateY(100%)`;\\n  }, 3500);\\n};\\n\"},{\"label\":\"map.js\",\"code\":\"import mapboxgl from 'mapbox-gl';\\n\\nmapboxgl.accessToken = 'pk.eyJ1IjoiY2hhcmdldHJpcCIsImEiOiJjamo3em4wdnUwdHVlM3Z0ZTNrZmd1MXoxIn0.aFteYnUc_GxwjTLGvB3uCg';\\n\\nconst map = new mapboxgl.Map({\\n  cooperativeGestures: true,\\n  container: 'map',\\n  // style: 'mapbox://styles/chargetrip/ckf2gje0j4n2z19mgubmdk6tx', // Light Map\\n  // style: 'mapbox://styles/chargetrip/cl2pxb0e2001v15l2tawki0k0', // Dark Map\\n  style: 'mapbox://styles/chargetrip/ckgcbf3kz0h8819qki8uwhe0k',\\n  zoom: 7.0,\\n  center: [1.0686, 41.6974],\\n});\\n\\n/**\\n * Draw isolines on a map.\\n *\\n * An isoline object contains `polygon` data\\n * The polygon has geometry data with coordinates that can trigger a rerender on the map.\\n * We can use the polygon_count to get the amount of polygons available and loop through all of them.\\n *\\n * @param data {object} isoline details\\n */\\nexport const drawIsoline = data => {\\n  drawIso(data);\\n};\\n\\n/**\\n * Draw isolines on the map.\\n * @param { object } data - object containing polygon data\\n */\\nexport const drawIso = data => {\\n  var index = 0;\\n  const loadingToast = document.getElementById('loading-toast');\\n\\n  if (map.loaded()) {\\n    while (index \u003C data.polygons.length) {\\n      addLayer(data.polygons[index].geometry.coordinates, index);\\n      index = index + 1;\\n    }\\n\\n    loadingToast.style.transform = `translateY(100%)`;\\n  } else {\\n    map.on('load', () => {\\n      while (index \u003C data.polygons.length) {\\n        addLayer(data.polygons[index].geometry.coordinates, index);\\n        index = index + 1;\\n      }\\n\\n      loadingToast.style.transform = `translateY(100%)`;\\n    });\\n  }\\n};\\n\\nconst addLayer = (dataLayer, index) => {\\n  map.addSource(`layer-${index}`, {\\n    type: 'geojson',\\n    data: {\\n      type: 'Feature',\\n      geometry: {\\n        type: 'Polygon',\\n        coordinates: dataLayer[0],\\n      },\\n    },\\n  });\\n\\n  map.addLayer({\\n    id: `fill-${index}`,\\n    type: 'fill',\\n    source: `layer-${index}`,\\n    layout: {},\\n    paint: {\\n      'fill-color': '#0078ff',\\n      'fill-opacity': 0.12,\\n    },\\n  });\\n\\n  map.addLayer({\\n    id: `line-${index}`,\\n    type: 'line',\\n    source: `layer-${index}`,\\n    layout: {},\\n    paint: {\\n      'line-color': '#0078ff',\\n      'line-width': 1,\\n      'line-opacity': index === 4 ? 1 : 0.2,\\n    },\\n  });\\n};\\n\"},{\"label\":\"queries.js\",\"code\":\"import qql from 'graphql-tag';\\n\\n/*\\n * In this example we request a isoline with Frankfurt, Germany as point of origin.\\n * Your origin is a required field. You also need to select an EV.\\n * Season and polygon_count are optional\\n * The conditions are:\\n *   - origin Frankfurt, Germany\\n *   - The EV is a BMW i3s 94 Ah (2017-2018)\\n *   - season is summer\\n *   - polygon count is 5\\n */\\nexport const createIsoline = qql`\\nmutation createIsoline {\\n  createIsoline(\\n    input: {\\n      vehicle_id: \\\"5d161beec9eef4c250d9d225\\\"\\n      origin: {\\n        type: Feature\\n        geometry: { type: Point, coordinates: [2.1686, 41.3874] }\\n        properties: { name: \\\"Frankfurt, Germany\\\" }\\n      }\\n      polygon_count: 5\\n      ferry_connections: none\\n      season: summer\\n    }\\n  )\\n}\\n`;\\n\\nexport const isolineSubscription = qql`\\nsubscription createIsoline($id: ID!){\\n  isoline(id: $id) {\\n      status\\n      polygons{\\n        type\\n        geometry{\\n          coordinates\\n        }\\n        properties{\\n          index\\n        }\\n      }\\n    }\\n  }\\n`;\\n\"}]",[669,670],"stick","top-6",[],{"title":464,"searchDepth":673,"depth":673,"links":674},2,[],"markdown","content:5.examples:5.isolines:1.isoline.md","content","5.examples/5.isolines/1.isoline.md","md",1775054260885]