{"id":1057,"date":"2011-08-07T21:13:17","date_gmt":"2011-08-07T21:13:17","guid":{"rendered":"http:\/\/crowle.org\/?page_id=1057"},"modified":"2011-08-07T21:13:17","modified_gmt":"2011-08-07T21:13:17","slug":"crowle-map","status":"publish","type":"page","link":"https:\/\/crowle.org\/?page_id=1057","title":{"rendered":"Crowle Map"},"content":{"rendered":"

Test Map
\n<\/p>\n

\n\n\n\n
\n
<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

\/\/<![CDATA[
\nvar cm_map;
\nvar cm_mapMarkers = [];
\nvar cm_mapHTMLS = [];<\/p>\n

\/\/ Create a base icon for all of our markers that specifies the
\n\/\/ shadow, icon dimensions, etc.
\nvar cm_baseIcon = new GIcon();
\ncm_baseIcon.shadow = "http:\/\/www.google.com\/mapfiles\/shadow50.png";
\ncm_baseIcon.iconSize = new GSize(20, 34);
\ncm_baseIcon.shadowSize = new GSize(37, 34);
\ncm_baseIcon.iconAnchor = new GPoint(9, 34);
\ncm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
\ncm_baseIcon.infoShadowAnchor = new GPoint(18, 25);<\/p>\n

\/\/ Change these parameters to customize map
\nvar param_wsId = "od6";
\nvar param_ssKey = "0Anfo9NGnY6hAdFVURGlEaktsd21LYkFneGhPcHcwREE";
\nvar param_useSidebar = true;
\nvar param_titleColumn = "title";
\nvar param_descriptionColumn = "description";
\nvar param_latColumn = "latitude";
\nvar param_lngColumn = "longitude";
\nvar param_rankColumn = "rank";
\nvar param_iconType = "green";
\nvar param_iconOverType = "orange";<\/p>\n

\/**
\n * Loads map and calls function to load in worksheet data.
\n *\/
\nfunction cm_load() {
\n if (GBrowserIsCompatible()) {
\n \/\/ create the map
\n cm_map = new GMap2(document.getElementById("cm_map"));
\n cm_map.addControl(new GLargeMapControl());
\n cm_map.addControl(new GMapTypeControl());
\n cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
\n cm_getJSON();
\n } else {
\n alert("Sorry, the Google Maps API is not compatible with this browser");
\n }
\n}<\/p>\n

\/**
\n * Function called when marker on the map is clicked.
\n * Opens an info window (bubble) above the marker.
\n * @param {Number} markerNum Number of marker in global array
\n *\/
\nfunction cm_markerClicked(markerNum) {
\n cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
\n}<\/p>\n

\/**
\n * Function that sorts 2 worksheet rows from JSON feed
\n * based on their rank column. Only called if column is defined.
\n * @param {rowA} Object Represents row in JSON feed
\n * @param {rowB} Object Represents row in JSON feed
\n * @return {Number} Difference between row values
\n *\/
\nfunction cm_sortRows(rowA, rowB) {
\n var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
\n var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);<\/p>\n

return rowAValue – rowBValue;
\n}<\/p>\n

\/**
\n * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
\n * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows,
\n * creating marker and sidebar entries for each row.
\n * @param {JSON} json Worksheet feed
\n *\/
\nfunction cm_loadMapJSON(json) {
\n var usingRank = false;<\/p>\n

if(param_useSidebar == true) {
\n var sidebarTD = document.createElement("td");
\n sidebarTD.setAttribute("width","150");
\n sidebarTD.setAttribute("valign","top");
\n var sidebarDIV = document.createElement("div");
\n sidebarDIV.id = "cm_sidebarDIV";
\n sidebarDIV.style.overflow = "auto";
\n sidebarDIV.style.height = "900px";
\n sidebarDIV.style.fontSize = "11px";
\n sidebarDIV.style.color = "#000000";
\n sidebarTD.appendChild(sidebarDIV);
\n document.getElementById("cm_mapTR").appendChild(sidebarTD);
\n }<\/p>\n

var bounds = new GLatLngBounds();\t <\/p>\n

if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
\n usingRank = true;
\n json.feed.entry.sort(cm_sortRows);
\n }<\/p>\n

for (var i = 0; i < json.feed.entry.length; i++) {
\n var entry = json.feed.entry[i];
\n if(entry["gsx$" + param_latColumn]) {
\n var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
\n var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
\n var point = new GLatLng(lat,lng);
\n var html = "<\/p>\n

“;
\n html += “” + entry[“gsx$”+param_titleColumn].$t
\n + “<\/strong>“;
\n var label = entry[“gsx$”+param_titleColumn].$t;
\n var rank = 0;
\n if(usingRank && entry[“gsx$” + param_rankColumn]) {
\n rank = parseInt(entry[“gsx$”+param_rankColumn].$t);
\n }
\n if(entry[“gsx$” + param_descriptionColumn]) {
\n html += “
” + entry[“gsx$”+param_descriptionColumn].$t;
\n }
\n html += “<\/div>\n

“;<\/p>\n

\/\/ create the marker
\n var marker = cm_createMarker(point,label,html,rank);
\n cm_map.addOverlay(marker);
\n cm_mapMarkers.push(marker);
\n cm_mapHTMLS.push(html);
\n bounds.extend(point);<\/p>\n

if(param_useSidebar == true) {
\n var markerA = document.createElement(“a”);
\n markerA.setAttribute(“href”,”javascript:cm_markerClicked(‘” + i +”‘)”);
\n markerA.style.color = “#000000”;
\n var sidebarText= “”;
\n if(usingRank) {
\n sidebarText += rank + “) “;
\n }
\n sidebarText += label;
\n markerA.appendChild(document.createTextNode(sidebarText));
\n sidebarDIV.appendChild(markerA);
\n sidebarDIV.appendChild(document.createElement(“br”));
\n sidebarDIV.appendChild(document.createElement(“br”));
\n }
\n }
\n }<\/p>\n

cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
\n cm_map.setCenter(bounds.getCenter());
\n}<\/p>\n

\/**
\n * Creates marker with ranked Icon or blank icon,
\n * depending if rank is defined. Assigns onclick function.
\n * @param {GLatLng} point Point to create marker at
\n * @param {String} title Tooltip title to display for marker
\n * @param {String} html HTML to display in InfoWindow
\n * @param {Number} rank Number rank of marker, used in creating icon
\n * @return {GMarker} Marker created
\n *\/
\nfunction cm_createMarker(point, title, html, rank) {
\n var markerOpts = {};
\n var nIcon = new GIcon(cm_baseIcon);<\/p>\n

if(rank > 0 && rank <\/p>\n","protected":false},"excerpt":{"rendered":"

Test Map \/\/<![CDATA[ var cm_map; var cm_mapMarkers = []; var cm_mapHTMLS = []; \/\/ Create a base icon for all of our markers that specifies the \/\/ shadow, icon dimensions, etc. var cm_baseIcon = new GIcon(); cm_baseIcon.shadow = "http:\/\/www.google.com\/mapfiles\/shadow50.png"; cm_baseIcon.iconSize = new GSize(20, 34); cm_baseIcon.shadowSize = new GSize(37, 34); cm_baseIcon.iconAnchor = new GPoint(9, 34); cm_baseIcon.infoWindowAnchor […]<\/p>\n","protected":false},"author":159,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1057","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/crowle.org\/index.php?rest_route=\/wp\/v2\/pages\/1057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crowle.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crowle.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crowle.org\/index.php?rest_route=\/wp\/v2\/users\/159"}],"replies":[{"embeddable":true,"href":"https:\/\/crowle.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1057"}],"version-history":[{"count":0,"href":"https:\/\/crowle.org\/index.php?rest_route=\/wp\/v2\/pages\/1057\/revisions"}],"wp:attachment":[{"href":"https:\/\/crowle.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}