Untitled

100%

✓ Published0🌍 Public

Last edited Apr 1, 2021

Created on Apr 1, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

69% match

Loading thumbnail…

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Hhlkyt

67% match

Loading thumbnail…

Untitled

This example presents a world map with red circles marking a curated list of cities, including Tokyo, London, and Easter Island. The map is built using D3.js version 3 with a Mercator projection and TopoJSON data for country boundaries. Users can pan and zoom the map via the d3.behavior.zoom API, while a tooltip-like styled div is defined but not activated. City coordinates are projected onto the SVG canvas using d3.geo.path.

NNaveed945

67% match

Loading thumbnail…

Untitled

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.

JJoker-tr

67% match

Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

JJumblii

67% match