Skip to main content
100%

Gist 2869abf438288423d49f56f8047b3ca9

✓ Published0🌍 Public
Aandrewbt
Last edited Apr 21, 2018
Created on Apr 21, 2018

This example builds a custom interactive map by layering a scanned historical campus map from MapWarper between two CARTO Voyager basemap tilesets: one without labels and one with labels only. The code constructs a JSON mapconfig specifying three HTTP tile layers and uses the requests library to post it to Carto’s map API. The result visually sandwiches the old map beneath modern road and label layers, preserving geographic context while overlaying contemporary annotations.

AI-generated description

Similar vizzes

Loading thumbnail…

TileJSON.io - test

This example displays an interactive web map with three overlaid tile layers, including an OpenStreetMap basemap, an Azavea NLCD layer, and a CARTO Voyager basemap. The visualization uses TileJSON 2.2.0 metadata to define tile sources and layer properties such as opacity and visibility, which are rendered in a browser-based map client. A JSON configuration file controls the map’s center point, zoom level, and shareable Gist settings, while the tile layers are fetched from remote servers via standard XYZ tile scheme URLs. The code relies on TileJSON and map rendering APIs to composite and display the geographic data.

Aandrewbt
77% match
Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill
75% match
Loading thumbnail…

Gist fc77170db4eeca1daeb7

This example demonstrates how to initialize a Leaflet map centered at coordinates [0,0] with a zoom level of 2, then add a CartoDB layer to it. The code uses the `L.Map` constructor and `cartodb.createLayer` to load a visualization from a CartoDB visualization JSON URL. Once the layer finishes loading, a callback function is available for further interaction, while an error handler displays an alert if the layer fails to load. The map serves as the base canvas for displaying the CartoDB-provided geographic data.

Aandrewxhill
74% match
Loading thumbnail…

Load a public CARTO Builder URL dynamically

This example loads a public CARTO Builder URL into a Mapbox GL map as a raster tile layer. It shows how a user can paste a CARTO embed URL, select specific layers from a dropdown, and dynamically add the corresponding map tiles to the Mapbox GL view. The code parses the URL to extract the username and named map template, constructs an XYZ tile request, and uses `map.addLayer` with a raster source to display the data. The interface includes an input field, layer selector, and a button to trigger the tile loading.

Aandrewbt
73% match
Loading thumbnail…

Gist 734eccf8853aef50f07b

This example shows a Leaflet map centered at the equator with zoom level 2, overlaid with a CartoDB layer. It uses Stamen’s toner tile layer as the base map, then creates a CartoDB layer via `cartodb.createLayer` and adds it to the map. The code includes callbacks for the layer’s `done` and `error` events, though no specific layer styling or data processing is shown.

Aandrewxhill
73% match
Loading thumbnail…

Gist 894879

This example builds an interactive map visualization using the D3.js library, displaying geographic data over a rendered world map. It applies a force-directed simulation with `d3.forceSimulation` to position nodes, while `d3.geoPath` generates the map outlines and `d3.geoProjection` handles coordinate transformations. The interface includes customizable control panels styled via CSS, allowing users to adjust map layers and layout dynamically. The visualization renders data from a gist source, combining geographic boundaries with overlaid points that respond to simulated forces for a dynamic, data-driven presentation.

Aandrewxhill
72% match
Loading thumbnail…

Add layer | CARTO

This example shows how to add a single CARTO layer to an interactive map. It displays populated places as points on a global basemap, centered at [0,0] with zoom level 1. The visualization uses Mapbox GL JS for map rendering and the CARTO VL library (v1.4.1) to define a data source from the `populated_places` dataset and add it as a layer to the map. The basemap uses CARTO’s `voyager` style, and the layer is added before the `watername_ocean` layer. A loading spinner hides once the layer finishes loading.

Aandrewbt
72% match
Loading thumbnail…

CartoDB Workshop | CartoDB.js

This example uses CartoDB.js to display an interactive map inside a full-screen div. The code initializes a map with a single custom overlay button labeled “Do Something,” which sits in the top-right corner and changes its background on hover. The map itself is rendered using the CartoDB library’s tile layers, while the button is styled with the included cartodb-infobox CSS class. The JavaScript structure defines a main function tied to the window load event, though no map layers or data sources are explicitly loaded in the provided snippet.

Aandrewxhill
72% match