Web Mapping

Basic elements & API

  • Haitao Wang
  • CS 5774 User Interface Software
  • Nov 29, 2016

What's web mapping

...the process of designing, implementing, generating and delivering maps on the World Wide Web.

Basics Elements

  • Base Layer

    • Tile
    • Zoom Level
  • Feature Layer

  • Projection

Base Layer

  • Aka: base map
  • Provides geographic context for the web map
  • Collection of raster tiles
  • Map tiles URL format:
  • Zoom Level: Starts from 0, one tile represents whole world

Feature Layer

  • Aka: thematic layer / data layer / content layer...
  • Placed on top of base layer
  • Is the main interest of people
  • Source:
    • Web Service: Web feature service, Web map service, etc.
    • File: Shapefiles, KML, GeoJSON, TopoJSON, etc.


The de facto standard:

  • WGS 84 Web Mercator projection
  • Identifier: EPSG:3857

Map projections:

Web Mapping API

What does it do?

1. Grabs base layer tiles; 2. Adds feature layer; 3. Handles user interaction

Commonly-used APIs

Open Source Proprietary
- OpenLayers
- Leaflet
- Modest Maps
- Polymaps
- Google Maps API
- Bing Maps API
- Nokia HERE Maps API


  • "Light-weight open-source JS library for mobile-friendly interactive maps"
  • simplicity, performance and usability

Let's make a web map!

Initialize a leaflet map

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script >

More tiled base layer provider: https://leaflet-extras.github.io/leaflet-providers/preview/

Add a marker

   // add a marker
   var marker = L.marker([37.2291, -80.42673]); //New Classroom Building
   // add a popup to marker
   marker.bindPopup('<h3>New Classroom Building</h3>');

Add a feature layer

	// load a feature layer from a GeoJSON file
  	$.getJSON('data/apt.geojson', function(data){
  		//parse GeoJSON data and display it on the map

Add a geolocate control ()
use Leaflet.Locate plugin: a leaflet control to geolocate the user

	<script src="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.js"></script >
  // create control and add to map
  var locate = L.control.locate().addTo(map);


  • Is a web mapping component helpful to your project?
  • How did you / would you use web map to enhance your project?