Creating Custom Web Maps

Explore Leaflet, a fast, lightweight, open source web mapping library. Learn how its small footprint, cross-browser compatibility, mobile support, and plug-in rich ecosystem enable customizable, performant web maps.

Set up the map project by organizing Leaflet assets into a Leaflet folder with a lib subfolder, and create index.html for testing in Firefox, Safari, Chrome, and Internet Explorer.

Set up your first web map with Leaflet by creating a simple html template, including Leaflet.js and Leaflet.css, then initialize the map with setView and decimal degrees at zoom 13.

Add a tile layer as the map’s base with the Open Street Map basic tile service, including required attribution. Center the map and link HTML, CSS, and JavaScript files.

Learn to add markers to a leaflet map using latitude and longitude, starting with a single marker and extending to multiple markers with a nested array and a for loop.

Bind interactive popups to map markers in Leaflet, customize content with HTML and images, manage markers via an array, and prepare to replace default icons with a custom image.

Replace default map markers with custom icons, using the Open Source Macchi park icons in a Leaflet map, and fine-tune icon and popup anchors for precise placement.

Learn to create polyline, polygons, and circles on maps using latitudes and longitudes with Leaflet, and customize them with color, weight, and other path options.

Learn to draw polylines, create polygons that automatically close, and circles in Leaflet, customize fill color and opacity, set circle radii in meters, and control map layering.

Learn leaflet map events in javascript by binding marker actions such as click and hover, and update an info div with content triggered by those events.

Bind a click event to the first leaflet marker to update the DOM with the park name and coordinates, and center the map on the clicked location.

Explore base map tile services for Leaflet, from Open Street Map vector data to customizable raster tiles, with options from Mapquest, Stayman, Mapbox, or your own server.

Sign up for a Mapbox account, copy your public access token, and switch your map.js to use Mapbox base map tiles and styles.

Create custom base maps in Mapbox Studio by linking your account, using the CartoCSS-like syntax to customize styles, and adjusting colors, waterways, roads, and OpenStreetMap data.

Upload your Mapbox Studio custom map, name and describe it, upload the style, copy the map ID, and update map.js to load the new base map.

Open street map is a free, collaborative database of raw map data you can edit, reuse, and attribute, while base map tiles remain non-open and require your own hosting.

Learn how to create an OpenStreetMap account, edit features using satellite imagery, add buildings and roads with anchor points, save with notes, and publish live updates.

Learn to extract open street map data and create a vector layer for leaflet maps by downloading features with josm and saving osm files for use in web maps.

Explore open source QGIS across Windows, Mac, and Linux, load shapefile vector layers, save projects, and prepare GeoJSON for leaflet web maps.

Learn to filter and export selected features in QGIS as GeoJSON for Leaflet, set the correct WGS 84 CRS, and save with a full file path.

Explore GeoJSON, an open standard for storing vector features - points, lines, and polygons - in web maps. Learn how coordinates and properties organize data for Leaflet and OpenStreetMap workflows.

Learn to load a geojson file into a leaflet map using ajax, compare inline versus external data, and test locally with a web server for cross-origin considerations.

Import a geojson file into your leaflet map, bind popups to features using their properties, and switch styles by building type to color schools and offices.

Wrap up by initializing maps, adding custom markers, drawing polylines and polygons with Leaflet, enabling two-way event binding, and exploring Mapbox Studio and Open Street Map data.