Skip to main content
100%

HelloMap

✓ Published0🌍 Public
Aalanponce
Last edited Oct 24, 2013
Created on Oct 24, 2013

This example embeds a Google Map iframe that displays a KML layer from the University of Southampton’s data viewer, showing geographic points at a specific latitude and longitude with zoom level 16. The HTML page contains a styled iframe with fixed dimensions and a border, alongside links to view the map larger or in full screen. The code relies on Google Maps’ query parameters and the external KML URL, with a fallback message for browsers lacking iframe support.

AI-generated description

Similar vizzes

Loading thumbnail…

embedded CARTO map

This example embeds an interactive CARTO map inside an HTML page using a full-width iframe. The map, hosted by Stamen and sourced from a public CARTO builder URL, displays geographic data through CARTO’s built-in rendering. The page uses D3.js v4 only to set up the document structure, while the map itself relies on CARTO’s embedding API. The iframe is configured to fill the viewport with a fixed height of 520 pixels and supports fullscreen interactions. The visualization demonstrates how to combine a minimal D3 setup with an external mapping service, with no custom geographic projections or data processing in the code.

AAlan McConchie
67% match
Loading thumbnail…

Display a map on a webpage

This example displays an empty map centered on Melbourne, Australia, at zoom level 15 using Mapbox GL JS v1.13.1. The map is rendered in a full-screen container with a minimal style object specifying version 8 and empty sources and layers. The code initializes a `mapboxgl.Map` instance, then calls `setCenter` and `setZoom` to position the view, and logs the current center and zoom to the console. No geographic data or additional layers are loaded, so the map shows only the default background tiles.

TThomasG77
66% 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
66% match
Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532
66% match
Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter
65% match
Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

GGordonSmith
65% match
Loading thumbnail…

Simple Map using native ECMAScript modules

This example displays an interactive world map centered on the prime meridian with a zoom level of two, using OpenStreetMap tiles as the base layer. It demonstrates how to load OpenLayers 5.0.0-beta.12 via native ECMAScript modules, importing the Map, View, TileLayer, and OSM source classes directly from a CDN. The map renders as a full-page element and relies on the browser’s native module support, with a polyfill fallback for older environments. The visualization shows a simple, functional map with pan and zoom capabilities, highlighting the modular import approach for modern web mapping.

TThomasG77
64% match
Loading thumbnail…

Full Screen Leaflet Map

This example displays an interactive map centered on Wellington, New Zealand, using Leaflet.js and OpenStreetMap tile layers. The map fills the entire browser viewport through CSS rules that set the html, body, and map container to 100% height and width. It initializes the map with a specific latitude, longitude, and zoom level, then attaches an OpenStreetMap tile layer with attribution and a maximum zoom of 18. The code relies on Leaflet’s `L.map`, `L.tileLayer`, and the `setView` method to render the full-screen interactive visualization.

Dd3noob
64% match