Skip to main content
SimilarExport ZIP
100%

First foray into asynch JS loading, this is a little snippet of the Surftourist maps code

✓ Published0🌍 Public
DDylanFM
Last edited Jun 30, 2011
Created on Jun 30, 2011

This example demonstrates asynchronous loading of the Google Maps JavaScript API and supplementary mapping libraries to initialize an interactive map. It first checks for the presence of `google.maps` and, if absent, dynamically injects a script tag with a callback function to continue setup. The code then uses Modernizr.load to test for the `InfoBox` and `RickMarker` classes, loading a fallback script if needed. After dependencies load, it chains methods to configure the map, process points, add markers, draw lines, and set bounds, ultimately triggering a custom `mapsLoaded.ST` event. The map’s data comes from markers and points processed at runtime, with the Google Maps API serving as the core rendering engine.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

CCKschneid
64% match
Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile
63% match
Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock
62% match
Loading thumbnail…

Mapbox 1.X Reference Examples

This example showcases a collection of Mapbox GL JS code snippets, extracted from official documentation at version 1.12.0, demonstrating various interactive mapping techniques. It features an animated image overlay on a map, using the Mapbox GL JS API to handle tile rendering and camera controls. The snippets illustrate how to integrate custom vector tiles and geospatial data, with code for styling layers and managing user interactions. The project serves as a reference for common mapping tasks, such as adding markers, drawing polygons, and animating data over time.

CCurran Kelleher
61% match
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that loads D3 v5 and TopoJSON from a CDN, with a commented-out map projection setup for rendering geographic data. The code creates an SVG canvas and uses `d3.json` to fetch world-atlas data, logging the result to the console. While the map rendering logic using `geoMercator` and `geoPath` is present but inactive, the starter demonstrates the basic structure for building a data visualization with external libraries in a plain HTML context.

GGiovanniD_
60% match
Loading thumbnail…

Polymaps / JSONP Queue

This example demonstrates Polymaps loading geographic data asynchronously through a JSONP queue. It shows how the library fetches map tiles from a remote server using a callback-based mechanism, enabling cross-domain requests without CORS. The code extends `po.queue` with a `jsonp` function that injects a script tag, substituting a generated callback ID via the `{C}` placeholder in the URL template. The `Url.js` patch adds support for this placeholder, allowing the queue to manage multiple simultaneous requests while tracking active loads and cleanup procedures.

Mmbostock
60% match
Loading thumbnail…

simple implementation of a google map using the react-google-map library

This example shows a simple interactive map centered on a fixed coordinate, with a marker placed at that location. It demonstrates the core usage of the react-google-maps library by rendering a `GoogleMap` component inside a `GoogleMapLoader`, which attaches the map to a full-size container div. The map’s zoom is set to 15, and the `options` prop disables the street view and map type controls. Markers are rendered from an array passed via `this.props.markers`, in addition to a hardcoded marker at the given latitude and longitude, illustrating how to compose map elements with React props.

CCKschneid
60% match
Loading thumbnail…

Let's Make a Map

This example demonstrates how to load and prepare geographic data for mapping. The page renders an empty SVG canvas and uses D3's `select` and `json` functions to request a world-atlas TopoJSON file from a remote URL. The code then applies the `topojson.feature` API to convert the raw TopoJSON geometry into GeoJSON feature objects for the world's countries. While the resulting shapes are not yet drawn, the visualization establishes the data pipeline for a future map projection and rendering step.

Nnikeshkv
60% match