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>
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!!!
<!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);
Please consider the following code http://jsfiddle.net/franckl/311bcbc8/
var southWest = L.latLng(-90, -180),
northEast = L.latLng(90, 180);
var bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {
minZoom: 2,
zoomControl: false,
attributionControl: false,
maxBounds: bounds
});
// Using cartoDB basemap
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
minZoom: 2,
subdomains: 'abcd',
detectRetina: true,
attribution: ''
}).addTo(map);
map.fitBounds(bounds);
var newMarker0 = L.marker(map.getCenter(), {
icon: new L.Icon.Default(),
zIndexOffset: 10000,
draggable: true
});
newMarker0.addTo(map);
html
<div id="mycontainer">
<div id="map"></div>
</div>
css
body {
margin:0;
padding:0;
}
#map {
position:absolute;
top:0;
bottom:0;
width:300px;
}
#mycontainer {
top: 10px;
width: 600px;
height: 250px;
position: relative;
}
If you drag the marker to the right, it leaves visible area of the map.
How can I prevent the user from dragging the marker outside the map ?
Thanks !
answering my own question in case it helps anyone.
We detect the map container size and check if the marker is going outside the visible area by converting its lat/lng coordinates to a container point (map.containerPointToLatLng(markerContainerPosition))
As a bonus, this code leaves the marker in the same position relative to the map container when the user moves the map. It ensures that the marker never goes outside the visible area (even when zooming)
var southWest = L.latLng(-90, -180),
northEast = L.latLng(90, 180);
var bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {
minZoom: 2,
zoomControl: false,
attributionControl: false,
maxBounds: bounds
});
// Using cartoDB basemap
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
minZoom: 2,
subdomains: 'abcd',
detectRetina: true,
attribution: ''
}).addTo(map);
map.fitBounds(bounds);
var newMarker0 = L.marker(map.getCenter(), {
icon: new L.Icon.Default(),
zIndexOffset: 10000,
draggable: true
});
newMarker0.addTo(map);
var mapSize = map.getSize();
var markerContainerPosition = map.latLngToContainerPoint(newMarker0.getLatLng());
function mapMove() {
newMarker0.setLatLng(map.containerPointToLatLng(markerContainerPosition));
}
function markerDrag(e) {
var mTempContainerPos = map.latLngToContainerPoint(newMarker0.getLatLng());
var newPos;
if (mTempContainerPos.x < 20) {
if (mTempContainerPos.y < 45) {
newPos = L.point(20, 45);
} else if (mTempContainerPos.y > (mapSize.y - 20)) {
newPos = L.point(20, mapSize.y - 20);
} else {
newPos = L.point(20, mTempContainerPos.y);
}
} else if (mTempContainerPos.x > mapSize.x - 20) {
if (mTempContainerPos.y < 45) {
newPos = L.point(mapSize.x - 20, 45);
} else if (mTempContainerPos.y > (mapSize.y - 20)) {
newPos = L.point(mapSize.x - 20, mapSize.y - 20);
} else {
newPos = L.point(mapSize.x - 20, mTempContainerPos.y);
}
} else {
if (mTempContainerPos.y < 45) {
newPos = L.point(mTempContainerPos.x, 45);
} else if (mTempContainerPos.y > (mapSize.y - 20)) {
newPos = L.point(mTempContainerPos.x, mapSize.y - 20);
}
}
if (newPos) {
markerContainerPosition = newPos;
newMarker0.setLatLng(map.containerPointToLatLng(newPos));
} else {
markerContainerPosition = mTempContainerPos;
}
}
map.on('move', mapMove);
newMarker0.on('drag', markerDrag);
A solution with slightly more generic code and tailored to dragging the marker rather than the map, but derivative of #Franckl's:
onMarkerDrag: function (event) {
// keep dragged marker within map bounds
var containerPoint = this.map.latLngToContainerPoint(event.target.getLatLng()),
clampX = null,
clampY = null,
MARKER_MARGIN = 10;
if (containerPoint.x - MARKER_MARGIN < 0) {
clampX = MARKER_MARGIN;
} else if (containerPoint.x + MARKER_MARGIN > this.mapContainerBounds.width) {
clampX = this.mapContainerBounds.width - MARKER_MARGIN;
}
if (containerPoint.y - MARKER_MARGIN < 0) {
clampY = MARKER_MARGIN;
} else if (containerPoint.y + MARKER_MARGIN > this.mapContainerBounds.height) {
clampY = this.mapContainerBounds.height - MARKER_MARGIN;
}
if (clampX !== null || clampY !== null) {
if (clampX !== null) { containerPoint.x = clampX; }
if (clampY !== null) { containerPoint.y = clampY; }
marker.setLatLng(this.map.containerPointToLatLng(containerPoint));
}
},
I derive this.mapContainerBounds once on map init instead of every time the drag handler fires (my map does not change size), like this:
this.mapContainerBounds = mapDOMNode.getBoundingClientRect();
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.