Develop Reference

Adding Multiple Custom Markers to Bing Maps (API) example

I've started with this example:
https://code.msdn.microsoft.com/bing/Using-the-Bing-Maps-V8-Web-07e21f3a#content
Which basically gives a form with a search option and present the search result in a html file.
Now I'm trying to add an array of items instead of one to the html file, to show these.
But I can't seem to understand how to get the html file to capture the list of addresses from the Form1.cs file with a button click
I've added this to the form:
private void GroupBtn_Click(object sender, EventArgs e)
{
var pushpinInfos = new[] {
new { lat = 41.80584, lng = 21.15498, title = "Salmon Market", description = "Kipper Gostivar", icon = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png" },
new { lat = 42.000900, lng = 21.466440, title = "Market", description = "Gostivar", icon = "https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg" }
};
MyWebBrowser.Document.InvokeScript("SetMap", new object[] { pushpinInfos });
}
And this to the html file:
function SetMap(addresses) {
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
pinLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(pinLayer);
var pins1 = JSON.stringify(addresses);
// alert(pins1);
$.each(JSON.parse(pins1), function (key, pinJson) {
var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
// Creates a Pushpin
var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin',
description: 'Discription for pin'
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
pinLayer.push(pin);
});
}
But it doesn't work, and I can't seem to debug the html form.
So my questions are:
1) Isn't there a way to debug the html part?
2) Where did i go wrong with trying to show the 2 addresses on the map?

A couple of issues in your code:
You create a pin layer, but are adding the pins directly to the map and the layer. This will cause an issue.
Your pin layer is using the deprecated EntityCollection class and map.entities. Use map.layers and Microsoft.Maps.Layer
Pushpin's don't have a typeName option. That was a feature in an old map control and not available in the latest version as rendering happens on an HMTL5 canvas which doesn't support CSS styles.
Minor thing, but when using a layer, add events to it rather than individual shapes, it helps with performance.
Here is a modified version of your code:
function SetMap(addresses) {
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
pinLayer = new Microsoft.Maps.Layer();
map.layers.insert(pinLayer);
//Add a click event handler to the pin layer.
Microsoft.Maps.Events.addHandler(pinLayer, 'click', pushpinClicked);
var pins1 = JSON.stringify(addresses);
// alert(pins1);
$.each(JSON.parse(pins1), function (key, pinJson) {
var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
// Creates a Pushpin
var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin',
description: 'Discription for pin'
};
//Add pushpin to the map.
pinLayer.add(pin);
});
}

programmatically adding buttons and OnClientClick but still having post back issue

I am trying to hide some divs using Javascript but i think the post back keeps reloading the page.
To make things more complicated my buttons are added programmatically by my code behind.
foreach (string line in thefilters)
{
Button newButton = new Button();
newButton.ID = Convert.ToString(line);
newButton.Text = Convert.ToString(line);
newButton.CssClass = "tblbutton";
//newButton.Attributes.Add("onclick", "hide_div("+newButton.ID+")");
newButton.OnClientClick = "return hide_div('" + newButton.ID + "')";
pnl_left.Controls.Add(newButton);
}
My javascript is located in the header as follows.
<script type="text/javascript">
function hide_div(filter) {
var pnl_right = document.getElementById("pnl_right");
var listofelements = pnl_right.getElementsById("div");
for (var i = 0; i < listofelements.length; i++) {
if (listofelements[i].id.indexOf(filter) == 0) {
document.getElementById(listofelements[i].id).style.display = 'inline';
}
else {
document.getElementById(listofelements[i].id).style.display = 'none';
}
}
return false;
}
I may have issues in the javascript for what i want to achieve but i am confident that if i can stop the postback then i can solve the javascript myself..
Thanks for any suggestions in advance.

You have not showed in which event you are adding controls. But I am assuming from your problem that you are doing this in Page_Load. If yes, try and move in OnInit event.
Second, in Page_Load you need to check
if(!IsPostBack)
{
//your code for adding controls
}
Hope that helps.

How to disable right click on htmlpage using silverlight?

