Nix Pill 14: How to make callPackage overridable? - functional-programming

I am having trouble understanding Nix Pill 14. The author provides makeOverridable, and then challenges the user to integrate it with callPackage. makeOverridable and default.nix are provided, as follows, where makeOverridable is in the file lib.nix, and callPackage is in the file default.nix:
# file: lib.nix
rec {
makeOverridable = f: origArgs:
let
origRes = f origArgs;
in
origRes // { override = newArgs: makeOverridable f (origArgs // newArgs); };
}
# file: default.nix
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
callPackage = path: overrides:
let f = import path;
in f ((builtins.intersectAttrs (builtins.functionArgs f) allPkgs) // overrides);
pkgs = with nixpkgs; {
mkDerivation = import ./autotools.nix nixpkgs;
hello = callPackage ./hello.nix { };
graphviz = callPackage ./graphviz.nix { };
graphvizCore = callPackage ./graphviz.nix { gdSupport = false; };
};
in pkgs
This is what I have come up with:
# file: default.nix (my implementation)
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
callPackage = path: overrides:
let
f = import path;
origRes = f ((builtins.intersectAttrs (builtins.functionArgs f) allPkgs) // overrides);
in
origRes // { override = newArgs: callPackage f (overrides // newArgs); };
pkgs = with nixpkgs; {
mkDerivation = import ./autotools.nix nixpkgs;
hello = import ./hello.nix {};
graphviz = import ./graphviz.nix {};
graphvizCore = graphviz.override { gdSupport = false; };
};
in pkgs
I think I have a fundamental misunderstanding of what is going on here. Could you please provide the correct implementation and explain what I am doing wrong?
EDIT: I managed to get it to work, however, it is still not recursive.
# file: default.nix
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
callPackage = path: overrides:
let
f = import path;
origArgs = f ((builtins.intersectAttrs (builtins.functionArgs f) allPkgs) // overrides);
makeOverridable = { override = newArgs: (origArgs // newArgs); };
in
origArgs // makeOverridable;
pkgs = with nixpkgs; rec {
mkDerivation = import ./autotools.nix nixpkgs;
hello = callPackage ./hello.nix { };
graphviz = callPackage ./graphviz.nix { };
graphvizCore = graphviz.override { gdSupport = false; };
};
in pkgs
EDIT 2:
# file: default.nix
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
makeOverridable = f: origArgs:
let origRes = f origArgs;
in origRes // { override = newArgs: makeOverridable f (origArgs // newArgs); };
callPackage1 = path: overrides:
let f = import path;
in f ((builtins.intersectAttrs (builtins.functionArgs f) allPkgs) // overrides);
callPackage = makeOverridable callPackage1;
pkgs = with nixpkgs; {
mkDerivation = import ./autotools.nix nixpkgs;
hello = callPackage ./hello.nix { };
graphviz = callPackage ./graphviz.nix { };
graphvizCore = graphviz.override { gdSupport = false; };
};
in pkgs
SOLUTION:
# file: default.nix
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
makeOverridable = f: origArgs:
let origRes = f origArgs;
in origRes // { override = newArgs: makeOverridable f (origArgs // newArgs); };
callPackage1 = path: overrides:
let f = import path;
in f ((builtins.intersectAttrs (builtins.functionArgs f) allPkgs) // overrides);
callPackage = path: makeOverridable (callPackage1 path);
pkgs = with nixpkgs; rec {
mkDerivation = import ./autotools.nix nixpkgs;
hello = callPackage ./hello.nix { };
local_graphviz = callPackage ./graphviz.nix { };
graphvizCore = local_graphviz.override { gdSupport = false; };
graphvizCore2 = graphvizCore.override { gdSupport = false; };
};
in pkgs

If makeOverridable is defined properly using one of the definitions in Nix Pills, you can think of it as a higher-order function: it takes a normal function named f, and it changes it into a new function whose results can be overridden.
Assuming you already have a function named callPackage1, you can make an overridable version like this:
rec {
callPackage1 = ...;
callPackage = makeOverridable callPackage1;
}
EDIT 1:
Actually, callPackage1 needs a path in order to return the type of function that is expected by makeOverridable (a function that takes a set and returns an object to which we can add the override attribute). So let's try this definition of callPackage:
callPackage = path: makeOverridable (callPackage1 path);

I am working through the same Nix Pills and had trouble with the reader exercise in Pill 14. I found the answers here helpful.
In my solution the argument to makeOverridable is an unnamed function.
let
nixpkgs = import <nixpkgs> {};
allPkgs = nixpkgs // pkgs;
lib = import ./lib.nix;
# Function to find arguments of function defined in "path"
callPackage = path: lib.makeOverridable (overrides:
{ result =
let f = import path;
in f (
(builtins.intersectAttrs (builtins.functionArgs f) allPkgs)
// overrides
); }) {};
pkgs = with nixpkgs; rec {
mkDerivation = import ./autotools.nix nixpkgs;
hello = callPackage ./hello.nix;
graphviz = callPackage ./graphviz.nix;
graphvizCore = graphviz.override { gdSupport = false; };
};
in pkgs

Related

How to Autolink the url in Trix Editor

When we paste the content in trix-editor the href not getting paste as simple text. How can we make it as a link.
var TrixAutoLinker,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
addEventListener("trix-initialize", function(event) {
return new TrixAutoLinker(event.target);
});
TrixAutoLinker = (function() {
var INPUT, PATTERN, isValidURL;
function TrixAutoLinker(element) {
this.element = element;
this.autoLink = bind(this.autoLink, this);
this.editor = this.element.editor;
this.element.addEventListener("trix-render", this.autoLink);
this.autoLink();
}
TrixAutoLinker.prototype.autoLink = function() {
var currentRange, i, len, range, ref, ref1, results1, url;
ref = this.getURLsWithRanges();
results1 = [];
for (i = 0, len = ref.length; i < len; i++) {
ref1 = ref[i], url = ref1.url, range = ref1.range;
if (this.getHrefAtRange(range) !== url) {
currentRange = this.editor.getSelectedRange();
this.editor.setSelectedRange(range);
if (this.editor.canActivateAttribute("href")) {
this.editor.activateAttribute("href", url);
}
results1.push(this.editor.setSelectedRange(currentRange));
} else {
results1.push(void 0);
}
}
return results1;
};
TrixAutoLinker.prototype.getDocument = function() {
return this.editor.getDocument();
};
TrixAutoLinker.prototype.getDocumentString = function() {
return this.getDocument().toString();
};
TrixAutoLinker.prototype.getHrefAtRange = function(range) {
return this.getDocument().getCommonAttributesAtRange(range).href;
};
PATTERN = /(https?:\/\/\S+\.\S+)\s/ig;
TrixAutoLinker.prototype.getURLsWithRanges = function() {
var match, position, range, results, string, url;
results = [];
string = this.getDocumentString();
while (match = PATTERN.exec(string)) {
url = match[1];
if (isValidURL(url)) {
position = match.index;
range = [position, position + url.length];
results.push({
url: url,
range: range
});
}
}
return results;
};
INPUT = document.createElement("input");
INPUT.type = "url";
INPUT.required = true;
isValidURL = function(value) {
INPUT.value = value;
return INPUT.checkValidity();
};
return TrixAutoLinker;
})();
// ---
// generated by coffee-script 1.9.2

How to refer css class in a component.ts file

I am trying to create a neural net visualization using d3.js in Angular 7. I have successfully created the nodes but the links are not appearing. The code refers to a css class defined in the components css file. What am I doing wrong?
Shown below is the code responsible for link creation:
// draw links
var link:any = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) { return nodes[d.source].x; })
.attr("y1", function(d) { return nodes[d.source].y; })
.attr("x2", function(d) { return nodes[d.target].x; })
.attr("y2", function(d) { return nodes[d.target].y; })
.style("stroke-width", function(d) {return Math.sqrt(d.value); });
css :
.link {
stroke: #999;
stroke-opacity: .6;
}
shown below is the code of my complete neural.component.ts file (which contains the above typescript code).
import { Component, OnInit,Input } from '#angular/core';
import {select,schemeCategory10,scaleOrdinal} from 'd3';
import { angularMath } from 'angular-ts-math';
declare var $:any;
#Component({
selector: 'app-neuralcanvas',
templateUrl: './neuralcanvas.component.html',
styleUrls: ['./neuralcanvas.component.css']
})
export class NeuralcanvasComponent implements OnInit {
// color = scaleOrdinal().range(schemeCategory10)
inputLayerHeight = 4;
outputLayerHeight=5;
hiddenLayersDepths =[3,4];
hiddenLayersCount =2;
nodeSize = 17;
width :any = 500 ;
height = 400;
constructor() { }
ngOnInit() {
this.draw()
}
draw() {
console.log('in draw')
if (!select("svg")[0]) {
} else {
//clear d3
select('svg').remove();
}
var svg = select("#neuralNet").append("svg")
.attr("width", this.width)
.attr("height", this.height);
var networkGraph : any = this.buildNodeGraph();
//buildNodeGraph();
this.drawGraph(networkGraph, svg);
}
buildNodeGraph() {
var newGraph:any = {
"nodes": []
};
//construct input layer
var newFirstLayer: any = [];
for (var i = 0; i < this.inputLayerHeight; i++) {
var newTempLayer1 :any = {"label": "i"+i, "layer": 1};
newFirstLayer.push(newTempLayer1);
}
//construct hidden layers
var hiddenLayers:any = [];
for (var hiddenLayerLoop = 0; hiddenLayerLoop < this.hiddenLayersCount; hiddenLayerLoop++) {
var newHiddenLayer:any = [];
//for the height of this hidden layer
for (var i = 0; i < this.hiddenLayersDepths[hiddenLayerLoop]; i++) {
var newTempLayer2:any = {"label": "h"+ hiddenLayerLoop + i, "layer": (hiddenLayerLoop+2)};
newHiddenLayer.push(newTempLayer2);
}
hiddenLayers.push(newHiddenLayer);
}
//construct output layer
var newOutputLayer:any = [];
for (var i = 0; i < this.outputLayerHeight; i++) {
var newTempLayer3 = {"label": "o"+i, "layer": this.hiddenLayersCount + 2};
newOutputLayer.push(newTempLayer3);
}
//add to newGraph
var allMiddle:any = newGraph.nodes.concat.apply([], hiddenLayers);
newGraph.nodes = newGraph.nodes.concat(newFirstLayer, allMiddle, newOutputLayer );
return newGraph;
}
drawGraph(networkGraph, svg) {
var color = scaleOrdinal(schemeCategory10);
var graph = networkGraph;
var nodes = graph.nodes;
// get network size
var netsize = {};
nodes.forEach(function (d) {
if(d.layer in netsize) {
netsize[d.layer] += 1;
} else {
netsize[d.layer] = 1;
}
d["lidx"] = netsize[d.layer];
});
// calc distances between nodes
var largestLayerSize = Math.max.apply(
null, Object.keys(netsize).map(function (i) { return netsize[i]; }));
var xdist = this.width / Object.keys(netsize).length,
ydist = (this.height-15) / largestLayerSize;
// create node locations
nodes.map(function(d) {
d["x"] = (d.layer - 0.5) * xdist;
d["y"] = ( ( (d.lidx - 0.5) + ((largestLayerSize - netsize[d.layer]) /2 ) ) * ydist )+10 ;
});
// autogenerate links
var links:any = [];
nodes.map(function(d, i) {
for (var n in nodes) {
if (d.layer + 1 == nodes[n].layer) {
links.push({"source": parseInt(i), "target": parseInt(n), "value": 1}) }
}
}).filter(function(d) { return typeof d !== "undefined"; });
// draw links
var link:any = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) { return nodes[d.source].x; })
.attr("y1", function(d) { return nodes[d.source].y; })
.attr("x2", function(d) { return nodes[d.target].x; })
.attr("y2", function(d) { return nodes[d.target].y; })
.style("stroke-width", function(d) {return Math.sqrt(d.value); });
// draw nodes
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; }
);
var circle = node.append("circle")
.attr("class", "node")
.attr("r", this.nodeSize)
.style("fill", function(d) { return color(d.layer); });
node.append("text")
.attr("dx", "-.35em")
.attr("dy", ".35em")
.attr("font-size", ".6em")
.text(function(d) { return d.label; });
}
}
the code of the neural.component.css:
.link {
stroke: #999;
stroke-opacity: .6;
}
The current output lokks like this:
I want to show the inks as:
As you'll see the generation code is already there I want to know how to refer the class to get the links appearing in Angular 7

