I am trying to simply add a Google Search bar onto my own map but am experiencing problems. I can't seem to get it to work! I've tried map.enableGoogleBar(); but that just gets rid of my KML layer and doesn't add a search box!
Here is the code:
function initialize() {
// set up startup options for the map
// disabled double click as it was annoying and streetview control removed.
var myOptions = {
zoom: 10,
//minZoom: 16,
center: new google.maps.LatLng(50.45750, -3.84521),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
streetViewControl: false,
mapTypeControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
enableGoogleBar: true,
googleBarOptions: {showOnLoad:true},
};
// create the new map
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
There's 2 issues I see
You're missing a comma before 'enableGoogleBar' in the myOptions object.
You're using Google Maps v3 API and checking the docs at https://developers.google.com/maps/documentation/javascript/reference it does not mention support for the enableGoogleBar option at all. It was only available in version 2 of the Google Maps API.
Related
I have movable columns, hideable columns etc in my tabulator application. I would like a button to reset the view but I don't see anything that clears the persistence data in the documentation.
I'm very new to Tabulator but I have just recently done something similar. I wanted to reset col widths and positions.
The general idea is: In my grid setup code I have a function called getGridColumns. This gets the initial column definitions which then get added into the grid options that get passed to the new Tabulator(...) call.
ie something like
const options = {
data: this.data,
columns: getGridColumns(),
// ...other options
};
this.table = new Tabulator("#myGridId", options);
I have a header menu on one of the columns:
function getGridColumns() {
return [
{
title: "",
field: "dummy",
width: 80,
resizable: false,
// etc...
headerMenu: specialTableFuncsMenu,
},
{ title: "Col 1", field: "myField", /* etc */ },
];
}
and the header menu has a call to set the column layout using the getGridColumns function as parameter.
function specialTableFuncsMenu(e, col) {
const menu = [
{
label: "Reset columns",
action: col.getTable().setColumnLayout(getGridColumns()),
},
];
return menu;
}
The original is in Typescript so this might not be entirely accurate Javascript. And I have wrapped the action call in a setTimeout() just to prevent a console error when the grid tries to close the popup after it has redrawn itself.
I did, originally, clear the persistent storage too but removed the code as I don't think it's really needed. Something like:
localStorage.removeItem('tabulator-myGridId-columns');
Which assumes we're using localStorage and ignores the cookie option.
This all does an acceptable job of resetting my column layout. You could add in calls to clear filters etc as required.
I have a KmlLayer loading successfully, though the pins are getting cut off due to canvas tiles, so it was suggested to turn "optimized: false" to the MarkerOptions.
So far everything I'm reading is showing how to set MarkerOptions when you're creating a new marker object, but I don't know how to apply MarkerOptions to the markers generated by the KML file.
How would I be able to set the MarkerOption of "optimized: false" to the code below? Or can I do this?
var map;
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(39.157523,-100.25987),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
georssLayer = new google.maps.KmlLayer('[KML FILE]', {preserveViewport:true});
georssLayer.setMap(map);
This appears to have been on Google's end. We were also experiencing this issue and it seems to have been resolved about an hour ago. Google will likely update this bug report:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=10662
I would like to override the default link behaviour. I have a function that deals with connecting a link to a target following a certain set of rules. For example, LinkTypeA will can only connect to ObjectType1 and ObjectType2, and LinkTypeB will only connect with ObjectType3.
In the case that the user is creating LinkTypeA, and terminates when clicking on ObjectType3, a point (x, y) is created for the links target.
This is because ObjectType1 and ObjectType2 are often embedded above a ObjectType3.
I have that behaviour working correctly, but when you grab a links end and drag it, when letting go, it runs an internal function instead, which allows it to connect to ObjectType3.
I would like to override this and have it call my custom function. How can I do this?
linkValidation function should handle it even if the link is being dragged. In the example below only shapes with a same type can be linked (rect with rect, circle with circle).
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
var source = cellViewS.model.get('type');
var target = cellViewT.model.get('type');
return source && source === target;
}
});
https://jsfiddle.net/vtalas/65uteht9/
var uploader = new qq.azure.FineUploaderBasic({
debug: true,
element: document.getElementById("fine-uploader-gallery"),
signature: {
endpoint: '#Url.Action("GetUploadSASUrl", "Upload")'
},
uploadSuccess: {
endpoint: '#Url.Action("ProcessImage", "Upload")'
},
scaling: {
sendOriginal: false,
sizes: [
{ name: "", maxSize: 800 }
]
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png']
}
});
</script>
Trying to create a FineUploader Basic instance for Azure but nothing shows up. What am I doing wrong?
I've added a debug: true directive but nothing shows up in the console. The initial script tag is there and a div with the id of "fine-uploader-gallery" is there. All the scripts and CSS are on the page.
Why would you expect something to "show up"? You are using Fine Uploader's "core" mode, which assumes you are providing the entire UI yourself and simply making use of the API, options, and events to drive it. If you want to render a default but customizable UI, you should use UI mode instead. More information about all of these can be found on the docs site at http://docs.fineuploader.com. Before you go any further, you should spend some time familiarizing yourself with these options.
i'm trying to use jQuery multiselect plugin in a form editing jqGrid (add form).
This is the code (colModel extract) I'm using to build the dropdown:
{
name: 'CaratteristicheCamera',
index: 'CaratteristicheCamera',
width: 50,
hidden: true,
edittype: 'select',
editable: true,
editrules: { edithidden: true, required: true },
editoptions: {
multiselect: true,
dataUrl: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/GetRoomFeatureList") %>',
buildSelect: function (data) {
var retValue = $.parseJSON(data);
var response = $.parseJSON(retValue.d);
var s = '<select id="CaratteristicheCamera" name="CaratteristicheCamera">';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
s += '<option value="' + response[i]["Id"] + '">' +
response[i]["Descrizione"] + '</option>';
}
}
return s + "</select>";
},
dataInit: function() {
$("#CaratteristicheCamera").multiselect();
}
}
},
As you guys can see, jqGrid call webmethod placed in asmx file. Everything seems to work ok, but I can't receive all the values user select from the dropdown. It seems that the system send to the server the last selection.
Do u have any tips on it?
EDIT: this is the asmx webservice declaration
[WebMethod]
public string SaveRoom(string id, string codice, string Numero, string NumeroPiano,
string Nome, string TipoCamera, string StatoCamera,
string CaratteristicheCamera, string TipoSdoppiabilita)
{}
I tried Eric Hynds jQuery UI MultiSelect Widget together with jqGrid 3.4.1 and couldn't see any problem which you described. I recommend you compare your demo with my to find the differences.
One bad thing which I see in your code is that you set id="CaratteristicheCamera" attribute on the <select> which you generate in buildSelect. You should just use <select> without any additional attributes. The jqGrid will set itself all attributes like id or multiple="multiple".
In the demo I used editurl: 'test.asmx/dummy' which not exist on the server. So one sees the error message like
after choosing and submitting the selected items
Nevertheless one can see with respect of tools like Fiddler, Firebug or Developer Tools of IE or Chrome (see HTTP traffic in "Network" tab) that the demo post the data like
{"name":"test8","closed":"No","ship_via":"FE,TN","oper":"edit","id":"8"}
to the http://www.ok-soft-gmbh.com/jqGrid/test.asmx/dummy. So the values "FE,TN" of selected items FedEx, TNT will be send as expected. In your case the CaratteristicheCamera parameter of SaveRoom should be initialized to the comma separated list of selected values. I hope you will find the problem in your code if you compare my demo with youth.
Another small problem in the code which you posted is that you make serialization to JSON manually in the WebMethod GetRoomFeatureList and returns string. So the string will be serialized to JSON twice. So you use
var retValue = $.parseJSON(data);
var response = $.parseJSON(retValue.d);
Correct will be to return something like List<Room>. ASP.NET will serialize it automatically. If you would use the jqGrid option
ajaxSelectOptions: {
contentType: 'application/json; charset=utf-8',
dataType: "json"
}
the data in buildSelect will be not needed to parsed at all. You can directly use data.d[i].Id and data.d[i].Descrizione in the loop. I wrone you about the same problem in another answer on your old question.