# Most basic principles

of web mapping, with some history and gifs sprinkled in

# Disclaimer:

I do not know everything -- interrupt with questions/comments

# Digital:

Involves a computer- a web map is a kind of digital map

### Internet is key

Web maps are viewed in a browser

# MapQuest:

Earth-shattering, online directions engine

# boundaries

Tiles can be a road map,

satellite image,

or anything else

# XY pair

(Location of the tile on a global grid)

Number of tiles at zoom-level z:

2^z * 2^z = 4^z
2z2z=4z

# The math is (relatively) simple

x = λ
y = ln(tan φ + sec φ)
where λ is longitude, φ is latitude

# BUT

ln(tan 90° + sec 90°) = Infinity

WHOA

# Back to the anatomy...

<html>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style type="text/css">
#mapdiv { height: 100%; }
</style>
<body>
<div id="mapdiv"></div>

<script>
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "PARISOMA"
},
"geometry": {
"type": "Point",
"coordinates": [-122.41598, 37.77349]
}
};

var mapvar = L.map('mapdiv').setView([37.7706,-122.3782],12);

var tileLayer = L.tileLayer(
'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg',
{attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under CC BY 3.0. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under CC BY SA.'}
);

var geojsonLayer = L.geoJson(
geojsonFeature,
{
onEachFeature: function(feature, layer)
{ layer.bindPopup(feature.properties.name);}
}
);

</script>

</body>
</html>


# Style using CartoCSS

Full control over all map elements

Literally everything

### TileStream, mbtiles-server, mod_tile

More details here: Geo Platform tutorial

# Follow along the code here

the map div

mapping library

"make a map in the div called 'map' "

# DATA!

Style bathymetry geoJson

Restrict zoom levels

geoJson to map

Bind popup to each feature

Set marker icon

Add fishing areas geoJson to map

Style fishing areas transparent

When the mouse enters a fishing area, make it opaque

When the mouse leaves a fishing area, make it transparent again

Custom map tiles

Restrict map bounds (preserves map views)

# See you there!

By Chase Gruber

### maptime-cape-cod-webmaps

maptime cape cod, second meeting slides

• 1,395