See also
My Mills Web App
My first try is a dead-simple map of the Mills campus based on the Getting Started tutorial.
I've made one enhancement: addition of a bit of CSS to the description of the <DIV> to center my map on the page:
margin-left:auto;
margin-right:auto;
<head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> <style type="text/css"> #mapdiv { height: 400px; width: 400px; margin-left:auto; margin-right:auto;} </style> </head> <body> <div id="mapdiv"></div> <script type="text/javascript"> var ourmap = L.map('mapdiv').setView([37.781, -122.182], 16); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors', maxZoom: 18 }).addTo(ourmap); </script> </body> }} |
Next, we'll add the markers, popups, and click to show locations function described in the tutorial.
<head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> <style type="text/css"> #mapdiv { height: 400px; width: 400px; margin-left:auto; margin-right:auto;} </style> </head> <body> <div id="mapdiv"></div> <script type="text/javascript"> var ourmap = L.map('mapdiv').setView([37.781, -122.182], 16); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors', maxZoom: 18 }).addTo(ourmap); var marker1 = L.marker([37.781, -122.182]).addTo(ourmap); marker1.bindPopup("<b>Hello world!</b><br>I am the center of Mills.").openPopup(); var marker2 = L.marker([37.781, -122.180]).addTo(ourmap); marker2.bindPopup("<b>I am a pop that waits to be clicked</b>"); var locationpopup = L.popup(); //Explanation: map click event has an object (e) has latlng //property which is a location at which the click occurred. function onMapClick(e) { locationpopup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(ourmap); } ourmap.on('click', onMapClick); </script> </body> }} |
Next, let's create a layer of points from inside Leaflet. We'll make several markers for locations of bike racks on campus and then we'll make a set for wheelchair ramps. The tutorial Layer Groups and Layer Controls will tell us all we need.
First, we will just create two new layers (we get the long/lat by clicking on our previous map).
//Layer Groups
var teashopbikerack = L.marker([37.78074, -122.18144], {icon: myIcon}).bindPopup('TEASHOP'),
veralongbikerack = L.marker([37.78137, -122.18064], {icon: myIcon}).bindPopup('VERALONG'),
poolbikerack = L.marker([37.78303, -122.18497], {icon: myIcon}).bindPopup('POOL');
var bikeracks = L.layerGroup([teashopbikerack, veralongbikerack, poolbikerack]);
bikeracks.addTo(ourmap);
But I also don't like these blue markers and I can't tell one from the other so I'd like to create some new ones. See this reference for how this works. Basically, I've created a tiny green dot graphic and attached it to my wiki page. An attached file has a URL that I can get by right clicking on the name of the file in the wiki page file list. I use this in the code.
var GreenIcon = L.Icon.Default.extend({
options: {
iconUrl: 'http://djjr-courses.wikidot.com/local--files/soc128:sandbox-djr/greendot.png',
iconSize: [25, 25],
}
});
var myIcon = new GreenIcon();
//Layer Groups var GreenIcon = L.Icon.Default.extend({ options: { iconUrl: 'http://djjr-courses.wikidot.com/local--files/soc128:sandbox-djr/greendot.png', iconSize: [25, 25], } }); var myIcon = new GreenIcon(); var teashopbikerack = L.marker([37.78074, -122.18144], {icon: myIcon}).bindPopup('TEASHOP'), veralongbikerack = L.marker([37.78137, -122.18064], {icon: myIcon}).bindPopup('VERALONG'), poolbikerack = L.marker([37.78303, -122.18497], {icon: myIcon}).bindPopup('POOL'); var bikeracks = L.layerGroup([teashopbikerack, veralongbikerack, poolbikerack]); bikeracks.addTo(ourmap); var graves = L.marker([37.77648, -122.18557]).bindPopup('Cemetery'), fireplace = L.marker([37.78126, -122.17626]).bindPopup('Fireplace'), greek = L.marker([37.78131, -122.18482]).bindPopup('Greek Theater'); var curiosities = L.layerGroup([graves, fireplace, greek]); curiosities.addTo(ourmap); </script> </body> }} |
Now I would like to CONTROL whether or not these new layers are displayed on my map. Again, refer to the tutorial onLayer Groups and Layer Controls.
//LayerControl var baseMaps = null; var overlayMaps = { "Bike Racks": bikeracks, "Curious Things": curiosities }; L.control.layers(baseMaps, overlayMaps).addTo(ourmap); </script> </body> }} |
And now let's add a vector layer…. Buildings from OSM downloaded from geofabrik.de as shapefiles converted to geoJSON with QGIS and added to leaflet code:
|
But can we just attach the geoJSON file to this wiki page and load it in as JS?
Phuong: What is the difference between loading geoJSON into a Javascript Variable "X" and loading it as JS? What is JS? It's basically the same thing but just specifying variable "X" as JS, right?
|
In the next tutorial we will learn how to add other vector layers to our map.
Design Ideas
- create a transparent polygon layer (say for buildings) to which actions could be attached for mouse-in, click, etc.g
- can we get terrain tiles from somewhere?
- Is "mouse-in" or "hover" an event in leaflet?
- Can we use the code in the choropleth example to have building footprints lightup and then open up a legend that tells about the building? Here's first attempt to port that code to Wikidot page.
- To do more involved thematic mapping, perhaps use the Leaflet DVF package? Related info at Axis Maps