Hi i'm new with HERE and i'm having trouble to use the map api for javascript. I followed this tutorial https://developer.here.com/documentation/maps/3.1.35.3/dev_guide/topics/quick-start.html and it doesn't work.
I have the 403 error in the dev tools like below.
Here is the response in the dev tools in the network page
Reponse
This is how I add the js file for HERE
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
Here is my code I tried to show the map
var platform = new H.service.Platform({
'apikey': '{my_key}'
});
// Obtain the default map types from the platform object
var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) the map
var map = new H.Map(
document.getElementById('Map_Content'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: CenterMap//param created before but its an object with lat;lng
});
The last thing I'm doing that i'm not sure is in the Here platform I added a project and I put the service, but I couldn't find the one in the tutorial (Maps API service(s)) so I added the service HERE Map Attributes instead
Please try with the below example of map at the specified location.
/**
* 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
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
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));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
}
#map {
width: 95%;
height: 450px;
background: grey;
}
#panel {
width: 100%;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Map at a specified location</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
<body id="markers-on-the-map">
<div class="page-header">
<h1>Map at a specified location</h1>
<p>Display a map at a specified location and zoom level</p>
</div>
<p>This example displays a movable map initially centered on the <b>Brandenburg Gate</b> in the centre of Berlin <i>(52.5159°N, 13.3777°E)</i></p>
<div id="map"></div>
<h3>Code</h3>
<p>
The <code>map.setCenter()</code> method and <code>map.setZoom() </code>method are able to control the location of the map.<br>
</p>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
To access the HERE map you need to have below script in the html page.
The same is defined in the api spec.
https://developer.here.com/documentation/maps/3.1.37.1/dev_guide/index.html
Related
I literally just copy and paste the example code from the API documentation (link: https://developer.here.com/cn/documentation/maps/hls-chn/topics/quick-start.html)
and I put in my own app_id and app_code into the appropriate lines (for obvious reasons I cannot disclose my api key and code; sorry).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': '{YOUR_APP_ID}',
'app_code': '{YOUR_APP_CODE}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
However, the browser reported the following errors: screenshot of errors in console:
This is what the webpage looks like: the map does not display
The errors are confusing because the code snippet was not written by me, but directly copied from HERE Map's developer documentation. Your help is much appreciated. Thank you.
If you are using freemium plan then probably you should follow this documentation-
https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html
and the below code-
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': 'Your_api_key'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
The code is taken right from the bottom of the "get started" page. The only change is the API key replacement.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': '{YOUR_APIKEY}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
This is what it looks like in Chrome 79 on Linux Debian:
Compare with the same page in Firefox 68 on Linux Debian:
Is this a bug? Can someone please give any troubleshooting/workaround tips?
We try to run this example on Linux Debian env. It worked fine. Can you please share the chrome wget that you have used to install the chrome.
Sharing the screenshot here:
I'm updated Maps API for JavaScript to 3.1v. After that Raster map doesn't show correctly. After some zooms getting not a clear picture and problems with the font. Actual:
I've tried to put some different pixel ratio and another map types but it didn't help. Is there a bug?
This is how I init map:
var platform = new H.service.Platform({
'apikey': apiKey,
});
$scope.defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
pois: true
});
$scope.geocoder = platform.getGeocodingService();
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng }
});
$scope.markerGroup = new H.map.Group();
$scope.map.addObject($scope.markerGroup);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents($scope.map)); //Step 3: make the map interactive
$scope.ui = H.ui.UI.createDefault($scope.map, $scope.defaultLayers); ```
**Please check imgs:**
Actual: https://i.stack.imgur.com/Vu17g.jpg
Expected: https://i.stack.imgur.com/Tcid8.jpg
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Refs:
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
Add pixelRatio parameter next to zoom & center:
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng },
pixelRatio: window.devicePixelRatio || 1
}
);
and disable fractional zoom on Behavior as well as ZoomControl UI (which is enabled by default in v3.1):
behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
$scope.ui.removeControl('zoom');
$scope.ui.addControl('zoom', new H.ui.ZoomControl({
fractionalZoom: false,
alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
}));
For more details see documentation for map options: https://developer.here.com/documentation/maps/topics_api/h-map-options.html#h-map-options
ZoomControl Options:
https://developer.here.com/documentation/maps/topics_api/h-ui-zoomcontrol-options.html
and Features to be disabled on Behavior: https://developer.here.com/documentation/maps/topics_api/h-mapevents-behavior-feature.html
Please add below libraries and try to run it, also share the libraries that has been used in the code.
<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.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
type="text/javascript" charset="utf-8"></script>
With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?
I get a lot of problems with the "define" in the famo.us code...
What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like
<head>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({'localhost:3000': 'public/'});
require(['main']);
</script>
</head>
<body>
</body>
Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with
Uncaught ReferenceError: define is not defined
from main.js
and main.js looks like
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform : function(){
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
});
mainContext.add(centerSpinModifier).add(logo);
});
from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.
Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)
Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js...
html:
<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>
js:
require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example
//var Engine = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'Hello World',
classes: ['red-bg'],
properties: {
lineHeight: '200px',
textAlign: 'center'
}
});
mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example
});
Have you tried to import mjn:famous package into your meteor project?
meteor add mjn:famous
great question; famo.us is moving away from Yeoman / Grunt
to clean up rich's answer, here's a simple index.html
<html>
<script src='http://code.famo.us/lib/require.js'></script>
<script src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<script>
require([
'famous/core/Engine',
'famous/core/Surface',
'famous/core/Modifier'
], function(Engine, Surface, Modifier){
var context = Engine.createContext();
var helloSurf = new Surface({
content: 'hello world',
properties: {
backgroundColor:'red'
}
});
var helloMod = new Modifier({
size: [100, 100],
origin: [.5, 0]
});
context.add(helloMod).add(helloSurf);
});
</script>
<html>
Using a KmlLayer object within the Google Maps API, is it possible to allow a user to adjust the transparency of the overlay.png features, referenced by some .kml file?
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. Here is an example using jquery:
<!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.
This style is working for me:
#map > div > div > div > div > div:nth-child(2) img[draggable="false"] {
opacity: 0.4;
}