Populating a PDFKit Image from Firebase Storage while in a Firebase Function?

I've been trying to populate an image in a PDFDoc from PDFKit and am not able to get it to work. When using the Function I have below, I get the following Error in the Firebase Console-Functions-Logs. The file is stored on Firebase Storage as a "image/png" type. The name is just a string. I tried appending ".PNG" to the name, I received the same error. I included the whole function file since maybe there is a more acceptable way to handle this? How am I supposed to insert a PDF into the PDFDoc from Firebase Storage while in a Firebase Function? Thank you.
Error getting documents: Error: Unknown image format.
at Function.PDFImage.open (/user_code/node_modules/pdfkit/js/image.js:43:15)
at PDFDocument.openImage (/user_code/node_modules/pdfkit/js/mixins/images.js:102:26)
at PDFDocument.image (/user_code/node_modules/pdfkit/js/mixins/images.js:30:24)
at /user_code/lib/index.js:71:48
at QuerySnapshot.forEach (/user_code/node_modules/firebase-admin/node_modules/#google-cloud/firestore/src/reference.js:1012:16)
at /user_code/lib/index.js:24:31
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as firebase from 'firebase/app';
import * as PDFDocument from 'pdfkit';
admin.initializeApp(functions.config().firebase);
export const genPdf = functions.https.onRequest((request, response) => {
const bucket = admin.storage().bucket("decteac2-3hcec.appspot.com");
const text = request.query.text;
const pdfdoc = new PDFDocument({ autoFirstPage: false });
pdfdoc.info['Title'] = text + ".pdf";
let x = 5;
let y = 5;
pdfdoc.pipe(response);
const docRef = admin.firestore().collection("cxforms").doc(text);
docRef.get().then(function (doc) {
if (doc.exists) {
const pagesRef = admin.firestore().collection("pages").where("formKey", "==", text).orderBy("pageno");
pagesRef.get().then(function (querySnapshot) {
let cnt = 1;
querySnapshot.forEach(function (page) {
pdfdoc.addPage({ margin: 0 });
x = 5;
y = 5;
pdfdoc.moveTo(x, y)
.lineTo(607, 5)
.lineTo(607, 787)
.lineTo(5, 787)
.lineTo(x, y)
.stroke();
for (let i = 0; i < page.data().tables.length; i++) {
const table = page.data().tables[i];
y = y + 8.5; // margin
var tableWidth = 5;
for (let p = 0; p < table.cols.length; p++) {
tableWidth = tableWidth + (table.cols[p] * .82);
}
var offset = (597 - tableWidth) / 2;
for (let j = 0; j < table.rows.length; j++) {
const row = table.rows[j];
x = 10 + offset;
for (let k = 0; k < row.cells.length; k++) {
const cell = row.cells[k];
const colwidth = table.cols[k];
var height = 22.2;
for (let l = 0; l < cell.cellels.length; l++) {
const cellEl = cell.cellels[l];
if (cellEl.type === "Text") {
pdfdoc.text(cellEl.text, x + 1, y + 7);
} else if (cellEl.type == "Image") {
const filename = cellEl.storageid;
const file = bucket.file(filename);
const bucketFileStream = file.createWriteStream();
const buffer = new Buffer([1000000]);
bucketFileStream.write(buffer);
bucketFileStream.end();
pdfdoc.image(buffer, x, y);
}
}
if (height < 20) {
height = 20;
}
pdfdoc.moveTo(x, y)
.lineTo(x + (colwidth * .82), y)
.lineTo(x + (colwidth * .82), y + height)
.lineTo(x, y + height)
.lineTo(x, y)
.stroke();
x = x + (colwidth * .82);
}
y = y + height;
}
}
cnt++;
});
pdfdoc.end();
}).catch(function (error) {
console.log("Error getting documents: ", error);
})
} else {
console.log("No such document!");
}
}).catch(function (error) {
console.log("Error gettting documents: ", error);
});
});
Here is how I wound up solving this. The key items were setting the response encoding to 'base64' for the call to firestorage. The other item is using async and await in order to wait for each cell element image to populate pdfdoc before moving on to the next cell element to be rendered.
if (cellEl.type == "Image") {await toBase64(cellEl.url, x, y, pdfdoc);}
function toBase64(url, x, y, pdfdoc) {
return new Promise(async(resolve, reject) => {
var req = await https.get(url, (res) => {
res.setEncoding('base64');
let body = "data:" + res.headers["content-type"] + ";base64,";
res.on('data', (d) => {
body += d;
});
res.on('end', () => {
pdfdoc.image(body, x, y);
resolve(res);
});
});
req.on('error', err => {
console.error('error!');
reject(err);
});
});
}

Swift link in a Annotation -> Webview

I try to find a way to add a link to a Annotation in Swift MapFramework, this link should forward the user to a WebView, as far i see i can't find any way to add a "touchable" link into a Annotations SubTitle
Here is my Code yet
class CustomPointAnnotation: MKPointAnnotation {
var imageName: String!
}
var info1 = CustomPointAnnotation()
info1.coordinate = CLLocationCoordinate2DMake(42, -84)
info1.title = "Info1"
info1.subtitle = "Subtitle"
info1.imageName = "1.png"
var info2 = CustomPointAnnotation()
info2.coordinate = CLLocationCoordinate2DMake(32, -95)
info2.title = "Info2"
info2.subtitle = "Subtitle"
info2.imageName = "2.png"
func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView! {
if !(annotation is CustomPointAnnotation) {
return nil
}
let reuseId = "test"
var anView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseId)
if anView == nil {
anView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseId)
anView.canShowCallout = true
}
else {
anView.annotation = annotation
}
//Set annotation-specific properties **AFTER**
//the view is dequeued or created...
let cpa = annotation as CustomPointAnnotation
anView.image = UIImage(named:cpa.imageName)
return anView
}
Is there maybe a way to use the UIGestureRecognizer for this?
I already tried it like
var longpress = UILongPressGestureRecognizer(target: self, action: "newInformation:")
longpress.minimumPressDuration = 2.0
info1.addGestureRecognizer(longpress)
But ending with "ViewController.CustomPointAnnotation does not have a member named addGestureRecognizer"
Here is a working solution
override func viewDidLoad() {
super.viewDidLoad()
//1
var lat1:CLLocationDegrees = 40.748708
var long1:CLLocationDegrees = -73.985643
var latDelta1:CLLocationDegrees = 0.01
var longDelta1:CLLocationDegrees = 0.01
var span1:MKCoordinateSpan = MKCoordinateSpanMake(latDelta1, longDelta1)
var location1:CLLocationCoordinate2D = CLLocationCoordinate2DMake(lat1, long1)
var region1:MKCoordinateRegion = MKCoordinateRegionMake(location1, span1)
Map.setRegion(region1, animated: true)
var info1 = CustomPointAnnotation()
info1.coordinate = location1
info1.title = "Test Title1!"
info1.subtitle = "Subtitle1"
info1.imageName = "1.png"
Map.addAnnotation(info1)
//2
var lat2:CLLocationDegrees = 41.748708
var long2:CLLocationDegrees = -72.985643
var latDelta2:CLLocationDegrees = 0.01
var longDelta2:CLLocationDegrees = 0.01
var span2:MKCoordinateSpan = MKCoordinateSpanMake(latDelta2, longDelta2)
var location2:CLLocationCoordinate2D = CLLocationCoordinate2DMake(lat2, long2)
var region2:MKCoordinateRegion = MKCoordinateRegionMake(location2, span2)
var info2 = CustomPointAnnotation()
info2.coordinate = location2
info2.title = "Test Title2!"
info2.subtitle = "Subtitle2"
info2.imageName = "2.png"
Map.addAnnotation(info2)
}
func mapView(mapView: MKMapView!, annotationView: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
if control == annotationView.rightCalloutAccessoryView {
println("Disclosure Pressed! \(self.title)")
}
}
func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView! {
if !(annotation is CustomPointAnnotation) {
return nil
}
let reuseId = "test"
var anView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseId)
if anView == nil {
anView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseId)
anView.canShowCallout = true
anView.rightCalloutAccessoryView = UIButton.buttonWithType(.InfoDark) as UIButton
}
else {
anView.annotation = annotation
}
//Set annotation-specific properties **AFTER**
//the view is dequeued or created...
let cpa = annotation as CustomPointAnnotation
anView.image = UIImage(named:cpa.imageName)
return anView
}

