Untitled

100%

✓ Published0🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

This example displays an interactive map centered on Iran, using Leaflet to render tile layers and enable zooming and panning. It shows how to switch between three different OpenStreetMap base layer styles—standard, Hot, and OSM French—via a control menu. The map initializes at coordinates [33, 54] with a zoom level of 5, and each tile layer loads raster imagery from the respective OpenStreetMap tile servers. The code explicitly defines tile layer objects and adds them to a layer control, allowing users to toggle the visual style of the basemap.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays an interactive map of India centered at latitude 19 and longitude 77, using the Leaflet library to render OpenStreetMap tiles. The map initializes with a zoom level of 20 before immediately adjusting to zoom level 6 via the `setZoom` method, revealing a broad regional view. A tile layer from OpenStreetMap provides the geographic background, with attribution included. The visualization demonstrates basic map setup and dynamic zoom control within a minimal HTML page using CSS for layout and JavaScript for interactivity.

DDattatrayPatil73076

77% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

73% match

Loading thumbnail…

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP

70% match

Loading thumbnail…

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Dd3noob

70% match

Loading thumbnail…

Untitled

This interactive map displays a collection of settlement points across Europe and North Africa, rendered using Leaflet with tile layers from CartoDB. The visualization separates data into two categories: modern settlements and historical settlements, each represented by distinct markers using the Leaflet.AwesomeMarkers plugin with Font Awesome icons. Users can filter between categories using Bootstrap-styled buttons that toggle layer visibility through jQuery. The GeoJSON data is loaded via jQuery’s `$.getJSON` method, and the map automatically fits its bounds to all plotted locations.

Ccharliemok

69% match

Loading thumbnail…

Sample_Leaflet_starter

This example displays a map centered on a region in Syria, with an overlay of a list of three text items. It shows a map visualization using the Leaflet JavaScript library, with CartoDB’s Voyager tile layer providing the basemap. The page layout is constructed with HTML and CSS flexbox, placing the map and the list side by side. The code initializes the map with a specific latitude and longitude, sets the zoom level, and adds the tile layer. No interactive features are demonstrated beyond the static map display, and the list items are placeholders without associated map interactions.

FFrancesco Di Filippo

69% match

Loading thumbnail…

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

LLiddler

69% match

Loading thumbnail…

Untitled

This visualization presents a multi-panel interface for exploring geospatial and mapping data. A sidebar on the left lists map layers, while the central viewport is divided into sections for a large map display, a grid of detail panels, and a document viewer with form and template areas. The right sidebar shows variable controls. The layout is constructed entirely with HTML and CSS absolute positioning, using styled divs with color-coded backgrounds to structure the interface, but no interactive data is rendered.

LLCherryholmes

68% match