Skip to main content
100%

example.html from mapshot

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 14, 2014
Created on Jan 8, 2014

A canvas-based map of populated places from the ne_10m_populated_p_2 dataset, rendered as red markers across Europe, uses mapshot with the CartoDB Tiles API to load and style geographic data. The mapshot library draws a Stamen Toner base layer and applies a custom CartoCSS style for the markers. The renderer chains three visual effects—blur, noise, and posterize—over the map, demonstrating how mapshot layers multiple Canvas passes onto tile imagery.

AI-generated description

Similar vizzes

Loading thumbnail…

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.

Aandrewxhill
70% 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
70% match
Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock
70% match
Loading thumbnail…

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

Aandrewxhill
69% match
Loading thumbnail…

mapbox example

Two interactive maps render 10,000 randomly generated GeoJSON points around London, comparing Mapbox GL JS and Leaflet performance. The left panel uses Mapbox GL JS with a custom map style, rendering circle layers with hover popups via `queryRenderedFeatures`. The right panel uses Leaflet 1.0.1 with Mapbox raster tiles, employing `L.circleMarker` for points and mouseover-bound popups. Both visualizations share identical fake data and styling, highlighting differences in marker rendering and interaction between the two libraries.

AAlan McConchie
69% match
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
68% match
Loading thumbnail…

Gist 890902

This example defines a reusable canvas-based map marker component for the mol.ui framework. It creates a 120x120 pixel canvas element and layers three separate images—background, foreground, and error state—using the Canvas 2D API’s `drawImage` method. The code supports dynamic icon loading via `setIconSrc` and exposes a `getDataURL` method to export the composite marker as a PNG. The rendering approach relies on explicit canvas drawing operations rather than DOM elements, making it suitable for custom map overlays.

Aandrewxhill
68% 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
68% match