I have recently started doing the coding in Silverlight application.I am not having great ideas about it. Now I am having the problem while disable right click Silverlight applications in a HTML page. I have tried to do lot of things but was not succeeded.Please help me how to disable right click on htmlpage using silverlight.

If you could use javascript here is your answer , but generally disabling the right click is not recommended.It will annoy some users.
<script type="text/javascript" >
var BM = 2; // button middle
var BR = 3; // button right
var msg = "MOUSE RIGHT CLICK IS NOT SUPPORTED ON THIS PAGE";
function mouseDown(e) {
try { if (event.button == BM || event.button == BR) { return false; } }
catch (e) { if (e.which == BR) { return false; } }
}
document.oncontextmenu = function() { return false; }
document.onmousedown = mouseDown;
</script>

Converting Object HTMLImageElement to text string?

I have an odd thing going on that I'm trying to find a work around for (not by choice but I HAVE to do it). I have a javascript function that shows or hides a table row. Someone else wrote it. How it works is that when you click on an image in a table row it shows a row underneath it. Clicking the image again collapses the row. The image code for it is simple:
<img blah blah blah onClick="ShowHide(this);">
What I am trying to do is capture that img element and attributes and send it as a query string so that when the page does a postback I can call the javascript function ShowHide(this) in the code behind and pass it the image properties. That way the row will show on page load. Does that make sense? So what I have right now is:
function postbackwithModal(){
//image properties is what I need to figure out
window.location = "/Products/ProductDetail.aspx?element=" + imageProperties;
}
and then in the code behind:
string element = Request.QueryString["element"];
if (!element.IsNullOrEmpty())
{
ClientScript.RegisterStartupScript(GetType(), "hwa", "ShowHide(" + element + ");", true);
}
The ShowHide() function looks like this:
function ShowHide(Element) {
var rowIndex = $(Element).parent().parent()[0].sectionRowIndex;
var item = $(Element).parent().parent().parent().children()[rowIndex + 1];
if ($(item).is(":visible") == true) {
$(item).hide(0, function () { $(Element).attr('src', '../Images/plus.png'); });
}
else {
$(item).show(0, function () { $(Element).attr('src', '../Images/minus.png'); });
// Loop though the images and set the src value to be the custom handler endpoint.
var ImageContainer = $(item).children().children().children()[3];
var Images = $(ImageContainer).find('img');
}
globalPlus = Element;
}

how to run href="#var=something" before onclick function fires in javascript?

i'm using the below javascript to change an image on an aspx in asp.net c#
<script language="JavaScript" type="text/javascript">
var updateImageWhenHashChanges = function()
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(window.location.hash == "#size=2")
{
theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
}
else if(window.location.hash == "#size=3")
{
theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
}
else if(window.location.hash == "#size=1")
{
theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
}
else
{
}
}
</script>
here's how i call it with a link
test
the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want.
does anyone know how i can fix this? i'm trying to get the image to change on each click

Perhaps you can replace your href with javascript:void(0) and then handle the link's "natural" click behavior at the end of your onclick() script.

Have you tried a different event like onmouseup or onunload?

You should pass in the current anchor's href to the function call and then use that in your if statements, then return false so that the default behavior isn't used.
var updateImageWhenHashChanges = function(pChoice)
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(pChoice == "size2")
{
// more lines of picking and choosing... and finally:
return false;
and then in the anchor
test
It would also be much better if you could use your databinding to put the real href of the image into the href of the anchor so that if JavaScript wasn't enable the user would still end up being able to see the image in question. Then your function code would just be getting a handle to the image and setting the source to that inbound param.

What about something like this:
<script type="text/javascript">
var updateImageSize = function(imageType, imageID)
{
thisImage = document.getElementById(imageID);
switch(imageType)
{
case "thumb":
// change image src to the thumbnail's path
thisImage.src = "YourThumbNailPath";
case "medium":
// change image src to medium image path
thisImage.src = "YourMediumImagePath";
case "large":
// you get the picture
thisImage.src = "YourLargeImagePath";
default:
// whatever you want it to default to
thisImage.src = "YourThumbNailPath";
}
}
</script>
Then the implementation:
Update Image
Hope that helps.