Between Here Maps Api for Javascript version 3.1 and Here Maps Api for Javascript version 3 is a big difference.
The loading time, zooming, routes displaying is much much slower , up to 3 times.
We are usisng the default settings, but even so, on half of our computers on which we used HERE version 3 we cannot use the new version 3.1. It is not loading (cannot be used).
What can be done? I cannot afford to change all the computer to another computers of last generation.
Are there some settings which can be used to reduce the responsive time of the maps?
What you could do is to load legacy packages and use legacy rendering engine (no tilting/rotation, only raster base layer):
load legacy core package:
<!DOCTYPE html>
<html>
<head>
.....
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
.....
create map with legacy rendering engine:
// assuming platform is instantiated
// Obtain the default map types from the platform object:
let defaultLayers = platform.createDefaultLayers();
let map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.raster.normal.map,
{
zoom: 10,
center: { lat: 52.5, lng: 13.4 },
engineType: H.map.render.RenderEngine.EngineType.P2D
});
by default, fractional zoom levels are enabled in 3.1, therefore to have crisp map it is recommended to disable it:
//assuming that UI and mapevents behavior are instantiated
// disable fractional zooming for Behavior
behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
// add H.ui.ZoomControl with the disabled fractional zooming
var zoomControl = new H.ui.ZoomControl({fractionalZoom: false});
ui.addControl('zoom', zoomControl);
For more information check the Migration guide
Related
I am using the Google Maps JavaScript API with markerclustererplus. I need markerclustererplus for its mouseover handler.
After today's Maps update, click is not longer functioning properly for touch screen devices. click works fine for laptop/desktops using a mouse/trackpad, but it is not longer working for touch screens.
I tried both the markerclustererplus libraries available, both are broken.
https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
https://github.com/mahnunchik/markerclustererplus
I tried the standard markerclusterer library as well, and it doesn't seem to be working either.
https://github.com/googlemaps/js-marker-clusterer
Everything was working fine before today's Maps update.
Does anyone have a fix for this?
EDIT:
I am using Django 1.11. On the frontend, I don't use any libraries apart from a bit of jQuery 3.2.1
There's not much to show with my code. It's pretty standard.
markerCluster = new MarkerClusterer(map, markers, clusterOptions);
markerCluster.addListener('click', function(cluster) {
markerClusterActivate(cluster);
});
function markerClusterActivate(cluster) {
... stuff that happens when cluster is clicked
}
So here is a workaround, you just roll back to google map 3.30
For vue.js projects.
https://github.com/xkjyeah/vue-google-maps/blob/v0.8.1/API.md
import Vue from 'vue'
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY',
v: 'GOOGLE_MAPS_VERSION',
libraries: 'places' // Only if you need Autocomplete
}
})
Following the official guide:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
I did exactly the same thing. I jave that specific kml file on my site, and I create a page with that exact html+javascript code (copy-paste, no errors). The path for the kml file is correct too.
Of course, I inserted the right API KEY obtained by google.
Running the page, the maps shows up, in the correct start position and with the correct zoom, but I can't see any path.
How is possible?
I have only one hint: in Netbeans, I get this warning on the var map:
The global variable "google" is not declared.
I can't figure it out.
Thank you for any help!
EDIT: That's my javascript as asked (it's just copy-paste from that site):
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: 'MYURL/cta.kml',
map: map
});
}
'MYURL' is the url of the file, that is correct (already tested). The cta.kml file is the one from that site, saved and uploaded on mine. The complete file URL is working, and the file itself has attribute 644 (publicly available) on my FTP.
Have you added this code in order to include Google's library?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Try to check for network status of this library file, in your browser devtools.
I am trying to load the basic rotating cube example from the three.js getting started guide in to a basic meteor app:
http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
I have added this code into a template js manager file of a new meteor app and then call the render function on the render of my template:
Template.hello.rendered = function() {
if (!this._rendered) {
this._rendered = true;
render();
}
}
My template
<template name="hello">
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
</body>
</template>
I have added three.js from atomosphere via:
mrt add three
and it loaded the package successfully into my app
However, when I start meteor I am getting an error that THREE is undefined.
I have tried moving three.js into the lib folder and that didn't work because I get an error that 'self' is undefined. I think this should only load as a client library. I have tried putting it with the client folder and below my manager file, but that didn't seem to work either and it seemed hacky. It seems like meteorite installed packages should be loaded first, right? WHy isn't this available from my template manager?
Any help would be greatly appreciated. I am new to both meteor and three.js so I think getting this basic demo working would really open my eyes.
Thanks!
Use the bower package and add three js through that.
https://atmospherejs.com/package/bower
I find that a lot of the wrapper packages on atmosphere fall out of date, so the bower package is a nice solution for this sort of thing.
The THREE.js library should go into client/compatibility folder. The package you were trying to use is probably deprecated.
EDIT
You can also try wrapping your THREEJS code with Meteor.startup to ensure the work is only performed after all js files are loaded. The Meteor's file loading order has always been a headake.
I really appreciate the feedback!
I also tried Bower and got a reference error on a new project after installing threejs package via Bower after starting Meteor. I am not sure what the issue is there.
However, I think I identified the problem with using three.js in the client folder. THREE is defined with VAR so only has local file scope and was not available from my manager file. There is a newer atmosphere package that has modified this to use a global scope:
https://atmospherejs.com/package/three.js
This package works. I found that you can also use the newest min.three.js file directly in the client folder without installing a package if you add window.THREE = THREE; to the end of the file--giving the local THREE variable access to global scope.
Finally, it's worth mentioning that I had defined my 'var scene' and other three.js code as shown in my question outside of the if Meteor.isClient function. Since my three.js code was within the client folder and inaccessible to the server, the server was throwing this error.
I hope someone finds my pitfalls helpful. Meteor definitely requires a slightly new way of looking at a JS appilcation, but I think it will be really great. I am excited to move past this seemingly simple issue that has been driving me crazy.
I am looking to add a small splash screen at the launch of an app I am working on to show licence and version info along with details of some client specific info. Having set my default window dimensions etc in tiapp.xml I am now looking at how to override these on a specific user window (namely index.html).
I've had a dig through the API and thought I had found what I was looking for, but on testing it doesn't do anything to the window dimensions. I know it will be my doing (I'm a php man trying desperately to learn javascript!) but can someone have a look at my code and point out the error of my ways...
In the of my index.html I have the following code:
<script>
var Ti = Titanium;
var window = Ti.UI.currentWindow;
window.setHeight(250);
window.setWidth(500);
</script>
I'm guessing I've either messed up my javascript or TideSDK syntax??
you have used the reserved variable "window", which belongs to JavaScript and can't be overwritten.
The following code works for me:
var Ti = Titanium;
var this_window = Ti.UI.getCurrentWindow();
setTimeout(function(){
this_window.setHeight(250);
this_window.setWidth(500);
}, 3000);
If you want to learn to write good JavaScript, I can give you a couple of book recommendations.
I developed one asp.net web site with functionality of finding route, find place
through bing map control.
My Problem is when I am opening this web site from windows mobile with internet explorer 6.
All controls are appearing but map control is not appearing why?
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
</script>
<script type="text/javascript">
function OnPageLoad()
{
var myMap = document.getElementById("myMap");
var LA = new VELatLong(41.2666452, -96.0011320,VELatLong.RelativeToGround);
myMap.style.display='';
map = new VEMap('myMap');
map.LoadMap(LA, 1, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
}
</script>
can any one help me?
Thanks
Knowing IE Mobile, I'd say it's something to do with your JavaScript probably.
How are you showing the map? Posting some code to your question would certainly help people narrow down the issue.
Looking at the directions service from bing.com on IE mobile, the map is a static image with the directions rendered on top - is this what you're doing? Or are you trying to call the default js map controls?
Edit to respond to update:
If you take a look at bing mobile you'll see that they aren't using the fully featured client side API, but are doing the bulk of the lifting on the server, culminating in a simple img tag being sent to the mobile browser to generate a static image request.
This sort of process is also talked about in this article on "Getting a map with the Virtual Earth Web Service", which concludes:
VEWS provides static images (on the fly), so you can insert them anywhere that support HTTP requests - mobile devices, JavaScript disabled browsers - or insert them into other documents such as PDFs.