Maptimeify a polygon in CartoCSS

100%

Maptimeify a polygon in CartoCSS

✓ Published0🌍 Public

Last edited Oct 30, 2014

Created on Oct 30, 2014

This visualization demonstrates how to apply a Maptime-themed rainbow outline to a specific building polygon using CartoCSS in TileMill. It shows a single OpenStreetMap feature (osm_id 260351411) styled with seven stacked line layers, each offset by two pixels and colored red, orange, yellow, green, blue, purple, plus a white halo. The CartoCSS snippet defines separate compositing layers (::red, ::orange, etc.) with line-width, line-color, and line-offset properties to create the striped effect. The example references tips from TileMill GitHub issue #2144 and credits AJ Ashton and Dane Springmeyer for the technique.

AI-generated description

Have you wanted to make a #Maptime-themed building in CartoCSS? Now you can!

Inspired by the first #Maptime rainbow building images from MaptimeAMS.

And thanks to tips found here: https://github.com/mapbox/tilemill/issues/2144. Thanks AJ Ashton and Dane Springmeyer!

Similar vizzes

Loading thumbnail…

Faking building height by using polygon size (CartoCSS)

This example visualizes building footprints from OpenStreetMap by using polygon size to suggest height, with taller structures implied through larger, more prominent shapes. It applies CartoCSS styling to render the polygons with a semi-transparent black outline and a muted tan fill, while the `building-height` property references a `height` attribute from the data. The code relies on CartoCSS’s styling syntax to control line width, fill color, and opacity, but does not extrude actual 3D geometry; instead, it fakes verticality through 2D visual weight. The source data comes from an OSM export polygon layer.

Aandrewxhill

70% match

Loading thumbnail…

On the fly size sort of polygons in CartoDB

A CartoDB map displays building polygons from OpenStreetMap, sorted and repositioned by size. The polygons are ordered by height and laid out in rows using a recursive SQL query that translates each geometry into a packed grid. The visualization uses CartoDB.js with Leaflet to render the map and tiles, while the query employs `ST_Area`, `ST_Translate`, and `ST_Transform` to compute offsets and project the geometries. Red polygons with white outlines appear over a Mapbox basemap.

Aandrewxhill

67% match

Loading thumbnail…

Broken pieces | CartoDB.js

The visualization shows a map of abstract geometric shapes in vivid colors, with overlapping polygons and dashed lines that shift between purple, red, and teal based on a numerical color attribute. It uses CartoDB.js and Leaflet to render two sublayers, each applying a different CartoCSS style to the same SQL-generated data. The SQL query computes random spatial extents and generates lines from sinusoidal and tangent functions, while a JavaScript timer toggles layer visibility every 1.5 seconds to create a flashing effect. The map slowly pans across the view using Leaflet's `panTo` method.

Aandrewxhill

66% match

Loading thumbnail…

Gist 85a75203bb9327d5704c

This example visualizes a single blue polygon with a semi-transparent fill and a bold outline, rendered from GeoJSON coordinate data. The visualization relies on a custom rendering approach, likely using d3.geoPath to project and draw the polygon onto an SVG or canvas element. The code applies explicit styling properties—fill, fill-opacity, and stroke-width—directly from the feature’s style object, demonstrating how geographic features can be styled programmatically. The rendering is static, with no animation or interaction, and the polygon’s vertices span longitude and latitude values to illustrate basic map-projection output.

CCliffordAnderson

66% match

Loading thumbnail…

Gist 2869abf438288423d49f56f8047b3ca9

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.

Aandrewbt

66% match

Loading thumbnail…

Layer selector example | CartoDB.js

This example shows an interactive map of urban areas with a click-to-zoom-and-download feature. It displays polygon features from the Natural Earth dataset, and clicking a polygon either zooms to its centroid if the map is zoomed out, or triggers a download of shapefile data from an OpenStreetMap database query. The visualization uses CartoDB.js to create the map and manage layers, with a custom SQL query selecting geometry, area, and centroid coordinates. The code also enables feature interactivity and handles click events to update the map view or initiate a file download.

Aandrewxhill

65% match

Loading thumbnail…

Sequential Tiles

This example demonstrates a rainbow-colored tile grid that visualizes the sequence of map tiles in a web mapping interface. Each tile at a given zoom level is assigned a color based on its sequential position, creating a visible gradient that shows the order and layout of map tiles. The visualization uses the Polymaps JavaScript library’s `po.map()` and `po.layer()` APIs, with a custom `rainbow` function that calculates a hue from the tile’s column and row indices. The code also includes a custom `hsl` function for color conversion, and the map is configured with a 32x32 tile size and zoom level 4.

Mmbostock

65% match

Loading thumbnail…

combining styles across layers

This visualization combines multiple cartographic layers into a single tile-rendered map, using CartoDB’s tile server with SQL queries that union river and country boundary data. The CartoCSS styling applies distinct rules per layer ID: rivers render as semi-transparent blue lines whose width varies by zoom level, while country borders use dashed strokes that solidify at higher zooms. A dedicated `::glow` symbolizer adds a subtle black outline for emphasis. The example demonstrates how zoom-dependent styling and layer-specific properties can be merged in one tile request, with data pulled from the `rivers` and `country_attributes_live` tables.

Aandrewxhill

65% match