I have a KML file with multiple placemarks, example below:
<Placemark>
<name>00550M</name>
<description></description>
<styleUrl>#550M</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-019.2041,63.4130
-013.2722,57.0138
004.2309,52.4405
001.1318,49.5607
-021.0657,55.3650
-019.2041,63.4130
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
Using the Earth plugin I can turn populate an array with the placemarks :
if ('getFeatures' in top.mykml) {
var firstChild = top.mykml.getFeatures().getFirstChild();
while(firstChild !== null){
top.myObjects.push(firstChild);
firstChild = firstChild.getNextSibling();
}
}
and make them visible or not :
for (var i = 0; i < aLen; i++){
aName = top.myObjects[i].getName();
aFL = (aName.substring(2, 5));
if (aFL == '200'){
top.myObjects[i].setVisibility(true);
}
}
However, getFeatures isn't available in Maps, and
if ('featureData' in top.mykml)
returns false.
Is it possible to achive what I want to do, if so how. If not I guess each placemark will have to go in a single file.
Thanks.
KmlLayer doesn't give you access to the objects on the map.
You have two options that I can think of:
import your KML into FusionTables and use queries to display or hide the Placemarks
use a third party KML parser like geoxml3 or geoxml-v3 that render the KML using native Google Maps Javascript API v3 objects and expose those so you can control them
example using geoxml3
Related
How can I create a GTM template that loads a pixel code with a data attribute? This particular pixel needs a data attribute to include the API Key in order for the pixel to run on the site.
I've added the code from the pixel to the template in this example, however this does not appear to be how Sandbox Javascript is supposed to be used to inject the JS.
// Access Tag Variables
var apikey = data.apikey;
// Access Document Object
var document = require('document');
// Create New Script
var Script = document.createElement('script');
// Update New Script Attributes
Script.type = 'text/javascript';
Script.src = 'https://cdn.pixel.com/js/pixel.min.js';
Script.setAttribute('token', apikey);
document.getElementsByTagName('head')[0].appendChild(Script);
// Call data.gtmOnSuccess when the tag is finished.
data.gtmOnSuccess();
Alternatively it looks like I should be using injectScript like below, however the documentation does not explain how to include a data attribute.
injectScript('https://cdn.pixel.com/js/pixel.min.js', data.gtmOnSuccess, data.gtmOnFailure);
Unfortunately, it is currently not possible to add custom attributes to scripts added with the sandboxed injectScript method.
I'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
Thanks in advance. I'm trying to figure out how to add client faces (images) to certain locations on a map using the Nokia Here Map Image API.
I am able to do this via the Javascript API, but unfortunately I also need to be able to download an image for use in a generated PDF file, and I can't figure out how to add external images to the map.
Any help would be much appreciated. :)
I didn't exactly understand your requirement but if you want to convert the canvas which shows the map to an Image, you can do that with the map caprutre event, something like following should work
map.capture(function(canvas) {
if (canvas) {
var img = new Image();
img.src = canvas.toDataURL("img/jpeg");
window.open(img.src);
} else {
// For example when map is in Panorama mode
alert('Capturing is not supported');
}
}, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
How i can remember in older versions of Gmaps API was it possible, to make a custom Overlay for adding a Markers on it and than add or remove from main map. Also it was possible to make different groups of results and show/hide it in only one command. In the new reference i can not find it, did they have rename it?
You're talking about a GLayer - https://developers.google.com/maps/documentation/javascript/v2/reference#GLayer
It has, in fact, been removed from the v3 API.
In API v3, it's been left up to the developer to keep track of their overlays and add/remove them from the map as they wish.
The best way to do this is keep your overlays in an array (or an object) and loop through them.
For example, if you had two distinct sets of overlays (infoWindows and markers), you could do something like this:
var overlays = {
markers : [],
infoWindows : []
};
//create a marker and put it in markers
var marker = new google.maps.Marker();
overlays.markers.push(marker);
//create an infoWindow and put it in infoWindows
var infoWindow = new google.maps.InfoWindow();
overlays.infoWindows.push(infoWindow);
//remove all infoWindows from the map
for(var i=0;i<overlays.infoWindows.length;i++) {
overlays.infoWindows[i].setMap(null);
}
//remove all markers from the map
for(var i=0;i<overlays.markers.length;i++) {
overlays.markers[i].setMap(null);
}
It's a simplistic example, but hopefully you get the idea: that adding, managing, and removing "groups" of overlays in v3 is left up to the developer.