canvas marker

100%

✓ Published0🌍 Public

Last edited Mar 28, 2011

Created on Mar 28, 2011

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.

AI-generated description

Similar vizzes

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

83% 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

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 e9e662643752b1cd6f46767b03eab04d

This example demonstrates how to draw a line graph using the HTML5 Canvas API, adapted from a Japanese presentation on Canvas fundamentals. The code initializes a canvas element, retrieves its 2D rendering context, and then draws a framed plotting area with gridlines, data points as arcs, text labels, and connecting line segments. It uses core Canvas methods such as `strokeRect`, `arc`, `fillText`, and `moveTo`/`lineTo`, along with `save` and `restore` to manage drawing states. The visualization is rendered directly to canvas with no external charting library, though the slides reference Chart.js and D3.js as alternatives.

MMiyaton

65% match

Loading thumbnail…

Canvas Animation Using D3.js II

This example demonstrates an interactive canvas visualization using D3.js, where moving the mouse highlights circles that are generated and animated on a canvas. It uses an offscreen canvas with the same dimensions as the main one, rendered ahead of time, so that the code can detect hovered circles via `ctx.getImageData(mouseX, mouseY, 1, 1)`. The interface includes a dat.GUI control to adjust the circle count, which regenerates the data and redraws the canvas, alongside a stats.js monitor for rendering frequency. Clicking a button reveals the offscreen canvas as an image via `toDataURL()`.

11Cr18Ni9

64% match

Loading thumbnail…

shape rendering in nodejs with LearnBoost's node-canvas

This example demonstrates dynamic, tile-based map rendering in Node.js using LearnBoost's node-canvas library. It projects GeoJSON feature coordinates onto a spherical Mercator grid and serves individual 256x256 pixel tiles over HTTP. The code loads multiple geographic layers, such as park boundaries, water bodies, and street centerlines from naturalearthdata.com or datasf.org, applies fill and stroke styles, and caches rendered canvases for reuse. It uses the canvas context's `moveTo`, `lineTo`, `scale`, and `translate` methods to draw the parsed geometries, then streams PNG output to the client.

RRandomEtc

64% 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

64% 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

64% match