The final goal is to display a few kml overlays on one map and set the transparency value by clicking on a control button for each kml layer (depending on how much layers there are).
My first idea was changing opacity/transparency directly by the div layer.. but I can't find any way to address the div where the kml layer is shown in the map.
Does someone know a way to address the div where the KML is inserted by the KmlLayer(..)?
Now I'm trying to find a way to do it via the KmlLayer Object..
but so far no luck either..
Any ideas how to handle this?
The Code is:
(function() {
window.onload = function(){
var myLatlng = new google.maps.LatLng(48.1497, 11.5795);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var georssLayer = new google.maps.KmlLayer('somemap.kml',({'suppressInfoWindows': true}));
georssLayer.setMap(map);
}
})();
To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties.
If you have multiple KML files you will probably need to name your images so that the name reflects which KML image belongs to. so if you have KML1 prepend KML1 to all your image names in that KML and search for that string using jQuery selector.
Here is an example using jquery which targets all images (for searches on substrings see http://api.jquery.com/attribute-contains-selector/):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
$("#map_canvas").find("img").css("opacity","0.4")
})
})
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>
NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.
Related
The following code plots a simple line on bing maps. Is there a way that the starting and end points of the line are on a closest road. I don't want to use the routing service. It would be great if the load time is as fast it would be for the code below.
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Map Credentials"});
var loc1 = new Microsoft.Maps.Location(33.49753, -117.54845);
var loc2 = new Microsoft.Maps.Location(33.993065, -117.87415);
// Add a pin to the map
var pin1 = new Microsoft.Maps.Pushpin(loc1);
var pin2 = new Microsoft.Maps.Pushpin(loc2);
// Create a polyline
var lineVertices = new Array(loc1, loc2);
var line = new Microsoft.Maps.Polyline(lineVertices);
map.setView({center:loc2, zoom: 9} );
map.entities.push(line);
map.entities.push(pin1);
map.entities.push(pin2);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I want to be able to display a content item of a certain type and only that content item i.e. no shapes that are not part of said item.
I have tried creating a controller method with a {Themed(false)] attribute, or returning a partial view. Both of these do almost exactly what I want, except that these don't include any scripts or styles associated with the View I'm trying to display.
My current attempt look like this:
Controller method:
[Themed(false)]
public ActionResult DisplayBare(int id) {
var contentItem = _contentManager.Get(id, VersionOptions.Published);
dynamic model = _contentManager.BuildDisplay(contentItem);
return View( (object)model);
}
The DisplayBare view:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
#Display(Model)
</body>
</html>
The problem is that when the display View of an item includes Script.Require, Script.Include and Script.Foot directives, the scripts do not show up in the Html.
How would I achieve this?
Found a solution by snooping around Orchard sources:
Using this view to display my content item gives me exactly what i want:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#{
Style.Include("Site.css");
var content = Display(Model);
}
#Display.Metas()
#Display.HeadScripts()
#Display.HeadLinks()
#Display.StyleSheetLinks()
</head>
<body>
#content
#Display.FootScripts()
</body>
</html>
I'm trying to read data from the datastore of my Google App Engine Application, populate the google charts Datatable with it then visualize the whole thing into a graph using the source code from the google charts example which uses Javascript code embedded on the web page.
My issue is with fetching the data. I thought of two ways of doing this: either run the query directly inside the javascript code or run the query from the python code , send the results of that query as a template value to the html code, filter it to get the values I'm interested in and somehow passing the whole thing to the javascript code then diplay the data (looks more complicated). I've tried the first option but it doesn't seem to work. Since i wasn't sure what the URL of my datastore was, I though it was the same as the server which uses it so I passed the URL of my appengine application as a parameter to the query function. I tried to run an SQL query on this but I got an error.
Below are the corresponding JS code (alone) and the whole HTML code
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
<!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="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['linechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>
You cant query your own webpage and somehow expect it to connect to the datastore. Your webpage contains your own html output that you defined. Read more about appengine / web applications and how the datastore works.
You need to do the datastore query from the frontend, not the browsers js. Build a table and pass it to the browser where it builds the datatable and chart.
I'm using Aptana Studio 3 to create a map, I replaced the function init address to the appropriate address needed to link to the map I want to represent. When I Run it on Aptana Studio 3, it brings me to an unfinished build where the map isn't present and only an outline of the Map Area, plus instructional use on the bottom. I tried using other samples from the ArcGIS resource center to only get the same results if I implement it through Aptana or through Root Directory.
Create Map
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.nbtexas.org/ArcGIS/rest/services/Maps/NewBraunfelsBaseMap/MapServer",
{"opacity":0.5, "imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script> </head> <body class="claro">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer.<br />
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</li>
<li>SHIFT + Drag to zoom in</li>
<li>SHIFT + CTRL + Drag to zoom out</li>
<li>Mouse Scroll Forward to zoom in</li>
<li>Mouse Scroll Backward to zoom out</li>
<li>Use Arrow keys to pan</li>
<li>+ key to zoom in a level</li>
<li>- key to zoom out a level</li>
<li>Double Click to Center and Zoom in</li>
</ul> </body> </html>
I am creating an openlaszlo application where an html tag will be present and i have some components that are draggable in the swf. I want to drag these components over the html. This is not possible.
So what i am thinking of is to take a screenshot of the html content and replace it with the actual html content when i need to drag over it.
Theoretically this should be possible and it's possible in flex I verified my self. I am trying to do the same thing in Openlaszlo. But i am not getting any leads
So far i have tried like this
And i am getting an error that the html tag is not object of IBitmapDrawable
<canvas width="800" height="600" bgcolor="white" debug="true">
<script when="immediate"><![CDATA[
class MagUtils {
#passthrough (toplevel: true) {
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.*;
import flash.events.MouseEvent;
import mx.graphics.ImageSnapshot;
import flash.utils.ByteArray;
import flash.display.IBitmapDrawable;
}#
var temp:lz.view;
var colorTransform:ColorTransform;
var rect:Rectangle;
public function snap (m:IBitmapDrawable, t:lz.view):void {
temp = t;
var temp_mc = temp.sprite; // getMCRef();
var mainView_mc = main.sprite; // getMCRef();
var scale = 1;
var x;
var y;
var w;
var h;
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(m);
var imageByteArray:ByteArray = imageSnap.data;
colorTransform = new flash.geom.ColorTransform();
rect = new flash.geom.Rectangle(0, 0, temp.width, temp.height);
var bitmap:BitmapData = new flash.display.BitmapData(w, h, false);
bitmap.setPixels(rect, imageByteArray);
var bm:Bitmap = new Bitmap(bitmap);
temp.sprite.addChild (bm);
bitmap = null;
}
}
lz.MagUtils = new MagUtils();
]]>
</script>
<button name="magnifier" text="magnifyingtool" >
<handler name="onclick">
lz.MagUtils.snap(canvas.main.ht,canvas.temp);
</handler>
</button>
<view name="main" x="5" y="15" width="200" height="200" bgcolor="yellow">
<html name="ht" width="200" height="200" src="http:hello.html"/>
</view>
<view id="temp" name="temp" x="5" y="300" visible="true" width="200" height="200" bgcolor="gray">
</view>
</canvas>
And the HTML Content is
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>
A Small Hello
</TITLE>
</HEAD>
<BODY>
<H1>Hi</H1>
<P>Test Page</P>
</BODY>
</HTML>
It's no possible to take a screenshot in Flash of elements which are not managed by the Flash display list, which includes iFrame content placed below the SWF movie in the browser. And that seems to be what you are trying to do.
If you want to drag a visual object from the iFrame into the SWF movie area, one approach might be to render the content in HTML into an HTML5 canvas element, extract the bitmap data and push that into the SWF movie to be displayed in an OpenLaszlo view. But that would mean that all visual elements you want to drag need to be drawn into an HTML5 canvas.
Here is an example where uses Flash Player's filter functionality to apply the filter to an image in an HTML5 canvas element:
http://www.quasimondo.com/archives/000695.php
Here are the links to the relevant files for this example:
The HTML page embedding an invisible SWF for processing the image.
JavaScript file with functions for sending the data to the SWF movie clip.
ActionScript class processing the image data sent from JavaScript, and passing the processed data back to the HTML page.
But I'm not sure that all the content you have in your iFrame can be rendered into a canvas element.