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 popups
these generally go in L.GeoJson's onEachFeature
styling popups: use devtools to find CSS classes, override in your CSS
dynamic popups
you'll need a click handler instead
create the HTML, bind the popup, and open it
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);
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
looping over the features in a GeoJSON layer
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
why do people make open source projects?
- community
- recognition
- it's educational
- community
- recognition
- it's educational
- it's fun
- community
- recognition
- it's educational
- it's fun
- programmers are lazy
- community
- recognition
- it's educational
- it's fun
- programmers are lazy (in a good way)
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)
or use something like rawgit
rawgit
2. use the plugin in your code