initMap Error: Couldn't create WebGL context - here-api

I'm developing an angular web app and after migrating HERE maps from 3.0 to 3.1 got a problem rendering the new version of the map.
The following error:
initMap Error: Couldn't create WebGL context.

The HERE Maps API for JavaScript version 3.1 contains a new default rendering engine.The engine uses an HTML5 WebGL canvas element and enables rendering of rich and customizable vector maps. In order to make the most of the WebGL engine, use the new vector tiles.
The snippet below shows how to switch to the vector tiles:
// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lat: 52.5, lng: 13.4 }
});
For more detail please go through this link.
https://developer.here.com/documentation/maps/3.1.15.1/dev_guide/topics/migration.html

Related

map not loading because venure service version is not supported

I'm getting an error that venue service version 1 is no longer supported.
I'm using version 3.1.3.5 of the javascript version of Here.
Is there a newer version that I need to switch to?
The latest version for Maps API for JavaScript is 3.1.30.16. We would suggest you to upgrade the version.
For more help on Indoor Maps with JS API, please refer to the updated guide at https://developer.here.com/documentation/indoor-map/user_guide/topics/indoor-jsapi.html
You can also refer to an example at https://jsfiddle.net/y1wq98hm/
venuesService.loadVenue('7348').then((venue) => {
// add Indoor Maps data to the Indoor Maps provider
venuesProvider.addVenue(venue);
venuesProvider.setActiveVenue(venue);
// create a tile layer for the Indoor Maps provider
map.addLayer(new H.map.layer.TileLayer(venuesProvider));
// Set center of the map view to the center of the venue
map.setCenter(venue.getCenter());
// optionally select a different level
venue.setActiveDrawing(7880);
// create a level control
const levelControl = new H.venues.ui.LevelControl(venue);
ui.addControl('level-control', levelControl);
// create a drawing control:
const drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);
});
}
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
zoom: 18,
center: { lat: 47.452353, lng: 8.562455 },
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Step 5: add the Indoor Map
addVenueToMap(map);

How to access clicked polygon to change it's style in Google Maps Api v3

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)

KML layer On/Off for integrated Google Maps 3 & GE application

I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}

Change Google Maps v3 mapOptions object after load

How can i modify a V3 map's mapOptions (after the initial map has been loaded)?
Specifically, I would like to be able to flip the
draggable: false
option to
draggable: true
When an action (such as a click on a div) is triggered.
Addition: I have tried loading jquery-ui-map and using:
$('#map').gmap('option', 'draggable', true);
However this seems to reload the map and forget all the other existing options. I could redefine them all, but that seems a bit hackish.
Any pointers appreciated.
Thanks!
Found that I don't even need jQuery for this – it's already part of the Google Maps API. Simply do:
map.set('draggable', true);
Too easy! Hope it helps someone.
======
2020 update - you should use:
map.setOptions({ draggable: true });
Google Maps JavaScript API V3.25 update
Note that map.set() does not work in newer versions of Maps API. You have to use map.setOptions()
Source: Google Maps Reference
If you have already created the map previously, you can set several options ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ) at once like this:
var myOptions = {
zoom:11,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
};
map.set(myOptions);

Google maps api - add a kml layer to a map

I've been playing around with the google maps api through javascript (I'm also new to javascript).
I've experimented with adding info windows and markers to the map by following the api examples.
What I want to do is overlay a KML file onto a map of Ireland - and I searched the fusion tables for the KML file contains the information for the borders of the counties of Ireland.
The kml file came from a fusion table here:
http://www.google.com/fusiontables/DataSource?dsrcid=935280&search=ireland+counties&cd=0
I exported it to a kml file and uploaded it to a public site (see javascript - I'm not able to post more than 2 links)
I'm trying to load the kml file in the link below - that map I've selected appears but the KML overlay does not.
http://songsaboutsuperheroes.com/index.html
I've tried using a link to the fusion table ID and had no luck with that.
I've also tried to use the KML Network link and had no luck with that.
So I'm trying to load the KML file directly like I've seen in tutorials.
Can anyone point me in the right direction - I'm not sure what I'm doing wrong - thanks in advance!
Here is the Javascript I'm using:
function initialize() {
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7 ,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLayer = new google.maps.KmlLayer(
'http://songsaboutsuperheroes.com/Ireland_Counties.kml');
myLayer.setMap(map);
}
This works - I accessed the fusion table that holds the kml data directly:
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.FusionTablesLayer(935280, {
suppressInfoWindows: true
});
layer.setQuery("select geometry,name_1 from 935280");
layer.setMap(map);
var kmlUrl = 'http://www.yoursite.com/YOUR_KML_FILE.kml';
var KML_single = new google.maps.KmlLayer(kmlUrl, {color:"#4385F1" } );
KML_single.setMap(map);
EXML_single = new GeoXml("EXML_single", map, kmlUrl, {
sidebarid:"sidebar",
iwwidth:280
});
EXML_single.parse('SOME LOADING TEXT HERE');

Resources