Hot answers tagged

6

Geometries in CartoDB are by default stored with two different coordinate reference systems (CRS). the_geom has coordinates in Degree, while the_geom_webmercator has coordinates in units of meter or smaller depending on latitude. Both systems can be used world wide (Web Mercator excluding the pole areas), but both systems are not appropriate to measure ...


6

You could create an Object before layer.on('loaded'... with the legend keys you want to use for this dataset, for example: const LEGEND_KEYS = { LT: 'Least Threatened', VU: 'Vulnerable', CR: 'Critically Endangered', EN: 'Endangered' } And then, when updating the legend: colorLegendList += `<li><span ...


4

As you mention, the tutorial has a mistake. You're not getting the properties from the feature in the loop correctly. The code from the example is: $categoryWidget.categories = viz.variables.cities.value .map(feature => ({ name: feature.name, value: feature.pop_max, })) .sort((a, b) => b.value - a.value); This is wrong. If you take a ...


4

Exactly! The 'loaded' event is only fired when the layer is loaded, but the 'updated' event is fired every time the layer is updated. You can take a look at this example: https://carto.com/developers/carto-vl/examples/#example-viewport-summary We recommend using the 'updated' event only if you need the widget information to change, but if it's going to ...


4

Yes, it is possible by using the reverse expression. Using the code from your example, it would be: color: ramp(globalQuantiles($sa_m3_km2, 10), reverse(temps)) You can find more about this expression in our documentation: https://carto.com/developers/carto-vl/reference/#cartoexpressionsreverse And an example from the reference using the JavaScript API: ...


3

I think the problem here is that you're passing directly the attribute ($yield_ls) to the ramp expression, and the results are sorted by number of occurrences of each category. In order to classify the content you're receiving, you've to use the buckets as follows: color: ramp(buckets($yield_ls, [ "Fractured 0.0 - 0.1 l/s", "Fractured 0.1 - 0.5 l/s"...


3

You're probably making no mistake, Kristen. If you copy & paste exactly the last piece of code from that guide (with the whole html code), there is a relative link to style.css, which you have probably not noticed. The link in the code is: <link rel="stylesheet" type="text/css" href="../../style.css"> a file which you are probably missing ...


3

Checking on old CARTO.js GitHub issues, I have found a workaround that could solve your problem: placing the https after the named map definition: cartodb.createLayer(map, { user_name: user, type: 'namedmap', named_map: { name: 'name_whatever', ... } }, { https: true })


3

In order to group your data by country and show only one point, I suggest using Create Centroids of Geometries Builder analysis. Here is a tutorial that exmplains how to do it. As far as I understood your requirement, you will need to set your country column as category and avg, sum... of your numerical value as the aggregation operation. UPDATE: If you ...


3

Are you using the VL Bridge? If so, there is an undocumented method for the category widget's bridge: enableColorMapping. If the viz bridged to your as-category-widget has a color ramp, it will add the color to the categories automatically. Keep in mind that it's undocumented, so it might change in the future without notice. const bridge = new AsBridge....


3

The issue in your code is that 'fetch' is asynchronous. Therefore, when creating the GeoJSON source, the 'stations' variable doesn't have yet any value. In this case, you'd need to use Promises, async-await or a callback. From the example above: Using a callback: fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson') .then((response)...


2

CARTO's Create Travel or Distance Buffers tutorial provides a guide which describes how to apply a buffer as follows: Import the template .carto file packaged from “Download resources” of this guide and create the map. Builder opens with TRI point data as the first map layer, and Census Tract polygons as the second map layer. From the TRI map layer,...


2

You have the correct idea that CartoCSS is something that would assist in this effort of yours. I believe the color ramp will generally work with about 7 or so colors before it lumps everything else in the "Other" category. I would suggest referencing Tips & Tricks - Geospatial Analysis SELECT cartodb_id, the_geom, the_geom_webmercator, ...


2

You were on the right track. In order to style all your categories using CARTO Builder, you need to switch from values to CartoCSS as shown in the following gif: Secondly, you need to update the code using basic CartoCSS conditionals. Notice that you would need to know the category names and colors in advance. You can use a code like this one. #layer { ...


2

To create different individual drive time buffers you can't use BUILDER, as it's not parametrized by a field. Instead, you need to use SQL directly to UPDATE your dataset with the geometries. So if your field for the commute time is commute_time then your query would look like the following queries. Mind that I'm putting the points as latitude/longitude to ...


2

There is no public API to perform that task, even it's supported (with proper warning notice) by CARTO Python SDK, search for the Update the properties of a dataset example. In your case you are looking for the dataset.locked property.


2

There is a non documented property for this. In the histogram is called noDataHeaderMessage https://github.com/CartoDB/airship/blob/master/packages/components/src/components/as-histogram-widget/as-histogram-widget.tsx#L156


2

If you are referring to CARTO BUILDER then the answer is no, you cannot limit or define the number of entries to show on the widget. On the other hand, if you are talking about a CARTO.js dataview or an Airship web component, then yes, you can limit the number of entries in the category widgets, just check the docs I've linked.


2

It's not possible to use both carto.js and CARTO VL in the same HTML file using the cdn, because both use the same "carto" namespace. That's the reason why when you comment one of them, you're using the other. If you add both scripts, the "carto" variable will make reference to the last script you've added. If you want to develop an application with both ...


2

You can change the properties of the widget right after the append call. For instance, you could change visibleCategories and it should work. If you need to read the properties back, you have to wait until the next tick. From a VL <--> Airship perspective, the widget will update on every update event on the layer it's bridged to. You could listen to that ...


2

CARTO VL can render animated polygons, not a lot of code is involved but it depends on how much interactivity you need on your application. At the library documentation you have this example about animating polygons and then this other about adding playing controls. Disclaimer: I work at CARTO


2

Main culprit of the breaking change here. The selection is a bit more complex now, because of categorical data support. The event.detail is an object with several props. In event.detail.selection there's the "old" selection format, so you can just change to: widget.addEventListener('selectionChanged', event => { this.$emit( '...


2

First, a caveat: I don't know anything about Carto basemaps and any licences they require, so this info is provided as is. I've not tested qgis2web with Carto basemaps for this reason. You can add XYZ layers into QGIS by specifying their URL(s) - use the browser panel (https://docs.qgis.org/3.4/en/docs/user_manual/managing_data_source/opening_data.html#the-...


2

As explained in CARTO documentation, Airship is a design framework to build (geospatial) applications. It works nicely with CARTO VL and CARTO JS, but you could add it to any of your projects. Basically, it helps you to apply already designed layouts (sidebars, panels, toolbars...), components (widgets, legends, sliders...), and styles (colors, typography...)...


2

The GeoJSON source method has an option to indicate the 'date' columns. Can you try with something like this? const dateColumns = ['date']; const options = { dateColumns }; const newSource = new carto.source.GeoJSON(JSON.parse(this.source), options); :wave


1

There's nothing that prevents you to add more layers to your Leaflet or Google Maps map aside from CARTO.js layers, same for Mapbox GL on CARTO VL. If you are referring to use CARTO.js methods then it only works against a CARTO Maps API server. In the case of VL you can also use GeoJSON or MVT as sources.


1

Several base problems here. The code that runs on every change of the drop-down selector... selector.on('change',function(e){ let value = $(".js-dropdown-selector option:selected").val(); console.log("You have selected Route " + value + "."); if(value == 'all'){ source.setQuery('SELECT * FROM aggregate'); } else { source.setQuery("SELECT * ...


1

There is no way to transfer the account. You get the error in carto.com, right? Currently the only way would be to use another app bundle ID.


1

It's possible to have both libraries at the same time but it's not straightforward. You need to dynamically load one script, then modify the carto object and then load the other one. After both libraries are loaded you can run the rest of the code. Not easy but doable. The real question is why do you want both libraries at the same time? CARTO.js is a ...


1

The solution is to change the trigger legend event from 'loaded' to 'updated': aquiferLayer.on('updated', () => {})


Only top voted, non community-wiki answers of a minimum length are eligible