Welcome to Advanced Interactive Web Mapping, Programming, and Design, Class 6

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced Interactive Web Mapping, Programming, and Design

Class 6

leaflet styles

styling GeoJSON layers

Leaflet geojson
L.GeoJson options
Leaflet pointToLayer
L.Path

in-class exercise, part 1

leaflet popups

bindPopup()

these generally go in L.GeoJson's onEachFeature

jsbin

styling popups: use devtools to find CSS classes, override in your CSS

jsbin

dynamic popups

you'll need a click handler instead

create the HTML, bind the popup, and open it

jsbin

in-class exercise, part 2

GeoJSON layers

L.GeoJSON

L.geoJson() creates new GeoJSON layers

L.GeoJSON
var myLayer = L.geoJson(data);
myLayer.addTo(map);
var myLayer = L.geoJson(data);
myLayer.addTo(map);

OR

var myLayer = L.geoJson(data);
map.addLayer(myLayer);

removing a GeoJSON layer from your map

map.removeLayer(myLayer);

removing data from your GeoJSON layer

myLayer.clearLayers();

why can use this function on a GeoJSON layer?

hierarchy

hierarchy

L.GeoJson is an L.FeatureGroup is an L.LayerGroup

anything you can do to an L.FeatureGroup you can do to an L.GeoJson

controls

for example

Leaflet docs
Leaflet docs

looping over the features in a GeoJSON layer

eachLayer

eachLayer()

eachLayer

eachlayer() is a function on L.LayerGroup

eachLayer

it expects a function that takes a layer

eachLayer

it expects a function that takes a layer

(like an event handler)

eachLayer

it expects a function that takes a layer

(like an event handler)

(or $.each)

eachLayer

the function you write gets called for every layer in the GeoJSON

eachLayer
jsbin
Leaflet.loading
pull request
contributors

why do people make open source projects?

Leaflet plugins

plugins

Leaflet plugins

they're like libraries but much smaller

but you use them like larger libraries:

1. load JavaScript and (sometimes) CSS

(unlike larger libraries you will likely have to download these)

rawgit

or use something like rawgit

rawgit

2. use the plugin in your code

leaflet-control-geocoder
leaflet-control-geocoder
Leaflet.MiniMap
Leaflet.MiniMap
leaflet-markercluster
leaflet-markercluster
leaflet-realtime
leaflet-realtime
Leaflet.draw
Leaflet.draw
Leaflet.MapPaint
Leaflet.MapPaint

in-class exercise, part 3