Untitled

100%

✓ Published0🌍 Public

Last edited Apr 1, 2021

Created on Mar 28, 2021

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive map displays a collection of settlements across Europe and the Middle East, distinguishing between modern settlements and older ones. Users toggle between viewing all locations, only modern settlements, or only traditional settlements using three buttons. The map uses Leaflet with CartoDB tiles and Leaflet.awesome-markers to render red iconic markers for settlement features, while modern settlements use default markers. The geographic data is loaded from a local GeoJSON file ("settlements.json"), and hover interactions display the feature type via popups.

Kklcheung99

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

77% match

Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Ccharliemok

73% match

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

72% match

Loading thumbnail…

Untitled

This interactive world map displays country landmasses in black with white boundaries, rendered in the Mercator projection. Users can pan and zoom the map by dragging and scrolling, with the view constrained to prevent excessive movement. The visualization is built with D3 version 3.5, using its geo and behavior modules alongside the topojson library. Geographic data comes from a 50-meter world dataset loaded as JSON, and the SVG rendering updates dynamically during navigation.

YYujunliu95

71% match

Loading thumbnail…

Untitled

This interactive map displays three local businesses in Ithaca, New York, with custom icons and popups that appear on hover. Users can filter the displayed points by category—All, Cafes, or Others—using Bootstrap-styled buttons. The visualization is built with Leaflet for map rendering and GeoJSON data from `businesses.json`, with Font Awesome icons via Leaflet.awesome-markers to distinguish cafes from other business types.

Ccharliemok

71% match

Loading thumbnail…

Untitled

A map of Italy displays city markers colored by population, with a green-to-blue scale. The visualization uses the Google Charts GeoChart API with markers mode, mapping population and area data for eleven Italian cities including Rome, Milan, and Naples. The chart renders within an HTML div, loaded via Google's loader script with a maps API key for geocoding marker positions.

Llumosduy

71% match

Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu

71% match