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 &copy; <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 &copy; <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:



@@ //THIS IS LOADING geoJSON into a Javascript Variable "X"
{{ var X = {"type": "FeatureCollection",

"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }},
"features": [{ "type": "Feature",
"properties": { "osm_id": 23512678.0,
"name": "Alderwood Hall \/ Julia Morgan School for Girls",
"type": "school" },
"geometry": { "type": "Polygon",
"coordinates": [ [ [ -122.1872513, 37.7834917 ],
[ -122.1872599, 37.7833967 ],
// more vertices
[ -122.1872513, 37.7834917 ]
] ]
}
},
// more feature objects
]// end of features array
};

@@ //This is creating
{{ var marker = L.geoJson(X, {

}).addTo(ourmap);//

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?



//THIS IS LOADING geoJSON into a Javascript Variable "geoJsonFeature" that is referenced below
<script type="text/javascript" src="http://djjr-courses.wikidot.com/local--files/soc128:sandbox-djr/buildings-geojson.js"></script>

@@ //This is creating
{{ var marker = L.geoJson(X, {

}).addTo(ourmap);//

In the next tutorial we will learn how to add other vector layers to our map.

Design Ideas

  1. create a transparent polygon layer (say for buildings) to which actions could be attached for mouse-in, click, etc.g
  2. can we get terrain tiles from somewhere?
  3. Is "mouse-in" or "hover" an event in leaflet?
  4. 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.
  5. To do more involved thematic mapping, perhaps use the Leaflet DVF package? Related info at Axis Maps