This code creates an HTML page that loads bing maps for a specific address (passed by the program), and then it loads that page into a Chromium browser. I've tested the HTML file that this produces and if I double-click the file, my default browser opens and the page loads correctly. However, when I try to load this page into a Chromium browser window within the program (which has worked in the past for other pages) only the header shows up (material from div id="TitleDiv") but the map never shows. I'm trying to figure out why the HTML isn't loading when programmatically loaded into the browser when it loads correctly when manually loaded.
I've tried this with and without the ChromWebPage.Browser.Reload; line.
This is my exact Delphi code except that I've omitted our Bing maps key here. (Easiest way to get text to file with Delphi that I know if is with a TStringList which is why the code is formatted like this.)
mMap := TStringList.Create;
with mMap do begin
Add('<!DOCTYPE html> ' );
Add('<html> ' );
Add('<head>');
Add('<title>' + sCaption + '</title> ');
Add(' <meta charset="utf-8" /> ');
Add(' <script type="text/javascript"> ');
Add(' var map, searchManager; ');
Add(' function GetMap() { ');
Add(' map = new Microsoft.Maps.Map("#myMap", { ');
Add(' credentials: "KEY-HERE" ');
Add(' }); ');
//Make a request to geocode passed address
Add(' geocodeQuery("' + sAddress + '"); ');
Add(' } ');
Add(' function geocodeQuery(query) { ');
//If search manager is not defined, load the search module.
Add(' if (!searchManager) { ');
// Create an instance of the search manager and call the geocodeQuery function again.
Add(' Microsoft.Maps.loadModule("Microsoft.Maps.Search", function () { ');
Add(' searchManager = new Microsoft.Maps.Search.SearchManager(map); ');
Add(' geocodeQuery(query); ');
Add(' }); ');
Add(' } else { ');
Add(' var searchRequest = { ');
Add(' where: query, ');
Add(' callback: function (r) { ');
// Add the first result to the map and zoom into it.
Add(' if (r && r.results && r.results.length > 0) { ');
Add(' var pin = new Microsoft.Maps.Pushpin(r.results[0].location); ');
Add(' map.entities.push(pin); ');
Add(' map.setView({ bounds: r.results[0].bestView }); ');
Add(' } ');
Add(' }, ');
Add(' errorCallback: function (e) { ');
// If there is an error, alert the user about it.
Add(' alert("No results found."); ');
Add(' } ');
Add(' }; ');
//Make the geocode request.
Add(' searchManager.geocode(searchRequest); ');
Add(' } ');
Add(' } ');
Add(' </script> ');
Add(' <script type="text/javascript" src="/BingMapsCredentials.js"></script> ');
Add(' <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=GetMap" async defer></script> ');
Add('</head> ');
Add('<body style="width:100%;height:100%"> ');
Add(' <div id="TitleDiv" style="padding-bottom: 15px; ');
Add(' padding-top: 5px; ');
Add(' font-family: Arial, Helvetica, sans-serif; ');
Add(' font-size: 14px; ');
Add(' font-weight: bold; ');
Add(' position:relative;">' + sCaption + '</div> ');
Add(' <div id="myMap" style="width:100vw;height:95vh;position:relative;"></div> ');
Add('</body> ');
Add('</html> ');
sTempFile := GetLocalAppDir + 'mymap.html';
if fileExists(sTempFile) then DeleteFile(sTempFile);
savetofile(sTempFile);
mMap.free;
end;
ChromWebPage.DefaultUrl := sTempFile;
ChromWebPage.Browser.MainFrame.LoadUrl(sTempFile);
ChromWebPage.Browser.Reload;
Upgrading to latest version of DCEF3 resolved the issue. Suspecting that the scripts were incompatible with the older DCEF3.
Related
I have the following code and I want to add different text in each of the icons. Example for the location "Quebec" it should be entered "08h00" for "Beaupre" .. "15h00" etc..
<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
<script type="text/javascript">
window.onload = function() {
L.mapquest.key = '';
// Geocode three locations, then call the createMap callback
L.mapquest.geocoding().geocode(['Quebec,Qc', 'Beaupre,Qc', 'Montmagny,Qc'], createMap);
function createMap(error, response) {
// Initialize the Map
var map = L.mapquest.map('map', {
layers: L.mapquest.tileLayer('map'),
center: [0, 0],
zoom: 12
});
// Generate the feature group containing markers from the geocoded locations
var featureGroup = generateMarkersFeatureGroup(response);
// Add markers to the map and zoom to the features
featureGroup.addTo(map);
map.fitBounds(featureGroup.getBounds());
}
function generateMarkersFeatureGroup(response) {
var group = [];
for (var i = 0; i < response.results.length; i++) {
var location = response.results[i].locations[0];
var locationLatLng = location.latLng;
// Create a marker for each location
var marker = L.marker(locationLatLng, {icon: L.mapquest.icons.flag()})
.bindPopup(location.adminArea5 + ', ' + location.adminArea3);
group.push(marker);
}
return L.featureGroup(group);
}
}
</script>
</head>
<body style="border: 0; margin: 0;">
<div id="map" style="width: 100%; height: 530px;"></div>
</body>
</html>
Could anyone help me please ?
Thanks.
Try setting the symbol for the flag like icon: L.mapquest.icons.flag({symbol:"08h00"})
More details here: https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/
What am I doing wrong? The intent is to have a few (say 6) leafletjs panes, each containing many markers and polylines, so the panes can be hidden independently. Here is a simplified program showing just two lines and markers in jsfiddle. The problem is, the polylines all get grouped in the same SVG and all get hidden together. Each pane in the example should show one polyline and one marker.
I don't want to remove the polylines from the map to hide them, then recreating them would not perform well.
If needed, the polylines could be drawn using D3 on top of the leaflet map but I was hoping it could all be done in leaflet.
Thanks!
JS:
'use strict';
document.addEventListener("DOMContentLoaded", function(event) {
var map = L.map('map').setView([30.5, -0.09], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var pane1 = map.createPane('pane1');
var pane2 = map.createPane('pane2');
function hide(pane) {
pane.style.display = 'none';
}
function show(pane) {
pane.style.display = '';
}
let icon = new L.Icon.Default();
function dr(pane, latlng){
L.polyline([[45.421, -75.697], latlng], {
weight: 2,
pane: pane
}).addTo(map);
L.marker(latlng, {
icon: icon,
pane: pane
}).addTo(map);
}
// define two locations with lines from Ottawa
dr(pane1, [ 42.3732216, -72.5198537 ]);
dr(pane2, [ 35.9606384, -83.9207392 ]);
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function loop(){
for( var i = 0; i<100; i++){
hide(pane1);
show(pane2);
await sleep(1000);
hide(pane2);
show(pane1);
await sleep(1000);
}
}
loop();});
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js" integrity="sha256-wc8X54qvAHZGQY6nFv24TKlc3wtO0bgAfqj8AutTIu0=" crossorigin="anonymous"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
<script src="c.js"></script>
Sheets and Range Selection
When I am trying to run below code with Sheets Range "A:B" it works and when selecting "E:F" it's throwing an Error.
Please refer the the image for sample data and the spreadsheet is made accessible for checking the data.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Excel Pull Test</title>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
// google.charts.load('current', {'packages':['corechart']});
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawSheetName);
// Load the Visualization API and the corechart package.
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawSheetName);
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A:B10');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/edit#gid=0&headers=1&tq='+queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
in the url for the sheet,
change --> edit# -- to --> gviz/tq?
as in...
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/gviz/tq?gid=0&headers=1&tq='+queryString);
this will let you select specific columns...
see following working snippet, which only selects column A...
google.charts.load('current', {
packages:['table']
}).then(drawSheetName);
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/gviz/tq?gid=0&headers=1&tq='+queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
ALSO, you're using an old version of google charts.
jsapi should no longer be used, see update library loader code,
this will only change the load statement.
from...
<script src="https://www.google.com/jsapi">
google.load('visualization', '1.0', {packages: ['corechart']});
google.setOnLoadCallback(drawSheetName);
to...
<script src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawSheetName);
I am having lots of problem accessing any objects from a Yahoo Boss YQL Json Response data. I used this YQL Console for Boss Search Tables.
Here is what I have done:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20boss.search%20where%20service%20%3D%22images%22%20AND%20count%3D%221%22%20AND%20q%3D%22iphone6%22%20AND%20ck%20%3D%20%22MYCONSUMER_KEY%22%20AND%20secret%3D%22MYCONSUMER_SECRET%22%3B&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
(function showPix()
{
$.getJSON(url, function (data)
{
console.log(data);
var myObj = data.results.bossresponse.images.results.result.clickurl;
$.each(myObj, function ()
{
$('#pix').append(this);
});
});
})();
</script>
</head>
<body>
<div id="pix">
</div>
<button onclick="showPix();">run</button>
</body>
</html>
The console.log(); gives me one object that contains the image, but I cannot manage to show the image on the screen. And it tells me that showPix is undefined. Any help would be greatly appreciated. TIA
I figured this out as follows:
<html>
<head><title>YQL and RSS: Yahoo Top News Stories</title>
<style type='text/css'>
#results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; }
</style>
<script type='text/javascript'>
// Parses returned response and extracts
// the title, links, and text of each news story.
function top_stories(o){
var items = o.query.results.item;
var output = '';
var no_items=items.length;
for(var i=0;i<no_items;i++){
var title = items[i].title;
var link = items[i].link;
var desc = items[i].description;
output += "<h3><a href='" + link + "'>"+title+"</a></h3>" + desc + "<hr/>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<!-- Div tag for stories results -->
<div id='results'></div>
<!-- The YQL statment will be assigned to src. -->
<script src='https://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=top_stories'></script>
</body>
I am trying to render a jqPlot bar chart using asp.net MVC. Not sure how to build an array on the client side using the data returned from a controller.
I am trying to which is similar to this, http://jsfiddle.net/du8GZ/
#foreach (var d in Model.SampleChart)
{
// What to write here?
}
public class SampleChart
{
public int Count { get; set; }
public string Name { get; set; }
}
public ActionResult BarIn()
{
List<SampleChart> data = new List<SampleChart>();
SampleChart bar;
Random r = new Random();
for (int i = 0; i < 10; i++)
{
bar = new SampleChart();
bar.Count = i;
bar.Name = "Sample " + i.ToString();
data.Add(bar);
}
return View(data);
}
<link class="include" rel="stylesheet" type="text/css" href="#Url.Content("~/scripts/jqplot/css/jquery.jqplot.min.css")" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="#Url.Content("~/scripts/jqplot/excanvas.min.js")"></script><![endif]-->
<script type="text/javascript" src="#Url.Content("~/scripts/jqPlot/jquery.jqplot.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jqplot/jqplot.categoryAxisRenderer.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jqPlot/jqplot.barRenderer.min.js")"></script>
<div class="example-content">
<!-- Example scripts go here -->
<style type="text/css">
.jqplot-target
{
margin: 30px;
}
.tooltipCss
{
position: absolute;
background-color: #b2b1ac;
color: White;
z-index: 200;
padding: 5px;
border-radius: 5px;
display: none;
}
</style>
<div id="chart2" class="plot" ></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var data = new Array();
var series = new Array();
#foreach (var d in Model.SampleChart)
{
}
plot2 = $.jqplot('chart2', data, {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 10,
barMargin: 15
}
},
series: series,
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
$('#chart2').bind('jqplotDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
//$('#info2').html('series "' + series[seriesIndex].label + '" point "' + (pointIndex + 5) + '"<br /> value "' + data[1] + '"');
//$('#info2').css({ "left": ev.pageX + 3, "top": ev.pageY })
$('#info2').show();
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').hide();
}
);
});
</script>
<div id="info2" class="tooltipCss"></div>
The array on your client side is actually represented in JSON so all you have to do is create a view model that will hold a representation of your array and dump it in a hidden field as JSON ... like this:
#Html.Hidden("BarGraphData",Json.Encode(Model.BarGraphData))
and then use jQuery to send the data to jqPlot like that:
var columnChartData = $.parseJSON($('#BarGraphData').val());
var plot2 = $.jqplot('chart1', columnChartData ,{....