{"owner":"anvaka","repo":"city-roads","hasSkills":true,"totalSkillsCount":1,"totalTokensCount":1281,"categories":["project-spec"],"hasMcp":false,"mcpConfig":null,"found":["API.md"],"skills":{"API.md":"# Console API\n\n*This is work in progress and subject to change. Please don't rely on it for anything critical* \n\nThe `city-roads` provides additional set of operations for the software engineers, allowing them\nto execute arbitrary OpenStreetMap queries and visualize results.\n\n## Methods\n\nThis section describes available console API methods.\n\n### `scene.load()`\n\nAllows you to load more city roads into the current scene. Before we dive into details, let's explore what\nit takes to render Tokyo and Seattle next to each other. \n\n![Tokyo and Seattle](./images/tokyo_and_seattle.png)\n\nFirst, open [city roads](https://anvaka.github.io/city-roads/)\nand load `Seattle` roads. Then open [developer console](https://developers.google.com/web/tools/chrome-devtools/open) and run the following command:\n\n``` js\nscene.load(Query.Road, 'Tokyo'); // load every single road in Tokyo\n```\n\nMonitor your `Networks` tab and see when request is done. Tokyo bounding box is very large,\nso it will appear very far away on the top left corner. Let's move Tokyo grid next to Seattle:\n\n``` js\n// Find the loaded layer with Tokyo:\ntokyo = scene.queryLayer('Tokyo');\n\n// Exact offset numbers can be found by experimenting\ntokyo.moveBy(/* xOffset = */ 718000, /* yOffset = */ 745000)\n```\n\n`scene.load()` has the following signature:\n\n``` js\nfunction load(wayFilter: String, loadOptions: LoadOptions);\n```\n\n* `wayFilter` is used to filter out OpenStreetMap ways. You can find a list of well-known filters [here](https://github.com/anvaka/city-roads/blob/f543a712a0b88b12751aad691baa5eb9d6c0c664/src/lib/Query.js#L6-L24). If you need \nto know more to create custom filters, here is a complete [language guide](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL). You can also get good insight into key/value distribution for ways by exploring [taginfo](https://taginfo.openstreetmap.org/tags) (make sure to sort by Ways in descending order to get the most popular combinations);\n* `loadOptions` allows you to have granular control over the bounding box of the loaded results. If this\nvalue is a string, then it is converted to a geocoded area id with nominatim, and then the first match\nis used as a bounding box. This may not be enough sometimes, so you can provide a specific area id, or \na bounding box, by passing an object. For example:\n\n``` js\nscene.load(Query.Road, {areaId: 3600237385}); // Explicitly set area id to Seattle\n\nscene.load(Query.Building, { // Load all buildings...\n  bbox: [       // ...in the given bounding box\n    \"-15.8477\", /* south lat */ \n    \"-47.9841\", /* west  lon */ \n    \"-15.7330\", /* north lat */ \n    \"-47.7970\"  /* east  lon */ \n  ]});\n```\n\n### scene.queryLayerAll()\n\nReturns all layers added to the scene. This is what it takes to assign different colors to each layer:\n\n``` js\nallLayers = scene.queryLayerAll()\nallLayers[0].color = 'deepskyblue'; // color can be a name.\nallLayers[1].color = 'rgb(255, 12, 43)'; // or a any other expression (rgb, hex, hsl, etc.)\n```\n\n### `scene.clear()`\n\nClears the current scene, allowing you to start from scratch.\n\n\n### `scene.saveToPNG(fileName: string)`\n\nTo save the current scene as a PNG file run\n\n``` js\nscene.saveToPNG('hello'); // hello.png is saved\n```\n\n### `scene.saveToSVG(fileName: string, options?: Object)`\n\nThis command allows you to save the scene as an SVG file.\n\n``` js\nscene.saveToSVG('hello'); // hello.svg is saved\n```\n\nIf you are planning to use a pen-plotter or a laser cutter, you can also\ngreatly reduce the print time, by removing very short paths from the final\nexport. To do so, pass `minLength` option:\n\n``` js\nscene.saveToSVG('hello', {minLength: 2}); \n// All paths with length shorter than 2px are removed from the final SVG.\n```\n\n## Examples\n\nHere are a few example of working with the API.\n\n### Loading all bikeways in the current city\n\n``` js\nvar bikes = scene.load('way[highway=\"cycleway\"]', {layer: scene.queryLayer()})\n// Make lines 4 pixels wide\nbikes.lineWidth = 4\n// and red\nbikes.color = 'red'\n```\n\n### Loading all bus routes in the current city\n\nThis script will get all bus routes in the current city, and render them 4px wide, with\nred color:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color='red';\nbus.lineWidth = 4;\n```\n\nIf you want a specific bus number, pass additional `ref=bus_number`. For example, bus route #24:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus][ref=24](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color = 'green';\nbus.lineWidth = 4;\n```\n\n"},"files":{"API.md":"# Console API\n\n*This is work in progress and subject to change. Please don't rely on it for anything critical* \n\nThe `city-roads` provides additional set of operations for the software engineers, allowing them\nto execute arbitrary OpenStreetMap queries and visualize results.\n\n## Methods\n\nThis section describes available console API methods.\n\n### `scene.load()`\n\nAllows you to load more city roads into the current scene. Before we dive into details, let's explore what\nit takes to render Tokyo and Seattle next to each other. \n\n![Tokyo and Seattle](./images/tokyo_and_seattle.png)\n\nFirst, open [city roads](https://anvaka.github.io/city-roads/)\nand load `Seattle` roads. Then open [developer console](https://developers.google.com/web/tools/chrome-devtools/open) and run the following command:\n\n``` js\nscene.load(Query.Road, 'Tokyo'); // load every single road in Tokyo\n```\n\nMonitor your `Networks` tab and see when request is done. Tokyo bounding box is very large,\nso it will appear very far away on the top left corner. Let's move Tokyo grid next to Seattle:\n\n``` js\n// Find the loaded layer with Tokyo:\ntokyo = scene.queryLayer('Tokyo');\n\n// Exact offset numbers can be found by experimenting\ntokyo.moveBy(/* xOffset = */ 718000, /* yOffset = */ 745000)\n```\n\n`scene.load()` has the following signature:\n\n``` js\nfunction load(wayFilter: String, loadOptions: LoadOptions);\n```\n\n* `wayFilter` is used to filter out OpenStreetMap ways. You can find a list of well-known filters [here](https://github.com/anvaka/city-roads/blob/f543a712a0b88b12751aad691baa5eb9d6c0c664/src/lib/Query.js#L6-L24). If you need \nto know more to create custom filters, here is a complete [language guide](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL). You can also get good insight into key/value distribution for ways by exploring [taginfo](https://taginfo.openstreetmap.org/tags) (make sure to sort by Ways in descending order to get the most popular combinations);\n* `loadOptions` allows you to have granular control over the bounding box of the loaded results. If this\nvalue is a string, then it is converted to a geocoded area id with nominatim, and then the first match\nis used as a bounding box. This may not be enough sometimes, so you can provide a specific area id, or \na bounding box, by passing an object. For example:\n\n``` js\nscene.load(Query.Road, {areaId: 3600237385}); // Explicitly set area id to Seattle\n\nscene.load(Query.Building, { // Load all buildings...\n  bbox: [       // ...in the given bounding box\n    \"-15.8477\", /* south lat */ \n    \"-47.9841\", /* west  lon */ \n    \"-15.7330\", /* north lat */ \n    \"-47.7970\"  /* east  lon */ \n  ]});\n```\n\n### scene.queryLayerAll()\n\nReturns all layers added to the scene. This is what it takes to assign different colors to each layer:\n\n``` js\nallLayers = scene.queryLayerAll()\nallLayers[0].color = 'deepskyblue'; // color can be a name.\nallLayers[1].color = 'rgb(255, 12, 43)'; // or a any other expression (rgb, hex, hsl, etc.)\n```\n\n### `scene.clear()`\n\nClears the current scene, allowing you to start from scratch.\n\n\n### `scene.saveToPNG(fileName: string)`\n\nTo save the current scene as a PNG file run\n\n``` js\nscene.saveToPNG('hello'); // hello.png is saved\n```\n\n### `scene.saveToSVG(fileName: string, options?: Object)`\n\nThis command allows you to save the scene as an SVG file.\n\n``` js\nscene.saveToSVG('hello'); // hello.svg is saved\n```\n\nIf you are planning to use a pen-plotter or a laser cutter, you can also\ngreatly reduce the print time, by removing very short paths from the final\nexport. To do so, pass `minLength` option:\n\n``` js\nscene.saveToSVG('hello', {minLength: 2}); \n// All paths with length shorter than 2px are removed from the final SVG.\n```\n\n## Examples\n\nHere are a few example of working with the API.\n\n### Loading all bikeways in the current city\n\n``` js\nvar bikes = scene.load('way[highway=\"cycleway\"]', {layer: scene.queryLayer()})\n// Make lines 4 pixels wide\nbikes.lineWidth = 4\n// and red\nbikes.color = 'red'\n```\n\n### Loading all bus routes in the current city\n\nThis script will get all bus routes in the current city, and render them 4px wide, with\nred color:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color='red';\nbus.lineWidth = 4;\n```\n\nIf you want a specific bus number, pass additional `ref=bus_number`. For example, bus route #24:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus][ref=24](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color = 'green';\nbus.lineWidth = 4;\n```\n\n"},"items":[{"name":"API.md","path":"API.md","rawUrl":"https://raw.githubusercontent.com/anvaka/city-roads/HEAD/API.md","title":"API Interface Contract & Specifications","category":"project-spec","format":"markdown","content":"# Console API\n\n*This is work in progress and subject to change. Please don't rely on it for anything critical* \n\nThe `city-roads` provides additional set of operations for the software engineers, allowing them\nto execute arbitrary OpenStreetMap queries and visualize results.\n\n## Methods\n\nThis section describes available console API methods.\n\n### `scene.load()`\n\nAllows you to load more city roads into the current scene. Before we dive into details, let's explore what\nit takes to render Tokyo and Seattle next to each other. \n\n![Tokyo and Seattle](./images/tokyo_and_seattle.png)\n\nFirst, open [city roads](https://anvaka.github.io/city-roads/)\nand load `Seattle` roads. Then open [developer console](https://developers.google.com/web/tools/chrome-devtools/open) and run the following command:\n\n``` js\nscene.load(Query.Road, 'Tokyo'); // load every single road in Tokyo\n```\n\nMonitor your `Networks` tab and see when request is done. Tokyo bounding box is very large,\nso it will appear very far away on the top left corner. Let's move Tokyo grid next to Seattle:\n\n``` js\n// Find the loaded layer with Tokyo:\ntokyo = scene.queryLayer('Tokyo');\n\n// Exact offset numbers can be found by experimenting\ntokyo.moveBy(/* xOffset = */ 718000, /* yOffset = */ 745000)\n```\n\n`scene.load()` has the following signature:\n\n``` js\nfunction load(wayFilter: String, loadOptions: LoadOptions);\n```\n\n* `wayFilter` is used to filter out OpenStreetMap ways. You can find a list of well-known filters [here](https://github.com/anvaka/city-roads/blob/f543a712a0b88b12751aad691baa5eb9d6c0c664/src/lib/Query.js#L6-L24). If you need \nto know more to create custom filters, here is a complete [language guide](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL). You can also get good insight into key/value distribution for ways by exploring [taginfo](https://taginfo.openstreetmap.org/tags) (make sure to sort by Ways in descending order to get the most popular combinations);\n* `loadOptions` allows you to have granular control over the bounding box of the loaded results. If this\nvalue is a string, then it is converted to a geocoded area id with nominatim, and then the first match\nis used as a bounding box. This may not be enough sometimes, so you can provide a specific area id, or \na bounding box, by passing an object. For example:\n\n``` js\nscene.load(Query.Road, {areaId: 3600237385}); // Explicitly set area id to Seattle\n\nscene.load(Query.Building, { // Load all buildings...\n  bbox: [       // ...in the given bounding box\n    \"-15.8477\", /* south lat */ \n    \"-47.9841\", /* west  lon */ \n    \"-15.7330\", /* north lat */ \n    \"-47.7970\"  /* east  lon */ \n  ]});\n```\n\n### scene.queryLayerAll()\n\nReturns all layers added to the scene. This is what it takes to assign different colors to each layer:\n\n``` js\nallLayers = scene.queryLayerAll()\nallLayers[0].color = 'deepskyblue'; // color can be a name.\nallLayers[1].color = 'rgb(255, 12, 43)'; // or a any other expression (rgb, hex, hsl, etc.)\n```\n\n### `scene.clear()`\n\nClears the current scene, allowing you to start from scratch.\n\n\n### `scene.saveToPNG(fileName: string)`\n\nTo save the current scene as a PNG file run\n\n``` js\nscene.saveToPNG('hello'); // hello.png is saved\n```\n\n### `scene.saveToSVG(fileName: string, options?: Object)`\n\nThis command allows you to save the scene as an SVG file.\n\n``` js\nscene.saveToSVG('hello'); // hello.svg is saved\n```\n\nIf you are planning to use a pen-plotter or a laser cutter, you can also\ngreatly reduce the print time, by removing very short paths from the final\nexport. To do so, pass `minLength` option:\n\n``` js\nscene.saveToSVG('hello', {minLength: 2}); \n// All paths with length shorter than 2px are removed from the final SVG.\n```\n\n## Examples\n\nHere are a few example of working with the API.\n\n### Loading all bikeways in the current city\n\n``` js\nvar bikes = scene.load('way[highway=\"cycleway\"]', {layer: scene.queryLayer()})\n// Make lines 4 pixels wide\nbikes.lineWidth = 4\n// and red\nbikes.color = 'red'\n```\n\n### Loading all bus routes in the current city\n\nThis script will get all bus routes in the current city, and render them 4px wide, with\nred color:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color='red';\nbus.lineWidth = 4;\n```\n\nIf you want a specific bus number, pass additional `ref=bus_number`. For example, bus route #24:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus][ref=24](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color = 'green';\nbus.lineWidth = 4;\n```\n\n","isInternal":false,"tokens":1281,"sizeBytes":4829}],"systemPromptSnippet":"<yakaai_skills repo=\"anvaka/city-roads\">\n<!-- File: API.md (Tokens: ~1281 | Category: project-spec) -->\n# Console API\n\n*This is work in progress and subject to change. Please don't rely on it for anything critical* \n\nThe `city-roads` provides additional set of operations for the software engineers, allowing them\nto execute arbitrary OpenStreetMap queries and visualize results.\n\n## Methods\n\nThis section describes available console API methods.\n\n### `scene.load()`\n\nAllows you to load more city roads into the current scene. Before we dive into details, let's explore what\nit takes to render Tokyo and Seattle next to each other. \n\n![Tokyo and Seattle](./images/tokyo_and_seattle.png)\n\nFirst, open [city roads](https://anvaka.github.io/city-roads/)\nand load `Seattle` roads. Then open [developer console](https://developers.google.com/web/tools/chrome-devtools/open) and run the following command:\n\n``` js\nscene.load(Query.Road, 'Tokyo'); // load every single road in Tokyo\n```\n\nMonitor your `Networks` tab and see when request is done. Tokyo bounding box is very large,\nso it will appear very far away on the top left corner. Let's move Tokyo grid next to Seattle:\n\n``` js\n// Find the loaded layer with Tokyo:\ntokyo = scene.queryLayer('Tokyo');\n\n// Exact offset numbers can be found by experimenting\ntokyo.moveBy(/* xOffset = */ 718000, /* yOffset = */ 745000)\n```\n\n`scene.load()` has the following signature:\n\n``` js\nfunction load(wayFilter: String, loadOptions: LoadOptions);\n```\n\n* `wayFilter` is used to filter out OpenStreetMap ways. You can find a list of well-known filters [here](https://github.com/anvaka/city-roads/blob/f543a712a0b88b12751aad691baa5eb9d6c0c664/src/lib/Query.js#L6-L24). If you need \nto know more to create custom filters, here is a complete [language guide](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL). You can also get good insight into key/value distribution for ways by exploring [taginfo](https://taginfo.openstreetmap.org/tags) (make sure to sort by Ways in descending order to get the most popular combinations);\n* `loadOptions` allows you to have granular control over the bounding box of the loaded results. If this\nvalue is a string, then it is converted to a geocoded area id with nominatim, and then the first match\nis used as a bounding box. This may not be enough sometimes, so you can provide a specific area id, or \na bounding box, by passing an object. For example:\n\n``` js\nscene.load(Query.Road, {areaId: 3600237385}); // Explicitly set area id to Seattle\n\nscene.load(Query.Building, { // Load all buildings...\n  bbox: [       // ...in the given bounding box\n    \"-15.8477\", /* south lat */ \n    \"-47.9841\", /* west  lon */ \n    \"-15.7330\", /* north lat */ \n    \"-47.7970\"  /* east  lon */ \n  ]});\n```\n\n### scene.queryLayerAll()\n\nReturns all layers added to the scene. This is what it takes to assign different colors to each layer:\n\n``` js\nallLayers = scene.queryLayerAll()\nallLayers[0].color = 'deepskyblue'; // color can be a name.\nallLayers[1].color = 'rgb(255, 12, 43)'; // or a any other expression (rgb, hex, hsl, etc.)\n```\n\n### `scene.clear()`\n\nClears the current scene, allowing you to start from scratch.\n\n\n### `scene.saveToPNG(fileName: string)`\n\nTo save the current scene as a PNG file run\n\n``` js\nscene.saveToPNG('hello'); // hello.png is saved\n```\n\n### `scene.saveToSVG(fileName: string, options?: Object)`\n\nThis command allows you to save the scene as an SVG file.\n\n``` js\nscene.saveToSVG('hello'); // hello.svg is saved\n```\n\nIf you are planning to use a pen-plotter or a laser cutter, you can also\ngreatly reduce the print time, by removing very short paths from the final\nexport. To do so, pass `minLength` option:\n\n``` js\nscene.saveToSVG('hello', {minLength: 2}); \n// All paths with length shorter than 2px are removed from the final SVG.\n```\n\n## Examples\n\nHere are a few example of working with the API.\n\n### Loading all bikeways in the current city\n\n``` js\nvar bikes = scene.load('way[highway=\"cycleway\"]', {layer: scene.queryLayer()})\n// Make lines 4 pixels wide\nbikes.lineWidth = 4\n// and red\nbikes.color = 'red'\n```\n\n### Loading all bus routes in the current city\n\nThis script will get all bus routes in the current city, and render them 4px wide, with\nred color:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color='red';\nbus.lineWidth = 4;\n```\n\nIf you want a specific bus number, pass additional `ref=bus_number`. For example, bus route #24:\n\n``` js\nvar areaId = scene.queryLayer().getQueryBounds().areaId;\nvar bus = scene.load('', {\n  layer: scene.queryLayer(),\n  raw: `[out:json][timeout:250];\narea(${areaId});(._; )->.area;\n(nwr[route=bus][ref=24](area.area););\nout body;>;out skel qt;`\n});\n\nbus.color = 'green';\nbus.lineWidth = 4;\n```\n</yakaai_skills>"}