{"id":13765784,"url":"https://github.com/CrestoneDigital/extjs-carto","last_synced_at":"2025-05-10T21:31:55.566Z","repository":{"id":96755006,"uuid":"66969413","full_name":"CrestoneDigital/extjs-carto","owner":"CrestoneDigital","description":"Native components for ExtJS to interact with Carto map layers, data and visualizations.","archived":false,"fork":false,"pushed_at":"2018-05-10T09:38:19.000Z","size":221,"stargazers_count":10,"open_issues_count":0,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-08-03T16:08:56.157Z","etag":null,"topics":["carto","cartocss","extjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrestoneDigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-08-30T19:03:46.000Z","updated_at":"2021-11-15T11:59:58.000Z","dependencies_parsed_at":"2023-03-22T21:39:13.573Z","dependency_job_id":null,"html_url":"https://github.com/CrestoneDigital/extjs-carto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrestoneDigital%2Fextjs-carto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrestoneDigital%2Fextjs-carto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrestoneDigital%2Fextjs-carto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrestoneDigital%2Fextjs-carto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrestoneDigital","download_url":"https://codeload.github.com/CrestoneDigital/extjs-carto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224989542,"owners_count":17403408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carto","cartocss","extjs"],"created_at":"2024-08-03T16:00:45.798Z","updated_at":"2024-11-17T01:31:28.206Z","avatar_url":"https://github.com/CrestoneDigital.png","language":"JavaScript","funding_links":[],"categories":["Extensions, components"],"sub_categories":["Components, ux"],"readme":"# extjs-carto\nNative components for ExtJS to interact with Carto map layers, data and visualizations.\n\n\n## CartoMap.js\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`cartoMap` | [L.map] | [L.map] | The leaflet map for this component.\n`zoom` | Number | 4 | A zoom value to initialize the `cartoMap` with.\n`scrollWheelZoom` | Boolean | true | `true` to allow the map to be scrolled by the mouse wheel.\n`basemap` | String\u003cbr\u003eObject\u003cbr\u003e[L.tileLayer] | 'positronLite' | The basemap to be used for the `cartoMap`.\n`bounds` | [LatLngBounds] | null | The bounds of the `cartoMap`.\n`minZoom` | Number | 3 | The minimum possible zoom level of the `cartoMap`.\n`maxZoom` | Number | 18 | The maximum possible zoom level of the `cartoMap`.\n`mapLock` | Boolean | false | `true` for the map to update the filters in every store found in `storesToLock` when the `cartoMap` bounds change.\n`layers` | Carto.util.LayerCollection | null | A collection of the layers of the `cartoMap`.\n`selection` | [Ext.data.Model] | null | The selected record of the `cartoMap`.\n`selectedAction` | String\u003cbr\u003eString[] | null | The actions to take when a record is selected.\n`stores` | [Ext.data.Store] | null | The stores associated with each subLayer of the `cartoMap`.\n`storesToLock` | String[] | null | An array of storeIds to be passed the `cartoMap`'s bounds when `mapLock` is true.\n\n### Instance Properties\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`maskWhileLoading` | Boolean | false | `true` to mask the map component while tiles are loading.\n`loadingMessage` | String | 'Loading Tiles...' | The message to display while the tiles are loading.\n\n### Binding\n\nThe `map`'s selection is two-way bindable, similarly to other Extjs components. This means it plays well with things like `grid`s.\n\n#### Example\n\n```javascript\n{\n    xtype: 'grid',\n    bind: {\n        selection: '{selectedItem}',\n        store: '{sampleStore}'\n    }\n}, {\n    xtype: 'cartoMap',\n    bind: {\n        selection: '{selectedItem}'\n    },\n    basemap: 'darkMatterLite',\n    layers: [{\n        subLayers: [{\n            bind: '{sampleStore}'\n        }]\n    }]\n}\n```\n\n#### Available Basemaps\n\n* positron\n* positronLite\n* positronLabelsBelow\n* darkMatter\n* darkMatterLite\n* darkMatterLabelsBelow\n* cartoWorldEco\n* cartoWorldFlatBlue\n* cartoWorldMidnightCommander\n* cartoAntique\n* toner\n* tonerLite\n* tonerLabelsBelow\n* tonerBackground\n* tonerLines\n* tonerHybrid\n* watercolor\n\n##### Example Usage\n\n```javascript\n{\n    xtype: 'cartoMap',\n    basemap: 'darkMatterLite'\n}\n```\n\n#### Available Selected Actions\n\n* placeMarker\n* panTo\n\n##### Example Usage\n\n```javascript\n{\n    xtype: 'cartoMap',\n    selectedAction: 'panTo'\n}\n```\n\n```javascript\n{\n    xtype: 'cartoMap',\n    selectedAction: ['panTo', 'placeMarker']\n}\n```\n\n## Layers\n\nLayers are a combination of data (from SQL) and styling (from CartoCSS) that render the map.\nCarto has multiple different types of layers (see the [demo][Layer Demos] for some examples), but there are some configs common to them all.\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`cartoLayer` | Layer | null | The underlying Layer object.\n`layerId` | String | Auto-generated id | The key by which this layer can be retrieved, removed, etc.\n`username` | String | '' | The username for the associated carto account.\n`table` | String | '' | The table that this layer draws from.\n`hidden` | Boolean | false | Set to `true` to hide this layer.\n`mapZIndex` | Number | null | Defines the order that the layers are rendered on the `map`.\n\n## Layer Groups\n\nCarto can combine multiple layers into one layer group that is created and rendered as one layer, rather than multiple.\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`subLayers` | Carto.util.SubLayerCollection | null | The collection of [Carto.sublayer.SubLayerBase] objects associated with this layer group.\n\n## SubLayers\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`layer` | [Carto.layer.LayerGroup] | null | The [Carto.layer.LayerGroup] that owns this subLayer.\n\nSee also: [Carto.mixin.DataContainingLayer]\n\n## Torque Layers\n\nTorque layers combine with [Carto.css.Torque][CartoCSS] to create powerful layer objects that can accomplish much more than traditional map layers.\n\nSee also: [Carto.mixin.DataContainingLayer]\n\n##### Example Usage\n\n```javascript\n{\n    xtype: 'cartoMap',\n    layers: [{\n        type: 'torque',\n        css: {\n            type: 'torque' // or heatmap, torquecat\n        },\n        ...\n    }]\n}\n```\n\n## DataContainingLayer.js\n\nMost layers (like [Carto.layer.Torque] and [Carto.sublayer.SubLayerBase]) contain data.\nThis mixin defines the SQL, CartoCss, and store functionality for layers that render data.\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`store` | [Carto.CartoStore] | null | A [Carto.CartoStore] associated with this layer. If defined, it will create the SQL for this layer.\n`sql` | String | '' | SQL for this layer to use when it is created.\n`css` | Object\u003cbr\u003eString\u003cbr\u003eString[] | [Carto.css.Point][CartoCSS] | The CartoCSS definition for this layer.\n`selection` | [Ext.data.Model] | null | The layer's current selected record.\n`interactivity` | Object | null | Use `enable: true` to enable interactity on this layer.\n\n## CartoCSS\n\nCartoCSS defines how a layer is styled on the map.\nThere are multiple types that are available to be used as-is or extended as appropriate.\n\nName | Type | Description\n--- | --- | ---\n`point` | Carto.css.Point | A generic point-based style.\n`line` | Carto.css.Line | A generic line-based style.\n`polygon` | Carto.css.Polygon | A generic polygon-based style.\n`intensity` | Carto.css.Intensity | Point style with multiplying effect.\n`heatmap` | Carto.css.HeatMap | Torque style with multiplying effect.\n`torque` | Carto.css.Torque | Torque style for showing time-based effects.\n`torquecat` | Carto.css.TorqueCat | Torque style with added categorical grouping.\n\n##### Example Usage\n\n```javascript\n{\n    css: {\n        type: 'point',\n        // the value config will extend, not overwrite\n        value: {\n            markerColor: 'blue'\n        }\n    }\n}\n```\n\n## CartoStore.js\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`groupBy` | [Carto.CartoGroupBy] | null | A groupBy object defining the GROUP BY clause of the `Carto.CartoProxy`'s SQL.\n\n\n## CartoProxy.js\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n\n## CartoGroupBy.js\n\nThis is an SQL helper object for defining the GROUP BY clause in the SQL.\n\n### Configs\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`fields` | Object[]\u003cbr\u003eString[] | null | An array of field configs, in the order they should be presented in the GROUP BY clause.\n`countName` | String | 'cnt' | The name of the field that should contain the counts of the different groups.\n\nIn addition, the [Carto.CartoGroupBy] object uses optional extra properties of the [Ext.data.field.Field] that are not native.\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`property` | String | undefined | Specifies the name of the column for this field, if different from the `name` of the field.\n`sql` | String | undefined | Use this to force the query to use this SQL for this field. Useful for more complicated queries.\n`aggregateType` | String | undefined | An SQL function for aggregating on this field. If specified, this field will not be included in the GROUP BY clause.\n\n## Demos\n\n### Basic\n\n* [Visualization of a Map in Ext JS](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/basicMap/basicMap-example1.html)\n* [A Map centered on Japan](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/basicMap/basicMap-example2.html)\n* [A Map with a simple Carto layer](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/basicMap/basicMap-example3.html)\n* [A Map whose layers can be added and removed](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/basicMap/basicMap-example4.html)\n\n### Grid/Map\n\n* [Grid and Map bound to Carto Store](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example1.html)\n* [Map with hidden layer and multiple selected actions](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example2.html)\n* [Grid locked to Map bounds (with tooltip)](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example3.html)\n* [Grid and Map with filter options](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example4.html)\n* [Grid and Map with auto filter options](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example5.html)\n* [Grid and Map with combo filter](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example6.html)\n* [Grid and Map with combo filter](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/gridMap/gridMap-example7.html)\n\n### Carto Account\n\n* [Carto Stores with tables and columns](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/cartoAccount/cartoAccount-example1.html)\n\n### Chart/Map\n\n* [Chart and Map filtered by text input](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/chartMap/chartMap-example1.html)\n\n### Layer Demos\n\n* [Demonstration of multiple layer types (point, polygon, heatmap, torque)](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/layerDemo/layerDemo-example1.html)\n\n### Store Binding\n\n* [Grid and two Maps bound to one Carto Store](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/storeBinding/storeBinding-example1.html)\n\n### Fire Map\n\n* [Wildfire Map with two styled layers](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/fireMap/fireMap-example1.html)\n* [Wildfire Map with styled layer and heatmap layer](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/fireMap/fireMap-example3.html)\n\n### [Wildfire Exploration](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/fireMap/fireMap-example2.html)\n\n### [Carto Map Explorer](http://rawgit.com/CrestoneDigital/extjs-carto/master/examples/playMap/playMap-example1.html)\n\n\n[Ext.data.Model]: http://docs.sencha.com/extjs/6.2.0/classic/Ext.data.Model.html\n[Ext.data.Store]: http://docs.sencha.com/extjs/6.2.0/classic/Ext.data.Store.html\n[L.tileLayer]: http://leafletjs.com/reference.html#tilelayer\n[L.map]: http://leafletjs.com/reference.html#map-usage\n[LatLngBounds]: http://leafletjs.com/reference.html#latlngbounds\n[Carto.CartoGroupBy]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#cartogroupbyjs\n[Carto.sublayer.SubLayerBase]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#sublayers\n[Ext.data.field.Field]: http://docs.sencha.com/extjs/6.2.1/classic/Ext.data.field.Field.html\n[Carto.layer.LayerGroup]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#layer-groups\n[Carto.mixin.DataContainingLayer]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#datacontaininglayerjs\n[Layer Demos]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#layer-demos\n[CartoCSS]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#cartocss\n[Carto.CartoStore]: https://github.com/CrestoneDigital/extjs-carto/blob/master/README.md#cartostorejs\n\n# Presentations\n\n### [SlideShare - SenchaCon 2016: Integrating Geospatial Maps \u0026 Big Data Using CARTO via Ext JS Components](https://www.slideshare.net/senchainc/senchacon-2016-integrating-geospatial-maps-big-data-using-cartodb-via-ext-js-components-michael-giddens/1)\n[Video can be found here of the talk.](https://www.senchacon.com/videos-slides/#Top)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrestoneDigital%2Fextjs-carto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCrestoneDigital%2Fextjs-carto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrestoneDigital%2Fextjs-carto/lists"}