htdocs: Editorials

htdocs/mapscript.js

@@ -13,13 +13,14 @@ var streetLabelsRenderer = new L.StreetLabels({
 	collisionFlg: true,
 	propertyName: 'name',
 	showLabelIf: function (layer) {
-		switch (layer.geometry.type) {
+		switch (layer.feature.geometry.type) {
 		case "LineString":
 			if (mymap.getZoom() <= polyconf_show_street_names)
 				return false;
 			break;
 		case "Polygon":
-			if (mymap.getZoom() > polyconf_show_street_names)
+			if ((mymap.getZoom() > polyconf_show_street_names) &&
+				(layer.myName != "Oceans"))
 				return false;
 			break;
 		default:
@@ -34,7 +35,7 @@ var streetLabelsRenderer = new L.StreetLabels({
 		fontSizeUnit: "px",
 		lineWidth: 3.0,
 		fillStyle: "black",
-		strokeStyle: "white",
+		strokeStyle: "white"
 	},
 });
 
@@ -48,38 +49,44 @@ streetLabelsRenderer._getCollisionFlag = function (layer) {
 streetLabelsRenderer._getDynamicFontSize = function (layer) {
 	zoom = mymap.getZoom();
 
-	switch (layer.geometry.type) {
-	case "LineString":
-		if (zoom <= 8)
-			return 11;
-		else
-			return 2**(zoom - 9) * 11;
+	switch (layer.myName) {
+	case "Oceans":
+		return size *= 2.0/3;;
 		break;
-	case "Polygon":
-		var size;
-		if (zoom >= 4)
-			size = 30;
-		else
-			size = 20;
-		switch (layer.properties.type) {
-		case "city":
-			break;
-		case "town":
-			size *= 2.0/3.0;
-			break;
-		case "village":
-			size *= 1.5/3;
-			break;
-		case "district":
-			size *= 2.0/3;
+	default:
+		switch (layer.feature.geometry.type) {
+		case "LineString":
+			if (zoom <= 8)
+				return 11;
+			else
+				return 2**(zoom - 9) * 11;
 			break;
+		case "Polygon":
+			var size;
+			if (zoom >= 4)
+				size = 30;
+			else
+				size = 20;
+			switch (layer.feature.properties.type) {
+			case "city":
+				break;
+			case "town":
+				size *= 2.0/3.0;
+				break;
+			case "village":
+				size *= 1.5/3;
+				break;
+			case "district":
+				size *= 2.0/3;
+				break;
+			default:
+				size *= 0.5/3;
+				break;
+			}
+			return size;
 		default:
-			size *= 0.5/3;
 			break;
 		}
-		return size;
-	default:
-		break;
 	}
 	return 10;
 }
@@ -103,6 +110,10 @@ var style_tech = {
 		color: "red"
 	};
 
+var style_rivers = {
+		color: "blue"
+	};
+
 var style_route = {
 	radius: 8,
 	fillColor: "#00ff00",
@@ -184,7 +195,7 @@ function load_tiles(name, id) {
 	if (name != "") {
 		url = tiles_base + '{id}/{z}/{y}/{x}.png';
 	}
-	var satellite = L.tileLayer(url, {
+	var satellite = new L.TileLayer(url, {
 		maxZoom: 14 /*8*/,
 		maxNativeZoom: 6,
 		minNativeZoom: 0,
@@ -203,6 +214,7 @@ function load_tiles(name, id) {
 
 var current_location = "";
 var current_feature = null;
+var current_layer = null;
 function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 	var xhttp_ps = new XMLHttpRequest();
 	xhttp_ps.onreadystatechange = function() {
@@ -221,6 +233,7 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 						if (geotype == "train")
 							layer.no_search = true
 						layer.on("click", function (e) {
+							current_layer = layer;
 							current_feature = feature;
 						});
 					};
@@ -236,6 +249,7 @@ function load_geojson(name, url, geotype, iconcolor, active=1, style={}) {
 					break;
 				default: /* else it is a marker with the specified icon */
 					onEachFeature = function(feature, layer) {
+							layer.myName = name;
 							label = String(feature.properties.name)
 							layer.bindPopup('<h1><a target="_blank" href="' + wikiurl_base + feature.properties.name + '">' + feature.properties.name + '</a> (' + feature.geometry.coordinates + ')</h1>' + '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + '<p>' + feature.properties.description + '</p>');
 							layer.bindTooltip(label, {
@@ -348,6 +362,8 @@ load_geojson("Trainlines (beta)", "./geojson/trainlines.json", "train", "auto",
 load_geojson("TL Access (tech layer)", "./geojson/trainlines_access.json", "train", "auto", 0, style_tech);
 load_geojson("Railroad Tracks", "./geojson/trains.json", "train", "auto", 0, style_trains);
 load_geojson("Cities", "./geojson/city_outlines.json", "outline", "auto", 1, style_outlines);
+load_geojson("Rivers", "./geojson/rivers.json", "street", "auto", 1, style_rivers);
+load_geojson("Oceans", "./geojson/oceans.json", "outline", "auto", 1, style_rivers);
 
 function update_geojson() {
 	var xhttp_ps = new XMLHttpRequest();
@@ -670,19 +686,29 @@ var baseballIcon = L.AwesomeMarkers.icon({
 	markerColor: 'red'
 });
 
+function escapeHtml(text) {
+  return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+}
+
 function onMapClick(e) {
 	var addinfo = "";
 	pos = resolve_latlng(e.latlng);
 	route_links = '<br><a href="#" onclick="latLng2 = L.latLng(' + pos.lng + ',' + pos.lat + '); set_route_start(latLng2); return false;">[route from here]</a>';
 	route_links += ' <a href="#" onclick="latLng2 = L.latLng(' + pos.lng + ',' + pos.lat + '); set_route_destination(latLng2); return false;">[route to here]</a>';
 	if (current_location != "")
-		addinfo = " (part of <a target=\"_blank\" href='" + wikiurl_base + current_location + "'>" + current_location + "</a>)";
+		addinfo = " (part of <a target=\"_blank\" href=\"" + wikiurl_base + encodeURIComponent(current_location) + "\">" + escapeHtml(current_location) + "</a>)";
 	if (current_feature) {
-		popup.setLatLng(e.latlng).setContent("This is " + current_feature.properties.name + addinfo + route_links).openOn(mymap);
+		popup.setLatLng(e.latlng).setContent("This is <a target=\"_blank\" href=\"" + wikiurl_base + current_layer.myName + ":" + encodeURIComponent(current_feature.properties.name) + "\">" + escapeHtml(current_feature.properties.name) + "</a>" + addinfo + route_links).openOn(mymap);
 	} else {
 		popup.setLatLng(e.latlng).setContent("You clicked the map at " + pos.lng + "," + pos.lat + addinfo + route_links).openOn(mymap);
 	}
 	current_feature = null;
+	current_layer = null;
 	current_location = "";
 }