Geodesic polygon on GoogleMaps - javascript

I am trying to show a geodesic polygon on GoogleMaps. I thought it is enough to just add geodesic:true to polygon options. But it is displayed linearly despite its huge size. Am I doing it wrong or it is not supported ?
<html>
<head>
<script src="https://maps.google.com/maps/api/js?v=3"></script>
<script>
window.onload = function() {
var map = new google.maps.Map(document.body, {zoom:9,center:{lat:49.8,lng:18.2}});
new google.maps.Polygon({geodesic:true,map:map,
path:[{lat:50,lng:18},{lat:49.3,lng:18.5},{lat:50,lng:19}]});
}
</script>
</head>
<body style="position:absolute;width:99%;height:99%">
</body>
</html>

seems you are to centerd try move the polygon near pole
window.onload = function() {
var map = new google.maps.Map(document.body, {zoom:9,center:{lat:49.8,lng:18.2}});
new google.maps.Polygon({geodesic:true,map:map,
path:[{lat:70.0,lng:18.0},{lat:70.0,lng:22.5},{lat:50.0,lng:22.5},{lat:50.0,lng:18.0 ]} );
}
(and as suugestion use float ever)

Related

Bing Maps v8 JS API

I have a very simple Bing maps program where I want to allow the user to draw one shape on the map, I've got the drawing tools and everything set up however Bing's events don't seem to fire in the correct way -
Drawing started - fires when I change my drawing tool to either a line or a polygon
Drawing Changed - fires when I change my drawing tool to either a line or a polygon
I simply want to clear the existing polygons from the map when I begin to draw a new polygon - however making a call to the getPrimitives function on the drawing manager clears the drawing mode, So then I thought about caching the drawing mode, reading the primitives to delete them and then resetting the drawing mode but then the setDrawingMode method on the drawing Manager calls the drawing started again which triggers the whole process again.
Does anyone know how to overcome this.
Does look odd that the drawing started event is firing when you click the mode. Will have the team look into that.
However, what you are trying todo would have some potential issues. If you clear the drawing manager when the user has started drawing a polygon on the map, that polygon will also be removed from the map as well. What you can do is when finished drawing a polygon, is move it to a separate layer, then you can clear that layer without effecting the drawing manager. If you are only interested in drawing polygons, you don't even need the drawing manager as you can handle this yourself using the drawing tools and a button. For example: http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CreateShape
Here is a code sample that achieves what you are asking using the drawing manager:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, baseLayer, drawingManager;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'YourBingMapsKey'
});
//Load the DrawingTools module
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create a base layer to add drawn shapes.
baseLayer = new Microsoft.Maps.Layer();
map.layers.insert(baseLayer);
//Create an instance of the DrawingTools class and bind it to the map.
var tools = new Microsoft.Maps.DrawingTools(map);
//Show the drawing toolbar and enable editting on the map.
tools.showDrawingManager(function (manager) {
drawingManager = manager;
Microsoft.Maps.Events.addHandler(drawingManager, 'drawingEnded', function (e) {
//When use finisihes drawing a shape, removing it from the drawing layer and add it to the base layer.
var shapes = drawingManager.getPrimitives();
if (shapes) {
drawingManager.clear();
baseLayer.add(shapes);
}
});
Microsoft.Maps.Events.addHandler(drawingManager, 'drawingChanging', function (e) {
//When the drawing is changing, clear the base layer.
baseLayer.clear();
});
})
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Here is a similar code sample that does this without the drawing manager and a custom button to start drawing a polygon.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, baseLayer, tools, currentShape;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'YourBingMapsKey'
});
//Create a base layer to add drawn shapes.
baseLayer = new Microsoft.Maps.Layer();
map.layers.insert(baseLayer);
//Load the DrawingTools module.
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create an instance of the DrawingTools class and bind it to the map.
tools = new Microsoft.Maps.DrawingTools(map);
Microsoft.Maps.Events.addHandler(tools, 'drawingChanging', function (e) {
//When the drawing is changing, clear the base layer.
baseLayer.clear();
});
//When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
document.getElementById('myMap').onkeypress = function (e) {
if (e.charCode === 27) {
tools.finish(shapeDrawn);
currentShape = null;
}
};
});
}
function drawPolygon() {
//Stop any current drawing.
if (currentShape) {
tools.finish(shapeDrawn);
currentShape = null;
}
//Create a new polygon.
tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) {
currentShape = s;
});
}
function shapeDrawn(s) {
baseLayer.add(s);
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div><br />
<input type="button" onclick="drawPolygon()" value="Draw Polygon" />
</body>
</html>

How to pass parameters to a JavaScript library and how to call it multiple times with different input sets on the same web page

I've been asked to modify some JavaScript code that looks something like this:
<html>
<head>
<script>
var text1="foo";
var text2="bar"
</script>
<script src="/process.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
This code takes inputs text1 & text2, does some image processing, and displays the resulting image in the div in the body. How can I modify it so that the JavaScript library can be called multiple times on different input values on the same HTML page, something (in effect) like the following:
<html>
<head>
<script>
var image_width=100;
var image_height=200;
</script>
<script>
var image_width=50;
var image_height=150;
</script>
<script src="/process.js"></script>
</head>
<body>
<div id="container"></div>
<div id="container"></div>
</body>
</html>
The code in process.js is something like this:
var cc1 = $('#canvas_container');
var ctx1 = cc1[0].getContext('2d');
function make_image(){
$('#container').width(image_width);
$('#container').height(image_height);
var cntnr = document.getElementById('container');
var c1 = document.createElement("canvas");
c1.width = image_width;
c1.height = image_height;
c1.id = "canvas_container";
cntnr.appendChild(c1);
// image generation code here
}
Thanks for your help!
(EDIT: wasn't this a Google Maps question, yesterday? If not, I should give another example)
Let me just show you how you can use parameters in functions.
Your example:
So, process.js contains the functions. Calling those functions, you do outside that file.
Notice: Your example doesn't show anything visible on the screen. But the two canvas elements are there.
The point is: anything that isn't general for all instances, you should put in a parameter.
index.php
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="process.js"></script>
<script>
window.onload = function() { // do this so the script waits until the page is loaded
// image1
make_image('container1', 'canvas1', 100, 200);
// image2
make_image('container2', 'canvas2', 50, 150);
}
</script>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
</body>
</html>
process.js
function make_image(container, canvas_id, width, height) {
$('#' + container).width(width);
$('#' + container).height(height);
var cntnr = document.getElementById(container);
var c1 = document.createElement("canvas");
c1.width = width;
c1.height = height;
c1.id = canvas_id;
cntnr.appendChild(c1);
// image generation code here
}
Google Maps example
So, anything about initialize() that is specific to 1 map, must be set in the parameters. Example: if you want a different zoom on map1/map2, put another parameter 'zoom', next to lng, and call one with zoom 18, one with zoom 15. Try it out.
<!doctype html>
<html>
<head>
<style>
#container1, #container2 {
width: 500px;
height: 400px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// http://stackoverflow.com/questions/30996197/how-to-pass-parameters-to-a-javascript-library-and-how-to-call-it-multiple-times?noredirect=1#comment50061772_30996197
// gets triggered twice, by page_is_loaded()
function initialize(container_id, lat, lng) {
var myLatlng = new google.maps.LatLng(lat, lng);
var mapProp = {
center: myLatlng,
zoom: 17,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map=new google.maps.Map(document.getElementById(container_id),mapProp);
return map; // by doing this, who ever calls this function has the map object, to do what ever one wants.
}
// gets triggered when the page is loaded
function page_is_loaded() {
var map1 = initialize('container1', 50.89515421660153, 4.341372907161713); // Atomium, Brussels, Belgium
var map2 = initialize('container2', 53.34184485510149, -6.286933958530426); // Guinness Storehouse, Dublin, Irish Republic
// let's put a marker on map1, at the atomium, on the parking lot, where I left my car
var marker_atomium = new google.maps.Marker({
position: new google.maps.LatLng(50.895783519434076, 4.339616060256958),
map: map1
});
}
// this triggers page_is_loaded(), to be triggered when the DOM of the page is loaded
google.maps.event.addDomListener(window, 'load', page_is_loaded);
</script>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
</body>
</html>

web chemdoodle custom mesh

I have downloaded the Chemdoodle web components from (web.chemdoodle.com)
Below is the working sample code I have taken from the site. I want to understand the _Mesh class from the API and how to create my own Mesh and put it over that molecule. Maybe a box first or something similar but without the box function (as later I want to change the box in the custom mesh with alternate vertices and faces)
<html>
<head>
<script type="text/javascript" src="../install/ChemDoodleWeb-libs.js"></script>
<script type="text/javascript" src="../install/ChemDoodleWeb.js"></script>
<title>3D ChemDoodle Web Component using WebGL : Interactive Model ofDDT</title>
</head>
<body>
</body>
</html>
<script>
var transformerDistance = new ChemDoodle.TransformCanvas3D('transformDistance', 300, 300);
// set up visual specifications
transformerDistance.specs.set3DRepresentation('Ball and Stick');
transformerDistance.specs.backgroundColor = 'black';
transformerDistance.specs.atoms_displayLabels_3D = true;
transformerDistance.specs.shapes_color = '#fff';
// read in a water molecule
var water = new ChemDoodle.io.JSONInterpreter().molFrom({"a":[{"x":0,"y":-0.2633,"i":"a0","l":"O"},{"x":-0.8109999999999999,"y":0.2633,"i":"a1","l":"H"},{"x":0.8109999999999999,"y":0.2633,"i":"a2","l":"H"}],"b":[{"b":0,"e":1,"i":"b0"},{"b":0,"e":2,"i":"b1"}]});
// create a distance object between the hydrogen atoms
var distance = new ChemDoodle.structures.d3.Distance(water.atoms[1], water.atoms[2]);
// add the objects to the scene
</script>

How to Clear entire Shape Layer in Microsoft VirtualEarth 6.3 using pure javascript?

The code snippet shown below (HTML5/javascript) loads Microsoft Bing Map (VirtualEarth 6.3), then adds two Shape layers and two sample Pushpins, one per each layer.
QUESTION: What pure javascript function (or solution) to use in order to clear all pushpins from just the 1st layer keeping the other layer intact?
Note: clear layer function should be implemented without deleting the entire layer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing VE Map w/layers</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
// VE map
var _map;
// 1st shape layer
var _layer1 ;
// 2nd shape layer
var _layer2;
function MapLoad() {
// load map
_map = new VEMap('Map');
_map.LoadMap();
// center point (Columbus Circle NY)
var _center = new VELatLong(40.7681, -73.9819);
// set center point and initial zoom level
_map.SetCenterAndZoom(_center, 12);
// set Map style
_map.SetMapStyle(VEMapStyle.Shaded);
// add 1st shape layer1 to Map obj
_layer1 = new VEShapeLayer()
_map.AddShapeLayer(_layer1);
// add 2nd shape layer2 to Map obj
_layer2 = new VEShapeLayer()
_map.AddShapeLayer(_layer2);
// add pushpin to layer1
var _pushpin1 = new VEShape(VEShapeType.Pushpin, _center);
_layer1.AddShape(_pushpin1);
// add pushpin (Apple Store on 5th) to layer2
var _pushpin2 = new VEShape(VEShapeType.Pushpin, new VELatLong(40.7639, -73.9725));
_layer2.AddShape(_pushpin2);
// QUESTION: HOW TO CLEAR ALL SHAPES FROM LAYER 1, (BUT NOT DELETING THE ENTIRE LAYER)?
}
</script>
</head>
<body onload="MapLoad();">
<div id="Map" style="position:absolute; top:100px; height:90%; width:100%;"></div>
</body>
</html>
You could use the dedicated method DeleteAllShapes() of the VEShapeLayer class, see the MSDN:
https://msdn.microsoft.com/en-us/library/bb412473.aspx
See the example:
// Delete all shapes within the layer at the selected index.
function DeleteAllShapes()
{
layer = map.GetShapeLayerByIndex(selIndex);
layer.DeleteAllShapes();
IndexChanged(selIndex);
}
Also, I would recommend to use AJAX v7.0 instead of v6.3 since it's now deprecated and due to be out of support on November 30, 2016.

OpenLayers popup not toggling

When I create a static marker and attach a static popup, things seem to work fine. I am trying to build dynamic markers, and while the marker's and popup's are being created correctly, they are no longer toggling due to events.
I've stripped the code down to just enough to bring the map up and draw one constructed marker/popup duo. Maybe you can see something I'm missing?
<html>
<head>
<style type="text/css">html,body,#basicMap{width:69%;height:60%;}</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
/**/var oldProjection=new OpenLayers.Projection("EPSG:4326");//Used to scale the GPS coordinates
/**/var newProjection=new OpenLayers.Projection("EPSG:900913");//To the map
/**/var marks=new OpenLayers.Layer.Markers("Debug Site");
/**/var mapnik=new OpenLayers.Layer.OSM("World Map");//Layer containing the map tiles
/**/var size=new OpenLayers.Size(21,25);//Icon height and width
/**/var offset=new OpenLayers.Pixel(-(size.w/2),-size.h);//Icon offset
/**/var mapCenter=new OpenLayers.LonLat(-125.2,54.8).transform(oldProjection,newProjection);
function init()
{
var map=new OpenLayers.Map($("BasicMap"),{controls:[]});
map.addLayer(mapnik);
map.setCenter(mapCenter,3);
map.addLayer(marks);
var TestSite=new site(-131,57.2,"TestSite","DE","Hello World");
map.addPopup(TestSite.popup);
}
function site(lon,lat,siteID,layer,content)
{
this.content=content;
this.layer=layer;
this.lon=lon;this.lat=lat;this.siteID=siteID;
this.lonlat=new OpenLayers.LonLat(lon,lat).transform(oldProjection,newProjection);
this.popup=new OpenLayers.Popup.Anchored(this.siteID,this.lonlat,new OpenLayers.Size(150,375),this.content);
this.marker=new OpenLayers.Marker(this.lonlat);
this.popup.border='1px solid black';this.popup.autoSize=true;
this.marker.events.register("click",this.marker,function(e){this.popup.toggle()});
marks.addMarker(this.marker);
}
</script>
</head>
<body onload="init();"><div id="basicMap"></div></body>

Categories