How can I display two Infowindow on my map.
in my code I can open only one InfoWindow, but I will display at same time twoo InfoWindow on my map what can I do. my code is:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng( 38.736946, 35.310059), 6);
map.openInfoWindow(new GLatLng( 38.582526, 42.846680),
document.createTextNode("Van Gölü"));
}
}
The Google Maps API v2 native InfoWindow only supports one per map. The Google Maps API v3 removes that limitation.
Either use a custom InfoWindow or migrate your application to the Google Maps API v3.
As #duncan observed, that Google Maps API v2 has been officially deprecated as of May 19, 2010 and will not be supported after May 19, 2013. New development in that API is strongly discouraged.
this code is working :
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.078908,35.244141),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
infoWindow = new google.maps.InfoWindow();
var windowLatLng = new google.maps.LatLng(38.668356,33.376465);
infoWindow.setOptions({
content: "Tuz Golu",
position: windowLatLng,
});
infoWindow.open(map);
infoWindow2 = new google.maps.InfoWindow();
var windowLatLng2 = new google.maps.LatLng(38.565348,42.868652);
infoWindow2.setOptions({
content: "Van Golu",
position: windowLatLng2,
});
infoWindow2.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:65%; height:40%"></div>
</body>
</html>
Related
I was following this tutorial
(https://learn.microsoft.com/en-us/learn/modules/create-your-first-iot-central-app/)
In unit 4, I followed all the steps but what I could see was just a blank page like this
Unit 4 exercise result
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
<script>
function GetMap() {
//Instantiate a map object
var map = new atlas.Map("myMap", {
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'mB~~~~~~(I wrote my maps primary key here)'
}
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>
Azure Maps Resource
This feedback page also doesn't work...
(https://feedback.azuremaps.com/)
Feedback Maps
Also, in this website, when I press "Open In New Tab", I cannot see anything...
(https://azuremapscodesamples.azurewebsites.net/)
Code samples Maps
I had spent almost 4 hours but couldn't find out the solution...
What should I need to do to see proper Maps on those pages?
If all the different sites that use Azure Maps doesn't work for you its likely one of the following reasons:
Make sure you are in a supported region. Azure Maps is not available to users who are located in China or South Korea, and the requests to the platform are actively blocked.
You are using an unsupported browser: https://learn.microsoft.com/en-us/azure/azure-maps/supported-browsers
WebGL is either disabled in your browser, or isn't working. Try this sample: https://azuremapscodesamples.azurewebsites.net/Map/Detect%20if%20browser%20is%20supported.html
Your graphic card has issues, try updating the drivers.
check how the map starts
$(document).ready(function () {
InitMap();
});
function InitMap() {
var map = new atlas.Map('myMap', {
center: [-73.98235, 40.76799],
zoom: 10,
language: 'en-US',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'key1*****'
}
});
}
$(document).ready(function () {
InitMap();
});
I'm actually using node js and html-pdf lib to generate a pdf on the server which is return as a blob to the client. When I did it on my local machine everything is fine but when I upload it to the server and test it out. The text size increases when in production.
I've created a function that takes an object as a parameter:
async function generatePDF(object) {
let htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body,
html {
font-family: arial, sans-serif;
color: rgb(46, 46, 46);
}
</style>
</head>
<body>
<br />
Date: ${object.todayDate}
<div style="margin-top: 60px">
<h3 style="border-top: 1px solid black">Dr. ${object.name} ${object.firstname}</h3>
</div>
</html>
`;
Down below is the code to generate PDF from the HTML file created:
let sideMargin = "1.5cm";
var options = {
format: "A5",
border: {
top: "1.5cm", // default is 0, units: mm, cm, in, px
right: sideMargin,
bottom: "3.0cm",
left: sideMargin,
},
};
console.log(options);
var path = require("path");
var appDir = path.dirname(require.main.filename);
let date = Date.now();
let newPDF = `${appDir}/files/${date}new.pdf`;
let newHTML = `${appDir}/files/${date}new.html`;
htmlData["fileName"] = newHTML;
console.log(`Generating new PDF '${newPDF}`);
await generatePDF(htmlData);
var html = fs.readFileSync(`${newHTML}`, "utf8");
pdf.create(html, options).toFile(`${newPDF}`, function (err, res) {
if (err) return console.log(err);
console.log(res);
r.sendFile(`${newPDF}`, (error) => {
if (!error) {
fs.unlinkSync(`${newPDF}`);
fs.unlinkSync(`${newHTML}`);
}
});
});
The problem is that locally on my machine everything is fine, but online the text size of the PDF is way bigger, and instead of returning one page it's returning back two pages (of course the content I've set here in the HTML is not the result I want, it is just an example).
Hey i've found what was the problem,
there is no solution to this problem yet. The work around is to add
html {
zoom: 0.55;
}
to the CSS file/code
There's actually an open issue for this.
Kinetic Text object have left,right,center (http://kineticjs.com/docs/Kinetic.Text.html) align possible. Is there some way to achieve justified text ?
KineticJS is based on the html canvas element and canvas does not offer text justification.
You could construct your own text justification routine using canvas's context.measureText to measure the width of each word and fill each line of text in a justified pattern.
Example code and a Demo: http://jsfiddle.net/m1erickson/c7dwC/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
function Justifier(text,font,linewidth,lineheight){
//
this.font=font;
this.lorem=text;
this.maxLineWidth=linewidth;
this.lineHeight=lineheight;
//
this.canvas=document.createElement("canvas");
this.ctx=this.canvas.getContext("2d");
this.aLorem=this.lorem.split(" ");
this.aWidths=[];
this.spaceWidth;
//this.run();
}
Justifier.prototype.run=function(){
this.ctx.save();
this.ctx.font=this.font;
spaceWidth=this.ctx.measureText(" ").width;
for(var i=0;i<this.aLorem.length;i++){
this.aWidths.push(this.ctx.measureText(this.aLorem[i]).width);
}
this.ctx.restore();
//
var justifiedLines=[];
var startingIndex=0;
do{
var line=this.justifyLine(startingIndex);
justifiedLines.push(line);
startingIndex=line.endingIndex+1;
}while(startingIndex<this.aLorem.length-1);
//
this.canvas.width=this.maxLineWidth;
this.canvas.height=justifiedLines.length*this.lineHeight+5;
this.ctx.font=this.font;
for(var i=0;i<justifiedLines.length;i++){
this.drawJustifiedLine(justifiedLines[i],i*this.lineHeight+this.lineHeight);
}
}
Justifier.prototype.justifyLine=function(startingIndex){
var accumWidth=0;
var accumWordWidth=0;
var padding=0;
var justifiedPadding;
var index=startingIndex;
while(index<this.aLorem.length && accumWidth+padding+this.aWidths[index]<=this.maxLineWidth){
accumWidth+=padding+this.aWidths[index];
accumWordWidth+=this.aWidths[index];
padding=spaceWidth;
index++;
};
if(index<this.aWidths.length-1){
index--;
justifiedPadding=(this.maxLineWidth-accumWordWidth)/(index-startingIndex);
}else{
justifiedPadding=(this.maxLineWidth-accumWordWidth)/(index-startingIndex-1);
}
return({
startingIndex:startingIndex,
endingIndex:index,
justifiedPadding:justifiedPadding}
);
}
Justifier.prototype.drawJustifiedLine=function(jLine,y){
var sp=jLine.justifiedPadding;
var accumLeft=0;
for(var i=jLine.startingIndex;i<=jLine.endingIndex;i++){
this.ctx.fillText(this.aLorem[i],accumLeft,y);
accumLeft+=this.aWidths[i]+sp;
}
}
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var font="14px verdana";
var text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
var J=new Justifier(text,font,250,18);
J.run();
var textImage=new Kinetic.Image({
x:20,
y:20,
image:J.canvas,
draggable:true,
});
layer.add(textImage);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<h4>KineticJS Justified Text</h4>
<div id="container"></div>
</body>
</html>
I have 2 Dojo Dijit ContentPane's side by side. I want to show/hide one of them, and have the other one stretch dynamically as needed. I am using an ESRI mapping example which uses 'dijit.layout.BorderContainer'. The "divRightMenu" will show/hide itself correctly, but, when opened, rather than pushing the "mapDiv" Div, it just appears on top of it. I want the "mapDiv" div to dynamically resize itself depending on the visible state of the "divRightMenu" div.
I'm including the full page code below - I have already experimented with style.Display = Block / None, style.Visibility = Visible/Hidden, as well as trying to dynamically set the width of divRightMenu from 1 pixel to 150 pixels. In all cases, divRightMenu appears "on top of" mapDiv, rather than "pushing" it like I want. If I change the code so that divRightMenu is visible by default on page load, then what happens when i hide it is it disappears, but the blank spot it once occupied still remains. Surely this is something simple I'm missing?
In the past (standard CSS), I would combine "float:left/right" with "overflow:hidden", and display:block/none, and could easily achieve the effect I'm after, but with Dojo/Dijit i'm not sure what i'm missing. I experimented with various combinations of float/overflow on the inline styling of the 2 DIV tags in question, but was unable to get it to work. I also noted that one poster mentioned that he programmatically created his dijit ContentPanes on the fly to overcome the issue, but I was hoping for a solution other than this (i need all the settings from the div's content to be retained between showing/hiding the div, and i'm not sure if re-creating it on the fly will allow for this).
Here are the 2 threads I found that touch on the topic:
Dojo Toggle Hide and Show Divs
Toggling the display of a Dojo dijit
These mainly deal with being able to hide the div or not. In my case I'm able to hide/show it, but just not able to get the desired auto-resize behavior from the remaining DIV.
In any case, full code sample is included below - any help would be appreciated:
Main Index.htm Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
}
function ToggleVisibility(id)
{
//if (dijit.byId(id).domNode.style.width == '150px') {
if (dijit.byId(id).domNode.style.display == 'block') {
dijit.byId(id).domNode.style.display = 'none';
//dijit.byId(id).domNode.style.width = "1px";
//dojo.style(id, "visibility", "hidden");
}
else {
//dijit.byId(id).domNode.style.width = "150px";
dijit.byId(id).domNode.style.display = 'block';
//dojo.style(id, "visibility", "visible");
}
dijit.byId(id).resize();
//dijit.byId("mapDiv").resize();
}
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script src="layout.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
<!--TOPMOST LAYOUT CONTAINER-->
<div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
<!--HEADER SECTION-->
<div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top">
<div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top">Logo Here</div>
<div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top">Menu Here | <input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/></div>
</div>
<!--CENTER SECTION-->
<!--CENTER CONTAINER-->
<div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"></div>
<!--RIGHT CONTAINER-->
<div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right">
Right Menu
</div>
<!--FOOTER SECTION-->
<div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
Footer Here
</div>
</div>
</body>
</html>
layout.js Code:
dojo.require("esri.map");
var resizeTimer;
var map;
function init() {
var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
wkid: 4326
}));
map = new esri.Map("mapDiv", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
resizeMap();
});
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
//show map on load
dojo.addOnLoad(init);
layout.css Code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#FFF;
color:#999;
font-size:16pt;
font-weight:bold;
}
#headerArea {
text-align:left;
}
#navMenuArea {
text-align:right;
/*background:url(toolbar_bg.png) repeat #6788a2;*/
}
#topmenu {
background-color:#FFF;
color:#999;
font-size:16pt;
text-align:right;
font-weight:bold;
}
#footer {
background-color:#FFF;
color:#999;
font-size:10pt;
text-align:center;
}
Use a dijit/layout/BorderContainer, place the 2 contentpanes inside it, setting one of the 2 containers' region property to "center" and the other one to "right".
When you want to resize one of the contentpanes, call their "resize" method with an object containing the "w" property.
After calling resize on the contentpane, call "layout" on the border container.
Example :
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
var container = new BorderContainer({
design : "headline",
gutters : false
}, "container");
var pane1 = new ContentPane({
region : "center",
id : "pane1"
});
var pane2 = new ContentPane({
region : "right",
id : "pane2"
});
var toolbar = new ContentPane({
region : "bottom",
id : "toolbar"
});
var btn = new Button({
label : "Change right side",
onClick : function(){
pane2.resize({ w : Math.random() * pane2.get("w") });
container.layout();
}
});
toolbar.addChild(btn);
container.addChild(pane1);
container.addChild(pane2);
container.addChild(toolbar);
container.startup();
});
See this fiddle : http://jsfiddle.net/psoares/vEsy7/
Do anyone of You guys know if it is possible to change default size of SmartPortal based on url (webpage) size? Default it is 1/3 of screen width and 250px height.
Is it possible to change it to take whole screen width and other height?
Mayby I must create a SmartPortal plugin for that or manipulate webpage DOM?
Any advice will be helpfull :)
I've figured it out (thanks to ShankarSangoli).
I used jQuery to modify iframe height.
Whole dashboard is just a html table, so using some selectors I was able to change iframe height.
This is my code:
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'Name of SmartPortal';
//function usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
But there are some limitations!!! The html page used by SmartPortal must be in the same domain as Pivotal (JavaScript security limitations) so I saved my document on local drive and used relative URL in SP properties.
If You want to use webpage outside domain just create a html document containing iframe with target URL and load it into Pivotal.
Like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'SP name;
//usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
height: 100%;
}
iframe {
display:block;
width:100%;
border:none;
}
</style>
</head>
<body>
<iframe src="http://www.yoursite.com"></iframe>
</body>
I hope that it will be helpful for anyone :)