Skip to main content
100%

Gist 4391555

✓ Published0🌍 Public
Aandrewxhill
Last edited Dec 27, 2012
Created on Dec 27, 2012

MECCartes is an interactive map of agricultural and hydrological data in Morocco, built with CartoDB and Leaflet. The interface uses a navigation bar and dropdown menus to filter map layers by crop type, irrigation, and other activities, with a legend and zoom controls. The map renders spatial data collected over nearly five years from a USAID project, displaying the mean values of various land-use categories across the region. The code relies on CartoDB's JavaScript API and Bootstrap for styling and interactivity.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill
67% match
Loading thumbnail…

Gist 4495761

This interactive map displays global cities, filtered by categories such as all locations, national capitals, and megacities. Users select a filter via buttons in the top-right menu, which dynamically updates the displayed points. The visualization uses the CartoDB library to create and manage layers over a Leaflet map, with a dark MapBox tile layer as the base. Point styling is defined through CartoDB’s tile style syntax, and SQL queries on the underlying dataset change the visible features per selection.

Aandrewxhill
66% match
Loading thumbnail…

morocco map

This choropleth map of Morocco displays its administrative regions, with hover effects that turn each region green. The visualization loads geographic data from a GeoJSON file containing regional boundaries and attributes. Using D3.js v5, the code applies a Mercator projection via `geoMercator` and draws the regions with `geoPath`. Region names are placed at each polygon's centroid. The map renders as SVG, with red fill colors for regions, black strokes, and interactive hover styling managed through CSS.

AAbdouEnsaj
65% match
Loading thumbnail…

Gist 4503902

This map shows global cities categorized by type, with buttons to filter between all populated places, national capitals, and megacities. It overlays a second data layer that can be toggled via the same menu, though the code only reveals it on button click without a corresponding hide action. The visualization uses the CartoDB.js library to load tile layers and vector data from CartoDB’s viz.json API, with Leaflet handling the map interaction and tile display. Styling applies custom marker properties for red fill, white outlines, and overlap allowance, while CSS fades are disabled for smoother layer transitions.

Aandrewxhill
65% match
Loading thumbnail…

Gist 11071111

This visualization maps global earthquake intensity using CartoDB’s CartoCSS styling. It shows point markers scaled by the `mmio` attribute (Modified Mercalli Intensity), with larger circles for stronger quakes and zoom-dependent width increases. The code applies marker properties like `marker-type: ellipse`, `marker-fill`, and `marker-comp-op: multiply` to blend overlapping points, while labels display intensity values at higher zoom levels via `text-name`. The example uses CartoDB’s tile rendering and CSS-like rules to style geographic data without JavaScript libraries.

Aandrewxhill
64% match
Loading thumbnail…

Gist a61b3f54da810f6e9490

This example demonstrates how to map and animate earthquake data from the USGS CSV feed using CartoDB’s mapping tools. It shows temporal earthquake occurrences through an interactive map, with points updating over time. The code relies on CartoDB’s SQL API and JavaScript library for layer management, alongside D3.js for data-driven visualizations. It also integrates Chart.js for supplementary graphs and uses dynamic styling via CartoDB’s tile rendering. The visualization highlights both spatial distribution and time-based animation of seismic events.

Aandrewxhill
64% match
Loading thumbnail…

Gist 5830532

This example displays a map with a set of geographic features loaded from a CartoDB SQL query, which returns data in GeoJSON format. The visualization uses the Leaflet mapping library to render the map and a `L.geoJson` layer to draw the features. Each feature is processed with an `onEachFeature` callback that assigns a `cartodb_id` property to the corresponding Leaflet layer and adds it to a `drawnItems` layer group, which is then added to the map. The data source is the `leaflet_data` table from the osm2 CartoDB account.

Aandrewxhill
63% match
Loading thumbnail…

Gist 2869abf438288423d49f56f8047b3ca9

This example builds a custom interactive map by layering a scanned historical campus map from MapWarper between two CARTO Voyager basemap tilesets: one without labels and one with labels only. The code constructs a JSON mapconfig specifying three HTTP tile layers and uses the requests library to post it to Carto’s map API. The result visually sandwiches the old map beneath modern road and label layers, preserving geographic context while overlaying contemporary annotations.

Aandrewbt
63% match