<!DOCTYPE html>
<html>
<head>
<title>SPIA positions</title>
<style type="text/css">
html,
body,
#basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="OpenStreetMaps/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position1 = new OpenLayers.LonLat(29.856919813673, 30.6698231962015).transform(fromProjection, toProjection);
//this initial size of the popup appears to be infinite in one dimension
var popup1 = new OpenLayers.Popup("popup1", position1, new OpenLayers.Size("20121210_5"), "20121210_6", false);
var position2 = new OpenLayers.LonLat(29.8555655833635, 30.6691027291649).transform(fromProjection, toProjection);
var popup2 = new OpenLayers.Popup("popup2", position2, new OpenLayers.Size(100, 20), "20121210_7", false);
var position3 = new OpenLayers.LonLat(29.8536289031314, 30.6680431519365).transform(fromProjection, toProjection);
var popup3 = new OpenLayers.Popup("popup3", position3, new OpenLayers.Size(50, 20), "20121210_8", false);
var CenterPosition = new OpenLayers.LonLat(29.8513532832137, 30.6614234181425).transform(fromProjection, toProjection);
var zoom = 16;
map.addLayer(mapnik);
map.setCenter(CenterPosition, zoom);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
Marker1 = new OpenLayers.Marker(position1);
Marker1.icon.imageDiv.title = "20121210_6";
markers.addMarker(Marker1);
popup1.updatesize;
map.addPopup(popup1);
Marker2 = new OpenLayers.Marker(position2);
Marker2.icon.imageDiv.title = "20121210_7";
markers.addMarker(Marker2);
popup2.setContentHTML("20121210_5");
//popup2.setSize("20121210_5");
//popup2.autosize =true;
//popup2.maxSize = new OpenLayers.Size(100,20);
popup2.maxSize = new OpenLayers.Size(100, 20);
popup2.setSize(new OpenLayers.Size('20121210_5));
//popup2.updatesize;
//popup2.maxSize = new OpenLayers.Size(100,20);
map.addPopup(popup2); Marker3 = new OpenLayers.Marker(position3); Marker3.icon.imageDiv.title = "20121210_8"; markers.addMarker(Marker3); popup3.autosize = true; popup3.updatesize; map.addPopup(popup3);
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>
Wrapping the text worked for me:
var popup2 = new OpenLayers.Popup("popup2",position2,new OpenLayers.Size('<div class="ol-popup"><p>20121210_5<\/p><\/div>'),"20121210_7",false);
Related
Making a voice recorder visualizer and I'm just about finished but there's one thing, After I stop the recording, the values in mic.getLevel() do not go back to 0 but instead it seems like the last value that was recorded in mic.getLeve() is stored permanently and added to the height of my ellipse so the ellipse would then have a height of some value rather than 0 which it started with, is there anyway to fix this?
var recordAudio;
function setup() {
createCanvas(windowWidth, windowHeight);
recordAudio = new AudioFile()
}
function draw() {
background(0);
recordAudio.draw();
recordAudio.setup();
recordAudio.drawBorder();
recordAudio.drawNode();
}
function AudioFile() {
this.nodes = [];
var speed = 2;
var endBorder;
var mic = new p5.AudioIn();
var micLevel;
var level;
var recorder = new p5.SoundRecorder();
var soundFile = new p5.SoundFile();
var button = createButton('Start Recording');
var state = 0;
this.draw = function() {
background(0);
level = mic.getLevel();
micLevel = floor(map(level, 0, 0.6545, 0, 50));
}
this.drawNode = function() {
if (frameCount % 5 == 0) {
this.addNode()
}
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i]
for (var j = 0; j < node.length; j++) {
fill(255);
node[j].x -= speed;
ellipse(node[j].x, node[j].y, node[j].width, node[j].height)
}
if (node[0].x < endBorder) {
this.nodes.splice(i, 1);
}
}
}
this.drawBorder = function() {
var x = windowWidth / 9;
var y = windowHeight / 10;
var width = (windowWidth / 9) * 7;
var height = windowHeight - y * 2;
stroke(255);
strokeWeight(2);
noFill();
rect(x, y, width, height);
}
this.addNode = function() {
this.nodes.push(
[{
x: ((windowWidth / 9) * 8) - 10,
y: windowHeight / 2,
width: 5,
height: 5 * micLevel
}])
}
this.setup = function() {
endBorder = windowWidth / 9 + 5;
mic.start();
recorder.setInput(mic);
button.position(windowWidth / 9, windowHeight / 10);
button.style('font-size', '18px');
button.mousePressed(this.recording)
}
this.recording = function() {
if (state === 0 && mic.enabled) {
button.html("Stop Recording");
getAudioContext().resume()
recorder.record(soundFile);
state++
} else if (state === 1) {
button.html("Start Recording");
getAudioContext().suspend();
recorder.stop();
state++;
} else if (state === 2) {
save(soundFile, 'Sound.wav');
state = 0;
}
}
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="p5.min.js"></script>
<script src="p5.dom.js"></script>
<script src="p5.sound.js"></script>
<script src="sketch.js"></script>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="Button">
</div>
</body>
</html>
I ended up making a global variable called listening and used that in an if statement in draw to set the level to either mic.getLevel() or 0 based on if listening is true or false.
I have a html file draw a donut chart by canvas like below (it not done yet) and I want to convert it to pdf:
<!DOCTYPE html>
<html>
<head>
<title>Blayn-report</title>
<style>
</style>
</head>
<body>
<canvas id="chart" width="500" height="500" style="background-color:white"> </canvas>
<script>
var canvas = document.getElementById("chart");
var chart = canvas.getContext("2d");
function drawdountChart(canvas) {
this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
this.set = function (x, y, radius, from, to, lineWidth, strockStyle) {
this.x = x;
this.y = y;
this.radius = radius;
this.from = from;
this.to = to;
this.lineWidth = lineWidth;
this.strockStyle = strockStyle;
}
this.draw = function (data) {
canvas.beginPath();
canvas.lineWidth = this.lineWidth;
canvas.strokeStyle = this.strockStyle;
canvas.arc(this.x, this.y, this.radius, this.from, this.to);
canvas.stroke();
var numberOfParts = data.numberOfParts;
var parts = data.parts.pt;
var colors = data.colors.cs;
var df = Math.PI * 1.5;
for (var i = 0; i < numberOfParts; i++) {
canvas.beginPath();
canvas.strokeStyle = colors[i];
canvas.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * (parts[i] / 100));
canvas.stroke();
df += (Math.PI * 2) * (parts[i] / 100);
}
}
}
var data =
{
numberOfParts: 2,
parts: { "pt": [45, 55] },//percentage of each parts
colors: { "cs": ["green", "yellow"] }//color of each part
};
var drawDount = new drawdountChart(chart);
drawDount.set(150, 150, 100, 0, Math.PI * 2, 30, "#fff");
drawDount.draw(data);
</script>
</body>
</html>
When I try to convert it using html2pdf 3.0.4, the output file was empty. But when I change the html file to simple file with only text and no js, it work fine.
So my question is:
Does html2pdf can convert complex file with js?
If html2pdf can't convert complex file, which library should I use to do that? I have already think about write the pdf file my self but it will be very complex. Any other suggestion solution about this will be very helpful.
Thanks in advance!!!
I have a site that uses both Bing and Google maps. Each function has a Bing and Google version. I am having trouble duplicating the google.maps.geometry.poly.containsLocation function in Bing maps. Is there such a thing?
Basically I build a polygon and am looking to determine if a pushpin is located inside the polygon on the map.
Bing Maps V8 has a Spatial Math module which can do this calculation for you easily using the intersects function:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function load() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'YOUR BING MAPS KEY'
});
//Create a polygon and location for testing.
var center = map.getCenter();
var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.05),
new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.05),
new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.05)], { fillColor: 'yellow', strokeColor: 'orange',
strokeThickness: 5, strokeDashArray: [1, 2, 5, 10] });
map.entities.push(polygon);
var location = new Microsoft.Maps.Location(center.latitude, center.longitude);
//Load the Spatial Math module
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
//Check to see if the shapes intersect.
var intersects = Microsoft.Maps.SpatialMath.Geometry.intersects(location, polygon);
if(intersects){
alert("The location is inside in the polygon");
} else {
alert("The location is NOT inside in the polygon");
}
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=load' async defer></script>
</body>
</html>
You can add your own method to do so using the extensibility of Bing Maps AJAX control. You can put that extension method on the Microsoft.Maps.Location class.
Microsoft.Maps.Location.prototype.IsInPolygon=function(polygon)
{
var isInside = false;
var j = 0;
var x = this.longitude;
var y = this.latitude;
var paths = polygon.getLocations();
for (var i = 0; i < paths.length ; i++) {
j++;
if (j == paths.length) { j = 0; }
if (((paths[i].latitude < y) && (paths[j].latitude >= y)) || ((paths[j].latitude < y) && (paths[i].latitude >= y))) {
if (paths[i].longitude + (y - paths[i].latitude) / (paths[j].latitude - paths[i].latitude) * (paths[j].longitude - paths[i].longitude) < x) {
isInside = !isInside
}
}
}
return isInside;
};
Here is a working example with Bing Maps V8:
<!DOCTYPE html>
<html>
<head>
<title>Bing Maps - V8 - Polygon test</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function load() {
Microsoft.Maps.Location.prototype.IsInPolygon=function(polygon)
{
var isInside = false;
var j = 0;
var x = this.longitude;
var y = this.latitude;
var paths = polygon.getLocations();
for (var i = 0; i < paths.length ; i++) {
j++;
if (j == paths.length) { j = 0; }
if (((paths[i].latitude < y) && (paths[j].latitude >= y)) || ((paths[j].latitude < y) && (paths[i].latitude >= y))) {
if (paths[i].longitude + (y - paths[i].latitude) / (paths[j].latitude - paths[i].latitude) * (paths[j].longitude - paths[i].longitude) < x) {
isInside = !isInside
}
}
}
return isInside;
};
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'YOUR KEY'
});
var center = map.getCenter();
var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.05),
new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.05),
new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.05)], { fillColor: 'yellow', strokeColor: 'orange',
strokeThickness: 5, strokeDashArray: [1, 2, 5, 10] });
map.entities.push(polygon);
var location = new Microsoft.Maps.Location(center.latitude, center.longitude);
alert("The location is inside in the polygon : " + location.IsInPolygon(polygon));
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=load' async defer></script>
</body>
</html>
I am working on OSM using leaflet..I enable dragging:true on my destination marker as I need it to be draggable ,but while dragging marker my MAP also moves .Is there a way I can only move the marker.
$(document).ready(function()
{
homepg();
});
var cab_map = null;
function homepg()
{
var str = '';
var markers = new L.MarkerClusterGroup();
var lat = '19.068246';
var lng = '72.850638';
cab_map = ddmap.init('mapdivcab',[lat,lng],14);
ddmap.getDirection(13.039680,77.580214,13.040850,77.625532,cab_map,'lmenu');
}
getDirection: function(flat,flon,tlat,tlon,map,mapdv)
{
this.dirMap = map;
this.mapDiv = mapdv;
this.sourceLatLng = new L.LatLng(flat,flon);
this.targetLatLng = new L.LatLng(tlat,tlon);
if(this.fScript)
head.removeChild(fScript);
fScript = document.createElement('script');
fScript.setAttribute("type","text/javascript");
fScript.setAttribute("src", ddmap.serverUrl+"jsonp=ddmap.updateAddressFrom/nearbylocation/"+flat.toFixed(6).replace('.','')+"/"+flon.toFixed(6).replace('.','')+"/1?json_callback=%jsonp");
document.getElementsByTagName("head")[0].appendChild(fScript);
if(this.tScript)
head.removeChild(tScript);
tScript = document.createElement('script');
tScript.setAttribute("type","text/javascript");
tScript.setAttribute("src", ddmap.serverUrl+"jsonp=ddmap.updateAddressTo/nearbylocation/"+tlat.toFixed(6).replace('.','')+"/"+tlon.toFixed(6).replace('.','')+"/1?json_callback=%jsonp");
document.getElementsByTagName("head")[0].appendChild(tScript);
if(this.currentScript)
head.removeChild(currentScript);
currentScript = document.createElement('script');
currentScript.setAttribute("type","text/javascript");
currentScript.setAttribute("src", "viaroute?z=13&output=json&jsonp=ddmap.showRoute&loc="+flat+","+flon+"&loc="+tlat+","+tlon+"&instructions=true");
document.getElementsByTagName("head")[0].appendChild(currentScript);
}
showRoute: function(response) {
var geometry = this._decode(response.route_geometry, 6);
var route = new L.Polyline( [], {dashArray:""} );
route.setLatLngs( geometry );
var sIcon = L.icon({iconUrl:this.imageHost+"/images/marker-source.png",iconAnchor:[10,30],shadowUrl: this.imageHost+'/images/marker-shadow.png'});
var tIcon = L.icon({iconUrl:this.imageHost+"/images/marker-target.png",iconAnchor:[10,30],shadowUrl: this.imageHost+'/images/marker-shadow.png'});
mrkrSrc = L.marker(this.sourceLatLng, {icon: sIcon});
mrkrTgt = L.marker(this.targetLatLng, {icon: tIcon,draggable:'true'});
if(this.mainLayer)
this.dirMap.removeLayer(this.mainLayer);
this.mainLayer = L.layerGroup([mrkrSrc, mrkrTgt])
.addLayer(route)
.addTo(this.dirMap);
var bounds = new L.LatLngBounds(this.sourceLatLng, this.targetLatLng);
this.dirMap.fitBounds(bounds);
this.showRouteDesc(response,geometry);
//
mrkrTgt.on('drag', function(event){
var marker = event.target;
var dst = marker.getLatLng();
var src = mrkrSrc.getLatLng();
ddmap.getroute(src.lat,src.lng,dst.lat,dst.lng,cab_map,'lmenu');//instead of calling getDriection i m calling this function
});
//this function is same as getDirection but i have removed some code, thought that is not required and it was making 'drag event' rough and time taking
getroute: function(flat,flon,tlat,tlon,map,mapdv)
{
this.dirMap = map;
this.mapDiv = mapdv;
this.sourceLatLng = new L.LatLng(flat,flon);
this.targetLatLng = new L.LatLng(tlat,tlon);
if(this.currentScript)
head.removeChild(currentScript);
currentScript = document.createElement('script');
currentScript.setAttribute("type","text/javascript");
currentScript.setAttribute("src", "viaroute?z=13&output=json&jsonp=ddmap.showRoute&loc="+flat+","+flon+"&loc="+tlat+","+tlon+"&instructions=true");
document.getElementsByTagName("head")[0].appendChild(currentScript);
}
In my iOS app i want to display traffic information which is provided by google maps not by MKMapView..So i m using google maps api v3 but loading google maps api v3 maps in UIWebView causes memory leak.Specially when we zoom the Map and Click on satellite button.
Code --
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%;}
#route_table { height: 0%;}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var arrayInput = [];
var trafficLayer;
var map;
var markers = [];
var bounds;
var zoomWidth;
var alertBOOL;
function initialize() {
var txt = new String(%#);
arrayInput = txt.split(',');
//var latlng = new google.maps.LatLng(parseFloat(arrayInput[0]),parseFloat(arrayInput[1]));
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 5,
center: latlng,
disableDefaultUI:true,
streetViewControl:false,
backgroundColor: '#FFFFF',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
directionsDisplay.setMap(this.map);
directionsDisplay.suppressInfoWindows = true;
addTrafficButton();
addSatelliteButton();
calcRoute(arrayInput);
}
function calcRoute(inputArray) {
var i=0;
var wps = [];
var start;
var end;
var i = 0;
var j=0;
for(i=0;i<arrayInput.length-1;i=i+2)
{
if(i==0)
{
start = new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]);
this.map.center = start;
}
else if(i==(arrayInput.length-2))
{
end = new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]);
}
else
{
wps[j] = { location: new google.maps.LatLng(parseFloat(arrayInput[i]),arrayInput[i+1]) };
j++;
}
}
bounds = new google.maps.LatLngBounds(start,end);
this.map.fitBounds(bounds);
var request =
{
origin:start,
destination:end,
waypoints: wps,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(result);
}
});
}
function addTrafficButton()
{
var tbutton = document.createElement("button");
tbutton.innerHTML = "Traffic On";
tbutton.style.position = "absolute";
tbutton.style.bottom = "50px";
tbutton.style.right = "15px";
tbutton.style.zIndex = 10;
tbutton.style.width = "70px";
tbutton.style.height = "30px";
this.map.getDiv().appendChild(tbutton);
tbutton.className = "lolight";
tbutton.onclick = function() {
if (tbutton.className == "hilight") {
tbutton.innerHTML = "Traffic On";
this.trafficLayer.setMap(null);
this.trafficLayer = null;
tbutton.className = "lolight";
} else {
tbutton.innerHTML = "Traffic Off";
this.trafficLayer = new google.maps.TrafficLayer();
this.trafficLayer.setMap(this.map);
tbutton.className = "hilight";
}
}
}
function addSatelliteButton()
{
var sbutton = document.createElement("button");
sbutton.innerHTML = "Satellite";
sbutton.style.position = "absolute";
sbutton.style.bottom = "90px";
sbutton.style.right = "15px";
sbutton.style.zIndex = 10;
sbutton.style.width = "70px";
sbutton.style.height = "30px";
this.map.getDiv().appendChild(sbutton);
sbutton.className = "lolight";
sbutton.onclick = function() {
if (sbutton.className == "hilight") {
sbutton.innerHTML = "Satellite";
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
sbutton.className = "lolight";
} else {
sbutton.innerHTML = "Map";
sbutton.className = "hilight";
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
</html>
i think your issue can be solved using ARC into ios 5 .. it is best feature add by apple to into ios 5. it holds whole memory management into your app. Go with ARC it helps you lot.