Skip to main content
100%

Gist 890902

✓ Published0🌍 Public
Aandrewxhill
Last edited Mar 28, 2011
Created on Mar 28, 2011

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.

AI-generated description

Similar vizzes

Loading thumbnail…

canvas marker

This example uses layered PNG images to compose a map marker visualization on an HTML canvas. The code draws a background, optional type-specific overlay, error indicator, and foreground image in sequence using the Canvas 2D API’s `drawImage` method. Each layer is painted onto a dynamically created `<canvas>` element, and the final composite is exported as a data URL via `toDataURL("image/png")`. The rendering relies on jQuery to instantiate the canvas and manage the drawing context, with the marker’s appearance determined by the presence of `this.type` and `error` flags.

Aandrewxhill
83% match
Loading thumbnail…

example.html from mapshot

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.

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

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed
66% match
Loading thumbnail…

Gist fba5514afb352314a04795e168f3a0ba

This example demonstrates a set of reusable helper functions for drawing and manipulating shapes on an HTML canvas. It shows utility functions for creating lines, triangles, and rectangles, as well as geometric operations like panning, resizing, and checking whether one rectangle contains another. The code relies on the Canvas API's `beginPath`, `moveTo`, `lineTo`, `stroke`, and `rect` methods, along with standard DOM manipulation methods such as `document.querySelector`, `createElement`, and `addEventListener`. The rendering approach is direct canvas drawing, with no external data source or visualization library involved.

Aalex-milanov
65% match
Loading thumbnail…

image

This example is a simple image-labeling tool that lets a user load an image into an HTML canvas, add a caption as text, and save the resulting composite as a PNG. The interface provides a file input for selecting an image, a text field for entering a caption, and buttons to apply the caption or open the saved PNG in a new window. The code uses the Canvas 2D API’s `drawImage` and `fillText` methods to render the image and text, and `toDataURL` to export the canvas content.

Aamundo
65% match
Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Mmbostock
64% match