Changing Marker Icons while using MarkerClusterer (Works in IE9 and Chrome, Doesn't Work in Firefox or earlier IE versions)

I have a public-facing site using GoogleMaps API v3 and the MarkerClusterer library. The page that is having a problem can be found here (http://www.mihomes.com/Find-Your-New-Home/San-Antonio-Homes). If you view this page in IE9 or Chrome, the correct pin icon images are shown, while in previous IE versions and Firefox different (and incorrect) pin icons.
IE9
Firefox 3.6.8
Here is the JavaScript code that generates the pins/clustering:
$(function() {
var dl_grid = new DLGrid(".GMapGrid");
dl_grid.init();
var dl_map = new DLMap("#map");
dl_map.init();
var markers = dl_grid.CollectMarkerData();
dl_map.LoadMarkers(markers);
});
var DLIcons = new function() {
var me = this;
me.NormalIcon = "/images/GoogleMapsIcons/mi_icon_n.png";
me.HoverIcon = "/images/GoogleMapsIcons/new_mi_icon_r.png";
me.ClusterIcon = "/images/GoogleMapsIcons/mi_icon_n.png";
me.ClusterHoverIcon = "/images/GoogleMapsIcons/new_mi_icon_r.png";
me.SalesCenterIcon = "/images/GoogleMapsIcons/new_mi_icon_n2.gif";
me.DesignCenterIcon = "/images/GoogleMapsIcons/mi_dc_n.png";
me.DesignCenterHoverIcon = "/images/GoogleMapsIcons/mi_dc_r.png";
};
//Used for all functions relating to the table below the map
var DLGrid = function(grid_selector) {
//Initialize variables
var me = this;
me.grid = $(grid_selector);
//Initialize
me.init = function() {
setupTableSorting();
setupHoverEvents();
setupZoomButtons();
};
//Setup the table sorting
var setupTableSorting = function() {
//Init tablesorter plugin
var sort_options = { headers: { 0: { sorter: false }, 4: { sorter: false} } };
if (MI_DIVISION_LANDING_TABLE_SORT_OPTIONS != undefined) {
sort_options = MI_DIVISION_LANDING_TABLE_SORT_OPTIONS;
}
me.grid.tablesorter(sort_options);
//As soon as the user sorts, remove all Community Groups
me.grid.bind("sortEnd", function() {
me.grid.find("tr.communityGroup").remove();
$("tr.groupedCommunity").removeClass("groupedCommunity").addClass("ungroupedCommunity");
//$("tr.ungroupedCommunity").removeClass("ungroupedCommunity");
me.grid.trigger("update");
});
};
var highlightRow = function(marker) {
var markerId = (typeof (marker) == "string") ? marker : marker.jsonData.MarkerID;
$(me.grid).find("#" + markerId).addClass("highlightedRow");
};
// Bind to mouseover/mouseout events and highlight the proper row in the table
// Trigger mouseover/mouseout events when you hover over a row in the table
var setupHoverEvents = function() {
$(document).bind("MARKER_MOUSEOVER", function(e, marker) {
$(me.grid).find("tbody tr.highlightedRow").removeClass("highlightedRow");
if (typeof (marker) != "string" && marker.length != undefined) {
for (var i = 0; i < marker.length; i++) {
highlightRow(marker[i]);
}
}
else {
highlightRow(marker);
}
});
// $(document).bind("MULTIPLE_MARKER_MOUSEOVER", function(e, markers) {
// $(me.grid).find("tbody tr.highlightedRow").removeClass("highlightedRow");
// for (var i = 0; i < markers.length; i++) {
// var markerId = (typeof (markers[i]) == "string") ? markers[i] : markers[i].jsonData.MarkerID;
// $(me.grid).find("#" + markerId).addClass("highlightedRow");
// }
// });
$(me.grid).find("tbody tr").mouseover(function() {
$(document).trigger("MARKER_MOUSEOVER", [$(this).attr("id")]);
});
};
// The zoom buttons next to each row should zoom to a marker and show it's info window
var setupZoomButtons = function() {
$(me.grid).find("tbody tr .zoom_link img").click(function() {
$(document).trigger("MAP_SHOW_MARKER_POPUP_AND_ZOOM", [$(this).parent().parent().attr("id")]);
});
};
// Collect and parse the JSON data from the hidden 'data' column in the table
me.CollectMarkerData = function() {
var markers = [];
$.each(me.grid.find("tbody tr:not(.communityGroup)"), function(i, row) {
var dataCell = $(row).children("td.data");
var rawContent = $(dataCell).text();
var json_data = {};
if (rawContent.length > 0) {
json_data = JSON.parse(rawContent);
}
json_data["MarkerID"] = $(row).attr("id");
markers.push(json_data);
});
return markers;
};
};
//Used for all functions relating to map
var DLMap = function(map_div_selector) {
//Initialize variables
var me = this;
me.mapDivSelector = map_div_selector;
me.mapObj;
me.init = function() {
setupMap();
bindHoverEvents();
setupPopupEvents();
setupDesignCenter();
};
//Basic setup of map
var setupMap = function() {
me.mapObj = new DLGoogleMap(me.mapDivSelector);
me.mapObj.init(onMarkerMouseOver, showMarkerPopup);
};
// Add an array of markers (from json data) to the map
me.LoadMarkers = function(markers) {
$.each(markers, function(i, json_marker) {
me.mapObj.addMarker(json_marker);
});
me.mapObj.fitMapToMarkers();
};
var showMarkerPopup = function(markerJson, zoomToLocation) {
var source = $("#MapMarkerInfoWindow").html();
var template = Handlebars.compile(source);
var content = template(markerJson);
var triggerKey = (zoomToLocation == true) ? "MAP_SHOW_POPUP_AND_ZOOM" : "MAP_SHOW_POPUP";
$(document).trigger(triggerKey, [content, markerJson.Lat, markerJson.Lng]);
};
var onMarkerMouseOver = function(markerJson) {
$(document).trigger("MARKER_MOUSEOVER", markerJson);
}
// Highlight (or unhighlight) a marker when a mouseover/mouseout event is triggered
var bindHoverEvents = function() {
$(document).bind("MARKER_MOUSEOVER", function(e, marker) {
if (typeof (marker) != "string" && marker.length != undefined) {
marker = marker[0];
}
me.mapObj.resetMarkerHighlighting();
me.mapObj.highlightMarker(marker);
});
// $(document).bind("MULTIPLE_MARKER_MOUSEOVER", function(e, markers) {
// me.mapObj.resetMarkerHighlighting();
// if (markers[0].cluster != null) {
// me.mapObj.highlightCluster(markers[0]
// }
// });
};
var setupPopupEvents = function() {
$(document).bind("MAP_SHOW_POPUP", function(e, content, lat, lng) {
me.mapObj.showPopup(content, lat, lng);
});
$(document).bind("MAP_SHOW_POPUP_AND_ZOOM", function(e, content, lat, lng) {
me.mapObj.showPopup(content, lat, lng, true);
});
$(document).bind("MAP_SHOW_MARKER_POPUP", function(e, marker) {
if (typeof (marker) == "string") {
marker = me.mapObj.findMarkerByID(marker);
}
showMarkerPopup(marker.jsonData);
});
$(document).bind("MAP_SHOW_MARKER_POPUP_AND_ZOOM", function(e, marker) {
if (typeof (marker) == "string") {
marker = me.mapObj.findMarkerByID(marker);
}
showMarkerPopup(marker.jsonData, true);
});
};
var setupDesignCenter = function() {
var jsonText = $.trim($("#DesignCenterData").text());
if (jsonText.length > 5) {
var dcJson = JSON.parse(jsonText);
me.mapObj.addDesignCenterMarker(dcJson);
}
};
};
var DLGoogleMap = function(map_div_selector) {
//Initialize variables
var me = this;
me.mapDiv = $(map_div_selector);
me.gmap;
me.markers = [];
me.markerClusterer;
me.infoWindow;
me.onMouseOver;
me.onClick;
me.ZOOM_TO_LEVEL = 14;
me.highlightedMarkers = [];
me.designCenterMarker = null;
//Extend Google Map Classes
google.maps.Marker.prototype.jsonData = null;
google.maps.Marker.prototype.iconImg = null;
google.maps.Marker.prototype.iconHoverImg = null;
me.init = function(onMouseOver, onClick) {
me.onMouseOver = onMouseOver;
me.onClick = onClick;
setupMap();
setupClustering();
setupDrivingDirectionLinks();
};
var setupMap = function() {
//var latlng = new google.maps.LatLng(40.05, -82.95);
var myOptions = {
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
me.gmap = new google.maps.Map(document.getElementById("map"), myOptions);
me.infoWindow = new google.maps.InfoWindow();
};
var setupDrivingDirectionLinks = function() {
$("a.gDirectionsLink").live("click", function(e) {
e.preventDefault();
$(".gPopupInfo").hide();
$(".gDrivingDirections").show();
});
$("a.gCloseDrivingDirections").live("click", function(e) {
e.preventDefault();
$(".gDrivingDirections").hide();
$(".gPopupInfo").show();
});
};
//Add a single json marker to the map
me.addMarker = function(jsonMarker) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(jsonMarker.Lat, jsonMarker.Lng),
title: jsonMarker.Name
});
marker.jsonData = jsonMarker;
if (jsonMarker.HasSalesCenter == "True") {
marker.iconImg = DLIcons.SalesCenterIcon;
}
else {
marker.iconImg = DLIcons.NormalIcon;
}
marker.iconHoverImg = DLIcons.HoverIcon;
marker.icon = marker.iconImg;
google.maps.event.addListener(marker, 'click', function() {
me.onClick(marker.jsonData);
});
google.maps.event.addListener(marker, 'mouseover', function() { me.onMouseOver(marker) });
me.markerClusterer.addMarker(marker);
me.markers.push(marker);
};
//Add an arbitrary marker
me.addDesignCenterMarker = function(dcJson) {
me.designCenterMarker = new google.maps.Marker({
position: new google.maps.LatLng(dcJson.Lat, dcJson.Lng),
title: "Design Center",
map: me.gmap
});
me.designCenterMarker.jsonData = dcJson;
me.designCenterMarker.iconImg = DLIcons.DesignCenterIcon;
me.designCenterMarker.iconHoverImg = DLIcons.DesignCenterHoverIcon;
me.designCenterMarker.icon = me.designCenterMarker.iconImg;
google.maps.event.addListener(me.designCenterMarker, 'mouseover', function() {
me.highlightMarker(me.designCenterMarker);
});
google.maps.event.addListener(me.designCenterMarker, 'mouseout', function() {
me.unHighlightMarker(me.designCenterMarker);
});
google.maps.event.addListener(me.designCenterMarker, 'click', function() {
me.infoWindow.close();
var source = $("#DesignCenterInfoWindow").html();
var template = Handlebars.compile(source);
var content = template(me.designCenterMarker.jsonData);
me.showPopup(content, me.designCenterMarker.jsonData.Lat, me.designCenterMarker.jsonData.Lng);
});
};
me.resetMarkerHighlighting = function() {
for (var i = 0; i < me.highlightedMarkers.length; i++) {
me.unHighlightMarker(me.highlightedMarkers[i]);
}
me.highlightedMarkers = [];
}
me.highlightMarker = function(m) {
var marker = (typeof (m) == "string") ? me.findMarkerByID(m) : m;
if (marker != null) {
if (marker.cluster == null || (marker.cluster.hasMultipleMarkers() == false)) {
marker.setIcon(marker.iconHoverImg);
}
else {
highlightCluster(marker.cluster);
}
me.highlightedMarkers.push(marker);
}
};
me.unHighlightMarker = function(m) {
var marker = (typeof (m) == "string") ? me.findMarkerByID(m) : m;
if (marker != null) {
if (marker.cluster == null || (marker.cluster.hasMultipleMarkers() == false)) {
marker.setIcon(marker.iconImg);
}
else {
unHighlightCluster(marker.cluster);
}
}
};
me.zoomAndShowPopup = function(content, lat, lng) {
};
me.showPopup = function(content, lat, lng, zoomToLocation) {
if (zoomToLocation == true) {
var adjustedLat = lat - (me.gmap.getZoom() * 0.01);
me.zoomToLocation(adjustedLat, lng);
}
me.infoWindow.setContent(content);
me.infoWindow.setPosition(new google.maps.LatLng(lat, lng));
me.infoWindow.open(me.gmap);
};
me.zoomToLocation = function(lat, lng) {
me.gmap.setZoom(me.ZOOM_TO_LEVEL)
me.gmap.setCenter(new google.maps.LatLng(lat, lng));
};
me.fitMapToMarkers = function() {
me.markerClusterer.fitMapToMarkers();
};
//Setup the map 'clustering', so that nearby markers will cluster together to form 1 icon
var setupClustering = function() {
Cluster.prototype.iconImg = DLIcons.ClusterIcon;
Cluster.prototype.iconHoverImg = DLIcons.ClusterHoverIcon;
var mc_options = {
gridSize: 15,
maxZoom: 15,
zoomOnClick: false,
styles: [{ url: DLIcons.ClusterIcon, height: 30, width: 20, textColor: "#fff", textSize: 10}],
showMarkerCount: false,
onClusterAdded: onClusterAdded
};
me.markerClusterer = new MarkerClusterer(me.gmap, [], mc_options);
//Setup Cluster Info Windows with a list of marker links
google.maps.event.addListener(me.markerClusterer, 'clusterclick', function(cluster) {
me.infoWindow.close();
var source = $("#MapClusterInfoWindow").html();
var template = Handlebars.compile(source);
var markers = getClusterJsonMarkers(cluster);
var data = {
markers: markers
};
var content = template(data);
$(document).trigger("MAP_SHOW_POPUP", [content, cluster.getCenter().lat(), cluster.getCenter().lng()]);
});
//Setup Cluster marker highlighting
google.maps.event.addListener(me.markerClusterer, 'clustermouseover', function(cluster) {
me.resetMarkerHighlighting();
highlightCluster(cluster);
var cmarkers = cluster.getMarkers();
$(document).trigger("MARKER_MOUSEOVER", [cmarkers]);
});
$(".openMarkerPopup").live("click", function(e) {
e.preventDefault();
$(document).trigger("MAP_SHOW_MARKER_POPUP", [$(this).attr("rel")]);
});
};
var onClusterAdded = function(cluster) {
if (clusterHasSalesCenter(cluster)) {
cluster.iconImg = DLIcons.SalesCenterIcon;
cluster.updateIconUrl(cluster.iconImg);
}
else {
cluster.iconImg = DLIcons.ClusterIcon;
}
};
var clusterHasSalesCenter = function(cluster) {
if ((cluster == undefined) || (cluster.markers_ == undefined)) {
return false;
}
for (var i = 0; i < cluster.markers_.length; i++) {
if (cluster.markers_[i].jsonData.HasSalesCenter == "True") {
return true;
}
}
return false;
};
var highlightCluster = function(cluster) {
//me.highlightedMarkers = [];
// for (var i = 0; i < cluster.markers_.length; i++) {
// me.highlightedMarkers.push(cluster.markers_[i]);
// }
cluster.updateIconUrl(cluster.iconHoverImg);
};
var unHighlightCluster = function(cluster) {
cluster.updateIconUrl(cluster.iconImg);
};
var getClusterJsonMarkers = function(cluster) {
var jsonMarkers = [];
var gmarkers = cluster.getMarkers();
for (var i = 0; i < gmarkers.length; i++) {
jsonMarkers.push(gmarkers[i].jsonData);
}
return jsonMarkers;
};
// Get a marker on the map given it's MarkerID
me.findMarkerByID = function(markerId) {
for (var i = 0; i < me.markers.length; i++) {
if (me.markers[i].jsonData.MarkerID == markerId) {
return me.markers[i];
break;
}
}
return null;
};
};
This website is built using .NET Framework 3.5 and ASP.NET WebForms.
Thanks for the assistance.

Resources