currently I am trying to display the HERE map with the JavaScript API in German.
According to this example it is possible to change the language of the map. This works fine for German when the map is first loaded. However, when the map view is changed e.g. to 'Satellite' these settings seem to be lost. In all the multi-language examples I found online, the option to change the map view is disabled. Can the language be set for example to German for all the available views or is this customizing restricted to one view only and I need to disable the other views?
Thanks in advance, Team DG7
Below is the entire sample code to have all views of the map in Chinese Language. You can change it according to your needs.
Please use your own app id and app code. The main snippet in the below code is the createDefaultlayers where you speciy the language parameter for all layers.
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
lg: 'CHI'
});
Happy Coding!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Switches the map language to simplified Chinese
*
* #param {H.Map} map A HERE Map instance within the application
* #pama {H.service.Platform} platform A stub class to access HERE services
*/
function switchMapLanguage(map, platform){
var mapTileService = platform.getMapTileService({
type: 'base'
}),
// Our layer will load tiles from the HERE Map Tile API
chineseMapLayer = mapTileService.createTileLayer(
'maptile',
'normal.day',
pixelRatio === 1 ? 256 : 512,
'png8',
{lg: 'CHI', ppi: pixelRatio === 1 ? undefined : 320}
);
map.setBaseLayer(chineseMapLayer);
// Display default UI components on the map and change default
// language to simplified Chinese.
// Besides supported language codes you can also specify your custom translation
// using H.ui.i18n.Localization.
var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN');
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'YOUR-APP-ID',
app_code: 'YOUR-APP-CODE',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
lg: 'CHI'
});
//Step 2: initialize a map - this map is centered over Hong Kong.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:22.2783, lng:114.1588},
zoom: 12,
pixelRatio: pixelRatio
});
//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));
// Now use the map as required...
switchMapLanguage(map , platform);
</script>
</body>
</html>
Related
When I put my object (points) in the same script as the google maps API it works fine. But when I move the object to its own script on top it says "points is not defined".
I need to have the object in the top script (its actually coming from a database).
See working demo: https://price-points.web.app/
This is a Svelte project.
<script>
export const prerender = true;
let showMap = false;
//How can I make this work without the setTimeout?
setTimeout(function(){showMap = !showMap}, 1);
</script>
<!-- Google Maps API -->
<div>
<div id="map"></div>
<script>
//If points object is here it works fine.
//If points is defined in top script it says "points is not defined"
//My ACTUAL points object comes from a database and needs to be in top script.
let points = {
sanFrancisco: {
lat: 37.7749,
lng: -122.4194,
price: 123.45
},
losAngeles: {
lat: 34.0522,
lng: -118.2437,
price: 567.89
}
}
function initMap() {
const california = {lat: 36.7783,lng: -119.4179};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: california,
});
Object.values(points).forEach(({ lat, lng, price }) => {
const marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
label: `$${price}`,
icon: { url: 'https://i.imgur.com/ECXgKpB.png', scaledSize: new google.maps.Size(60,35), labelOrigin: new google.maps.Point(30, 15)}
});
});
}
window.initMap = initMap;
</script>
{#if showMap}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" defer async></script>
{/if}
</div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
The script in Svelte components is scoped (it is implicitly a module which requires import/export), you have to set window.points to make variables available globally.
Note that in SvelteKit you cannot access window during server-side rendering, so you probably should move the assignment into onMount. In general you should not have multiple script tags in the first place, maybe you are fighting the wrong problem.
How to do internalisation for the labels in change view drop down?
Trying to do in JavaScript.
Please refer to https://developer.here.com/api-explorer/maps-js/v3.0/maps/map-multi-language-support. Below is the sample code for a map with change view in Chinese.
Code Snippet for providing the language:
var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN');
Entire Sample Code:
Map at a specified location
Display a map at a specified location and zoom level
This example displays a movable map initially centered on the Brandenburg Gate in the centre of Berlin (52.5159°N, 13.3777°E)
Code
The map.setCenter() method and map.setZoom() method are able to control the location of the map.
JavaScript
JS + HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Moves the map to display over Berlin
*
* #param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(map){
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
//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));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN');
// Now use the map as required...
moveMapToBerlin(map);
</script>
</body>
</html>
I wanted to use Three.js JavaScript 3D library on my WordPress site, so I tried the three.min.js in the:
body of a post
<script src="/three.min.js"></script>
then the footer
<script type='text/javascript' src='/three.min.js'></script>
and now the Pinboard: Theme Functions (functions.php) file
function pinboard_enqueue_scripts() {
wp_register_script('three.min', '/three.min.js', true);
wp_enqueue_script( 'three.min' );
}
add_action( 'wp_enqueue_scripts', 'pinboard_enqueue_scripts' );
Unfortunately the cube from Mr.doob’s page is not showing up on my Cube page.
Your help in running the Three.js on my WordPress site would be greatly appreciated.
Thank you.
Well that has also a lot to do with CSS ^^ I do the same at http://lizkats.com, maybe get some inspiration there.
In the wordpress theme editor I edited the header file (header.php) to include both the library and the script there. I used an absolute URL (i.e. I cheated, maybe you have more patience and find a better way) and inserted libraries and script like following:
</head>
<body <?php body_class(); ?>>
<!-- Here (after head & body in Heaper.php) starts the stuff I added myself -->
<div id="3dcontainer" style="position: fixed; z-index: -1;"></div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner" style="overflow: visible;">
<script src="http://lizkats.com/wp-content/fromGame/three.js"></script>
<script src="http://lizkats.com/wp-content/fromGame/models/modelMeerkatPoseWeb.js"></script>
<script>
var container, stats;
var camera, scene, renderer, objects;
var clock = new THREE.Clock();
function init() {
container = document.getElementById('3dcontainer');
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.5, 200 );
camera.position.set( 0.4, 0.42, 0.9 );
scene = new THREE.Scene();
// ...
// Renderer
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x453326, 1);
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
animate();
}
init();
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
renderer.render( scene, camera );
}
</script>
The 3dcontainer is where I insert the canvas object.
Further you'll also have to update your style.css in order to make it look the way you want. Here's a paste of my current (entire) stylesheet: http://pastebin.com/9uUiAZhY
Good luck!
This is popular search, so I decided to write little help for feature readers.
I'm assuming that you have properly installed and working Wordpress.
Installation without bundlers
The simplest way to make example three.js cube working on your Wordpress home page, following three.js docs:
1. Depending on your Wordpress configuration open index.php / page.php
2. First we need to import library, there are two common ways to do that via : npm or cdn.
CDN:
<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
import * as THREE from 'https://cdn.skypack.dev/three#0.137.5';
const scene = new THREE.Scene();
</script>
NPM (check Downloading and installing Node.js and npm if needed):
Open your terminal and run npm install three. This will create node_modules folder in your directory, which contains library. Example provided in three.js docs, assumes that you will bundle html. Although we will import our library without bundling for the needs of this question.
Open functions.php and enqueue library:
wp_enqueue_script( 'three-min', get_template_directory_uri() . '/node_modules/three/build/three.min.js', array(), null, false );
Make a notice, it's placed in <head> so it will be run before our script.
3. Add the basic cube to the script:
<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
import * as THREE from 'https://cdn.skypack.dev/three#0.137.5';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
for NPM type="module" and import * as THREE from 'https://cdn.skypack.dev/three#0.137.5'; is not needed. Because we have imported it already using UMD.
I might update it in the future for Webpack bundler integration.
Using IE7, when hovering or clicking on the Zoombar, 4 zoom levels appears: Street, Country, Suburb, and State.
This features does not exist when I am using IE9 or IE10.
My question is how can I have this feature with IE9 and IE10?
The ZoomBar you are after is a legacy component which is only maintained on older browsers, modern browsers will automatically display the newer, smaller zoom component. Your only way to duplicate the older functionality here would be to create your own custom component through injecting a extra styled <DIV> element into the DOM.
Here is an example below combining the HERE Maps API with jQuery. Insert your app_id and app_code as necessary.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<script type="text/javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
</head>
<body>
<h1>Adding an Overlay to the map</h1>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="overlay" type="text/javascript" >
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR APP CODE");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");
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);
};
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10
});
htmlControl = new HtmlControl(
"<div id='slider' style='left:4em;top:1em;width:10px;min-height:250px'/></div>", "Sidebar");
map.components.add(htmlControl);
setUpSlider();
function setUpSlider(){
$( "#slider" ).slider({
// range: true,
min: 0,
max: 20,
orientation: "vertical",
value: 10,
slide: function( event, ui ) {
map.set("zoomLevel", ui.value);
}
});
$( "#slider" ).slider( "value", 10 );
}
</script>
</body>
</html>
The custom ZoomBar can be seen below:
You can add further CSS styles to the HTML as you see fit, for example:
htmlControl = new HtmlControl(
"<div style='position:absolute'>" +
"<div id='slider' style='float:left;left:1em;top:1em;width:10px;min-height:200px;'></div> " +
"<div style='left:5em;min-width:150px;;min-height:200px;float:left; background:url(labels.png) no-repeat'></div>" +
+ "</div>", "Sidebar");
map.components.add(htmlControl);
where labels refers to:
will display additional labels. This would obviously be better left in a CSS stylesheet of course.
EDIT: Solved:
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
I'm a cut-and-paste coder and while I intend on learning the syntax better, I'm on a deadline for now so I'm asking for help. I have googled extensively and while there are solutions to my problem, I haven't found one that works for me. My KML file is hosted on Google Drive so instead of a file url there is a driveFileId.
If you want to preserveViewport, you normally just add it to the layer object and set it to 'true'. However my KML file won't let me override its default zoom level where the bounds fit the screen no matter how I write it. Can someone help? This is the working object:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
EDIT: Here's the whole thing. Perhaps you can see if there are redundancies or contradictions that are causing this.
<!DOCTYPE html>
<html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Aexamplekey0&sensor=true"></script>
<style>
#map {
width: 310px;
height: 410px;
}
</style>
<script>
window.onload = function () {
var latlng = new google.maps.LatLng(53.385873, -1.471471);
var styles = [
{
//whatever
}
]
var myOptions = {
zoom: 15,
disableDefaultUI: false,
styles: styles
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Based on the current release API documentation, you should be able to set the preserveViewport option in the object you instantiate:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg",
preserveViewport: true});
layer.setMap(map);
Without further information, such as a URL to your KML data, information about your map center and zoom, there's not much further that can be said.
GOT IT!
Here it is:
var opt = { minZoom: 11, maxZoom: 15 };
map.setOptions(opt);
And then in your the myOptions object you set your default zoom. Solution found here: Google Maps v3 - limit viewable area and zoom level
thanks to #ChrisV. I don't know why but the KML Layer won't allow any permutation of the original preserveViewport code.