Display a map

100%

✓ Published0🌍 Public

Last edited Mar 22, 2024

Created on Sep 10, 2021

This example displays an interactive map of France using the Maplibre GL JS library. Two map styles are showcased: a standard topographic map from the IGN PLAN.IGN vector tiles, and an isohypse (contour line) style with an orange monochrome rendering, centered on the Alps. The code fetches style definitions as JSON and applies them to the map, adjusting the tile scheme for compatibility. Attribution is provided to the IGN data source.

AI-generated description

Similar vizzes

Loading thumbnail…

Display cadastre on Maplibre

This interactive map displays the French land registry, or cadastre, within the Maplibre GL rendering engine. It shows administrative boundaries—from regions down to individual communes—along with detailed cadastral sections, parcels, and buildings. Using the WebGL-driven Maplibre GL API, it loads vector tile sources from `openmaptiles.geo.data.gouv.fr`, with parcel lines appearing at zoom level 16 and property numbers labeled for identification. The styling, defined in a JSON style sheet, uses fill and line layers with conditional opacity to highlight parcels.

TThomasG77

76% match

Loading thumbnail…

Display a map

This example shows an interactive 3D map of a running track at the Red Bull Ring, with the route extruded vertically from the terrain to visualize elevation changes. Built with MapLibre GL and Turf.js, it renders OpenStreetMap raster tiles as the basemap and uses WebGL to display a semi-transparent red fill-extrusion layer whose height corresponds to the elevation values from the GeoJSON LineString coordinates.

TThomasG77

75% match

Loading thumbnail…

Leaflet map

This example shows a full-screen interactive map of France centered on Paris, using satellite imagery tiles from ArcGIS Online. It employs the Leaflet JavaScript library to create the map and set an initial view. The map is rendered via a tile layer that fetches World_Imagery tiles, allowing users to pan and zoom up to level 20. The page uses simple HTML and CSS for layout, with the map container taking up the entire viewport height.

Iismael-IT-dev

73% match

Loading thumbnail…

Tuiles vecteur OpenLayers

A web map displays IGN’s PLAN.IGN vector tiles using OpenLayers and the ol-mapbox-style library. The OpenLayers map starts at a zoom level of 5 over France, then fetches the plan’s JSON style from data.geopf.fr and applies it to a hybrid-rendered VectorTile layer. The layer loads Mapbox Vector Tiles from a URL in the style’s source, with attribution added. A brief loading animation occurs while the style is fetched and applied before the map renders.

TThomasG77

71% match

Loading thumbnail…

Untitled

This example displays a map of France, rendered in yellow on a pink background using a Mercator projection centered on the country. The visualization loads GeoJSON data from an external URL, filters the dataset to select only the feature named "France", and draws it as an SVG path using `d3.geoPath` with a `d3.geoMercator` projection. The code relies on D3 v4's `d3.json` method to fetch the geographic data and applies a custom scale and translation to position the map within the 540x400 pixel canvas.

SSNarasimhar

70% match

Loading thumbnail…

Add a WMS source untiled

This example shows a map centered on a region in France, displaying a WMS layer of urban areas from 1980 over a basemap. The map uses the maplibre-gl library to render the WebGL map. A raster data source is added via a proxied WMS URL, with the GetMap request specifying the layer, coordinate system, and bounding box. The WMS tiles are integrated using the `map.addSource` and `map.addLayer` APIs.

TThomasG77

70% match

Loading thumbnail…

Gist 1046e6003c6e5198ef4647da9b64c3b7

This example displays a static map of French regions, rendered using a conic conformal projection centered on France. The visualization uses D3 v4’s `d3.geoConicConformal`, `d3.geoPath`, and `d3.json` to load and draw geographic data from an external regions JSON file. The SVG canvas is 700 by 580 pixels, with all region boundaries shown as simple paths. No interactivity or additional styling is applied; the map is presented in its raw, unadorned form.

MMilowB

69% match

Loading thumbnail…

France Map

This example displays a choropleth map of French departments, using a Mercator projection to render each region as a colored SVG path with its name label positioned at the centroid. The visualization loads GeoJSON TopoJSON data from a remote URL, processing it with `feature` from topojson, and generates the paths and labels using `d3.geoPath` and `d3.geoMercator`. Fill colors come from `scaleOrdinal` with `schemeCategory10`, while the map’s layout is adjusted via projection translation and scale parameters in d3 v5 within a React framework.

Kkakumanusreya

69% match