I am adding bing maps to one of our sites. I am able to show pushpins and infoboxes.
The problem I am facing now is the infobox content go out of the white box.
Is there a way to have autoadjusting infoboxes for bing maps or its CSS?
Fixed using Jquery:
function displayInfobox(e) {
pinInfobox.setOptions({description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,4)});
pinInfobox.setLocation(e.target.getLocation());
map.setView({center:e.target.getLocation(),zoom:4});
adjustHeightInfobox();
}
function adjustHeightInfobox() {
var newHeight = jQuery(".infobox-info").height();
pinInfobox.setOptions({height:newHeight+15});
}
Assuming that you're using the default infobox within the AJAX control, you will be able to use the infoboxOption class where you can easily specify the width and height of the infobox.
See the MSDN for all options available on this specific class: http://msdn.microsoft.com/en-us/library/gg675210.aspx
If you want to adapt the infobox to your own needs (i.e. dynamic size), you can use your own HTML content and customize is with your own CSS, see: http://www.bingmapsportal.com/isdk/ajaxv7#Infobox14
Related
I created a leaflet control layer to switch between two base maps (Bing and OpenCycleMap), Yet I don't see the icon inside the layer control:
var baseMaps = {
"Bing": bingLayer,
"OpenCycleMap": tileLayer
};
L.control.layers(baseMaps).addTo(map);
The result in the navigator:
The way I call my leaflet :
echo $this->Html->css('leaflet');
echo $this->Html->script('leaflet');
Is there any special config to add the layer icon instead of the blank space? As I know this icon should be by default displayed.
Your help would be grateful.
I would like to add a custom container to Leaflet. The container would contain edit controls and would be used as a kind of properties editor in order to customize the map (marker colors, zoom level, polyline color, etc ...). The panel would be displayed when the user clicks on a "settings" button located on the map.
Is there a Leaflet plugin for this?
I also had a look at how to implement custom controls, but I am really not clear how to achieve this. In particular it seems to me that I can only use JavaScript and DOM manipulations (and no direct HTML markup) in order to create a custom control.
Could someone please help me bootstrap the control? thanks!
Edit:
So I tried to create a very simple container consisting of a single checkbox "control" as follow:
L.Control.SettingsPanel = L.Control.extend({
onAdd: function(map){
var checkbox = L.DomUtil.create('input');
checkbox.setAttribute("type", "checkbox");
checkbox.style.width = '200px';
return checkbox;
}
});
L.control.settingsPanel = function(opts){
return new L.Control.SettingsPanel(opts);
}
The sidebar v2 leaflet plugin might be what you are looking for.
For some reason this property is ignored.
Below is my code, as you can see i don't use a custom html.
Any idea why?
edit: i'm using the BingTheme.
the reason i need this button is that for some reason sometimes the infoBox does not close automatically when clicking another place on the map
this.map.entities.push(new Microsoft.Maps.Infobox(currentLocation,
{
title: location.threatType,
description: layer.Options.InfoBoxText + "</br>IP: " + location.IP, pushpin: pin,
zIndex: 100,
showCloseButton: true
}));
The Bing Theme module overrides all styles to match the styles that are used by, now older, Bing Maps site. As such customizations, such as showing the close button are disabled. I, personally never liked this module and recommend not using it. You can create a lot more customizations using the control without this module.
I've been attempting to render a ChartJS graph on pages a user loads with a Firefox add-on. I'm using the add-on SDK to insert a PageMod to every page:
pageMod.PageMod({
include: "*",
contentScriptFile: [data.url("jquery.js"),
data.url("Chart.js"),
data.url("onPageLoad.js")]
});
In my onPageLoad.js, I insert an HTML5 canvas element using jQuery, and then try to draw my graph on it:
var chartData = [{value:100,color:'#4C86B9',highlight:'#508CC2',label:'Blue Team'},{value:150,color:'#B9525C',highlight:'#C25660',label:'Red Team'}];
$(document).ready(function() {
var ctx = document.getElementById("chart-area").getContext("2d");
var myPieChart = new Chart(ctx).Pie(chartData, {responsive:true});
});
This only causes the canvas to expand in area (I can see its parent div element expanding), but no graph is rendered. Thus, I know that the libraries are indeed being loaded. The closest question I could find on SO is ChartJS is not rendered, but this is actually a completely different problem. I can trivially draw a rectangle to my canvas:
ctx.fillRect(10,20,200,100);
So if it's not a problem with the canvas itself, why is this ChartJS graph not rendering?
Are the jquery./js, chart.js and onpageload.js files located in your data folder? If that isnt the problem, then the problem may be cross domain thing, so youll have to get around by setting content script policies: How to add Content Security Policy to Firefox extension
The leaflet documention shows you can add a popup to a marker with
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
or create a standalone popup with
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(map);
Is there no way to set popup options and bind it to a marker? I want to be able to set my own maxwidth for popups and have them open/close when you click a marker.
Are you sure that you're reading the Leaflet reference documentation? It specifies that you can bind a popup with options by creating it and calling .bindPopup with it. For instance,
var popup = L.popup()
.setContent("I am a standalone popup.");
marker.bindPopup(popup).openPopup();
You can pass an object of popup options as the second argument of bindPopup, like this:
marker.bindPopup("<strong>Hello world!</strong><br />I am a popup.", {maxWidth: 500});
I've tested this in Leaflet 1.4, and it also seems be available in earlier versions of bindPopup.
For maxWidth you should do this:
var popup = L.popup({
maxWidth:400
});
marker.bindPopup(popup).openPopup();