i have the following map of the world:
<!--
copyright (c) 2009 Google inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'Germany');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Canada');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'France');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'RU');
data.setValue(5, 1, 700);
var geomap = new google.visualization.GeoMap(
document.getElementById('visualization'));
geomap.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>
instead of displaying a map of the entire world i would like to know how to display just the US?
From your example, set the region option on the geomap:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
var geomap = new google.visualization.GeoMap(
document.getElementById('visualization'));
var options = { region: 'us_metro' };
geomap.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>
Not quite sure why you are setting the popularity of other countries to just center on the US though.
Related
In my application I want to open a new window (required) which loads following html file.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>billboard.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.3.0/billboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.3.0/billboard.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript">
$(window).load(function() {
// chart-1
var chart1 = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
]
},
bindto: "#LineChart-1"
});
// chart-2
var chart1 = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
]
},
bindto: "#LineChart-2"
});
});
</script>
</head>
<body>
<h2>billboard.js show hide points with multiple charts</h2>
<div class="container">
<h2>Graph-1</h2>
<div class="row">
<div class="col-md-12">
<div id="LineChart-1" class="bb" style="position: relative;">
<svg width="720" height="320" style="overflow: hidden; display: block;">
</div>
</div>
</div>
</body>
</html>
In the openWindow function i tried the following:
window = $window.open('', 'Test', 'width=500,height=400');
myWindow.document.write(ABOVE_HTML_FILE) *OR* myWindow.document.body.InnerHtml = ABOVE_HTML_FILE
Getting following error message:
A parser-blocking, cross site (i.e. different eTLD+1) script
So I tried replacing the script tags via
let script = window.document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
script.defer = true;
window.document.head.appendChild(script);
Now im getting the error:
$ is not defined -> Jquery is not available...
Any suggestions? I would really appreciate it
As per my comment:
Remove jQuery and the remove the onload handler. Move the inline javascript from the head into the body (just before the body closing tag).
If for some reason you really must use jQuery, you can:
Put the source inline
Host it on the same domain as were you call window.open
But ask yourself if you really need jQuery. Nowadays it's rarely ever needed. You can check here: http://youmightnotneedjquery.com/
I am trying to display the full map using leaflet.
Code Pen
I am trying to achieve the following via leaflet:
I thought using mymap.fitWorld() would achieve the effect but it is not.
You can provide minZoom and maxZoom levels to be 1 like this:
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
and then define setView as follows:
map.setView([0, 0], 0);
<!DOCTYPE html>
<html>
<head>
<title>Zoom Levels Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
var cartodbAttribution = '© OpenStreetMap contributors, © CartoDB';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', ).addTo(map);
map.setView([0, 0], 0);
</script>
</body>
</html>
How can I execute a joint.js program? I have downloaded the required js files and have saved the below below code in an HTML file. I tried opening in IE and Chrome, but it resulted in a blank page instead:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
You have to take care of the version of the decencies, check the versions in below image, or else use the below CDN.
<link rel="stylesheet" href="joint.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
Clone jointjs project from https://github.com/clientIO/joint.git. And Go to demo folder, open any html file in browser.
I think that will help you to start work with jointjs.
dependencies are
jquery.js
backbone.js
joint.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/paper.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/joint.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
I created a map with tilemill and then exctracted the tiles with MBUtil.
I'm able to show the tiles properly using Leaflet but i don't succeed using mapbox.js. I'm attaching the code , what I'm doing wrong??
Any help will be appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />-->
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
//var tilesUrl = 'http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa- redditi-2012/{z}/{x}/{y}.png',
//tilesLayer = new L.TileLayer(tilesUrl);
//map = new L.Map('map');
//map.addLayer(tilesLayer);
//map.setView(new L.LatLng(39.5,-5.0), 6);
var map = L.mapbox.map('map');
tilesLayer = new L.mapbox.TileLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi- 2012/{z}/{x}/{y}.png" ] ,
"attribution": "franco"
});
tilesLayer.addTo(map);
map.setView(new L.LatLng(39.5,-5.0), 6);
</script>
</body>
</html>
You can try this syntax
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
var map = L.mapbox.map('map');
L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png', {
"attribution": "franco"
}).addTo(map);
map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>
Thank you vey much Selim, it works!
I wanted to go a step forward adding interacativity (the map I created with tilemill is interactive) but I cannot see the tooltips! Perhaps I'm getting the wrong syntax again...
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
var map = L.mapbox.map('map');
//L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa- redditi-2012/{z}/{x}/{y}.png', {"attribution": "franco"}).addTo(map);
L.mapbox.tileLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png" ] }).addTo(map);
var myGridLayer = L.mapbox.gridLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.grid.json" ] }).addTo(map);
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>
As you may see below, I created the function getChart();
It works when called by itself, but does not display the chart when I wrap it into $(document).ready(function(){...});
I also attached the file..
Any help is highly valued and appreciated.. thanx..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getChart(){
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// Populate the data table.
var dataTable = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(dataTable, {legend:'none', width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
}
$(document).ready(function(){
$('#idbutton').click(function(){
getChart();
});
});
</script>
</head>
<body>
<input id="idbutton" type="button" value="button" />
<div id="visualization"></div>
</body>
</html>
Try to attach it to the window object.
Something like
$(document).ready(function(){
window.getChart = function() { //Code of getChart here };
});
And call it with:
$(document).ready(function(){
$('#idbutton').click(function(){
window.getChart();
});
});
Note: I did not test it.