Apr 14
Jim says
I think I understand the zoom stuff a bit better.
I put this code into your current version of the javascript,
draw_MarlboroMap3.js , which triggers an alert whenever
the map is zoomed.
You had mapZoom and mapzoom , not mapZoom() to fetch the zoom level.
To actually do something more interesting, you'll need to have
a way to loop through the objects and modify styles or opacities.
The code currently creates them and assigns properties and styles,
but doesn't remember them in a list or dictionary. Remember that
the .on('zoomend' ...) function runs later, and may run several
times.
We can discuss this during your tutorial on the 16th.
/* Jim testing */
map.on('zoomend', function(e){ /* This works. Note getZoom() , not getzoom or getZoom */
var zoom = map.getZoom();
alert('zoom is' + zoom);
/* Now can test zoom level using <, >, etc.
But to change something, you need to do it here -
you can't just change a variable like line_format.
You must also use that format to modify a polyline (or whatever).
So the questions are :
* We need a way to store the polylines & building labels so they can be modified.
(i.e. in an array or dictionary or something)
They will need to be scope for the function, so either
a global, or above the code where the function is defined,
or passed to the function.
* What are the Leaflet methods to modify an existing polyline or building?
I think .setStyle(...) would work. Might also need .redraw()
* Perhaps there should be another "refresh" function
that would loop through the trails & buildings to update 'em
for a given zoom level.
*/
});
In my office I gave this quasi-code
example of what you'd need to to do
to save the polylines so that they
could be changed later when the zoom happens.
/* outside loop that creates trails */
var polyline_trails = {};
for (var name in trails){
var polyline = .....;
polyline_trails[name] = polyline;
}
map.on('zoomend', function(e){
var zoom = map.getZoom();
for (var name in polyline_trails){
var pl = polyline_trails[name];
pl.setStyle(...)
}
});
