Introduction to Web Mapping Technologies

By

Ahmad Aburizaiza Data Services Lab - GMU

Content What is GIS?

What is Web Mapping?

Web Map Components

Proprietary Vs. Open Source

Data Formats

Mapbox

CartoDB

Conclusion

2

What is GIS?

Store data

geospatially Query/analyze data

Visualize data

to see the unseen

GIS definition

GIS main usage

Navigation

Finding best location Explaining data trend

3

What is GIS? GIS data models

Data model name Vector Raster

Definition Discrete objects with discrete boundaries and

shapes → points, lines, or polygons

Continuous data → values in pixels

Examples

Restaurants → points

Streets → lines

Buildings → polygons

Temperature, and vegetation

0 0 0 0 5

0 0 0 0 5

0 0 5 5 5

0 0 0 0 0

7 0 0 0 0

2

0

0

7

0

7 0 0 0 2 7

4

What is GIS? Layering → separating homogeneous objects into layers

● A layer is basically a table of attributes and each row is attached to a location explained in a separate column

● Each layer can be either points, lines, or polygons

● Layering is used mainly for analysis, and it is also used for better data management and organization

● All layers in one map should have the same coordinate system, explained on next slide

● The bottom layer is referred to as the basemap

5

What is GIS? Coordinate system → a reference to locations of objects on the map

● Coordinate systems are created through map projection

● Location can be presented in latitude and longitude, metric, or feet based

● For web mapping, the Web Mercator coordinate system is the most common and it uses latitude and longitude

6

What is Web Mapping? It is simply using an interactive map in a website. The map can cover the whole HTML body or part of it.

It can be used only for visualization or for visualization and geospatial analysis.

Most web maps requires programming skills but some offer specific tools for non-programmers to build web maps.

7

Web Map Components

JavaScript’s

Map Object

Basemap

Thematic Layers

Interactive Objects

8

Proprietary Vs. Open Source

9

Data Formats

Geospatial Web services

1. WMS

2. WFS

3. WPS

4. WCS

File based

1. KML

2. GML

3. GeoJSON/TopoJSON

4. OSM

5. WKT

6. shapefiles

Database tables

1. PostGIS/PostgreSQL

2. MongoDB geospatial collection

3. MySQL Spatial

4. SpatiaLite

5. Oracle Spatial

6. ArcGIS GeoDB

Programmable objects

1. GeoJSON

2. marker

3. polyline

4. polygon

10

Mapbox MapBox is a mapping platform.

They are very famous of their beautiful map tiles.

You can build web maps using MapBox either with programming or no-programming.

Exercise 1:

1. Go to MapBox and create your own account by clicking “Sign Up”

2. Navigate the website by following the instructor

3. Go to geojson.io to create sample geojson data and download it to desktop, also download kml

4. Create a new project in MapBox and select a basemap

5. Drag the downloaded geojson file to the browser

6. Select “Data” tab and add more data

7. Save your work and then click the “Project” tab

8. You can share the map link or embed it in a website

11

CartoDB CartoDB is another mapping platform.

They have both map and data views.

You can also build web maps either with programming or no-programming.

Exercise 1:

1. Go to CartoDB and create your own account by clicking “Sign Up”

2. Navigate the website by following the instructor

3. Drag the downloaded data from geojson.io to your browser

4. Follow with the instructor on how to visualize and manipulate the data

5. Create a new map and then click “Export Image”

6. After that, click on “publish” to share a link similarly to MapBox either full map or embedded

7. Experiment with the other options such as “Change basemap” and “Options”

12

Conclusion There are more web mapping technologies and packages out there.

Choosing one depends on the user’s needs and skills.

It is possible to mash up two or more technologies together.

Programming gives you the ability for further customization of a web map

and its components.

Thank you for listening 13