This is an excerpt from a store-locator app we were building. Information that is often in infowindows on the map canvas is displayed in a "store-info" sidebar <div> outside the map canvas

100%

This is an excerpt from a store-locator app we were building. Information that is often in infowindows on the map canvas is displayed in a "store-info" sidebar <div> outside the map canvas

✓ Published0🌍 Public

Last edited Apr 1, 2015

Created on Apr 1, 2015

This example shows a store-locator interface where search results appear in a sidebar `<div>` outside the map canvas, listing the five nearest stores with name, telephone, Monday hours, and location description. The map uses the Google Maps API for autocomplete and centering, while store data comes from a CartoDB SQL query that orders locations by spatial proximity to the searched point. The code builds HTML strings for each result and injects them into the `#store-info` div, with links that call `openInfoWindow` on the CartoDB layer to highlight the corresponding map marker.

AI-generated description

Similar vizzes

Loading thumbnail…

Advanced Infowindows | Demo

This demo shows how to create fully customized map infowindows with CartoDB, embedding images, videos, and dynamic row-based content through the platform’s advanced editor. It uses CartoDB’s built-in Mustache templating, where column names like `{{image_url}}` are replaced with real data values at click time. The example also demonstrates required HTML structure classes such as `cartodb-popup` and `cartodb-popup-content-wrapper`, and embeds a live interactive map via an iframe pointing to a CartoDB visualization.

Aandrewxhill

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

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

63% match

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

63% match

Loading thumbnail…

DataKind Workshop | Demo

This demo embeds a CartoDB map visualization centered on global coordinates, displaying geographic data points as an interactive web map. The iframe loads a published CartoDB visualization with pan and zoom controls enabled, while hiding search, layer selection, and legends for a clean presentation. The underlying map uses CartoDB’s tile-based rendering to show spatial patterns, with the page’s HTML and CSS ensuring the map fills the entire viewport. The code relies on the CartoDB embed API and standard iframe integration rather than custom JavaScript libraries.

Aandrewxhill

62% match

Loading thumbnail…

Application | CartoDB

This example shows how to add download buttons to a CartoDB map, allowing users to export the underlying dataset in CSV, GeoJSON, or Shapefile formats. The map itself displays earthquake data (all_week) and is rendered using the CartoDB.js library via cartodb.createVis(). Below the map, three styled buttons link to the CartoDB SQL API, querying the same dataset with different format parameters so visitors can easily download the raw data. The page demonstrates a clean pattern for combining an embedded interactive map with simple data export functionality.

Aandrewxhill

61% match

Loading thumbnail…

rundown

This example demonstrates how SQL queries can filter, analyze, and modify geographic data in CartoDB, using Massachusetts census blocks and Boston corner store locations. It shows spatial queries like distance calculations and bounding-box filters, plus joins to compute nearest fire station distances. The code uses the CartoDB SQL API and CartoDB.js library, with Leaflet for map rendering, to apply dynamic SQL filters and create visualizations without altering the underlying dataset.

Aandrewxhill

61% match

Loading thumbnail…

Gist 24e4e0ec42cdeff6633c

This example presents a promotional slideshow for CartoDB, a cloud-based mapping and data visualization platform. The presentation uses D3.js to animate text bullet points and an interactive map visualization, showcasing features like drag-and-drop data importing, real-time dashboards, and GIS analysis through PostGIS. The map rendering employs d3.geoPath to draw geographic boundaries, while the slideshow transitions through sections covering web development integration, team collaboration, and high-performance data processing on scalable infrastructure.

Aandrewxhill

61% match