stackoom
  简体   繁体   中英

How to setup HERE Base Map Tiles API for HERE Javascript API?

 原文  2019-07-23 18:02:11  4   2    javascript/ here-api

Question

I am succesfully implementing the HERE Javascript API for my web app. I wanted to lighten the map presentation, so I first tried to create my own map style as presented on this guide .

The examples given work fine but I could not tune it as I wish without malfunctioning (I guess indentation is the problem but I could not verify it despite hours of trying). I could not find any "Map styling file generator" so I almost gave up until I found these:

Unfortunately, the given code in these answers does not work: 

//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

whereas the defaultLayers.vector.normal.map and the reduced objects seems to be the same kind of objects, using the defaultLayers get me the default map and using the reduced Layout just get me a blank map without errors on console but those GET type Errors: 

mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d   @   mapsjs-core.js:33
ic  @   mapsjs-core.js:34
application/json    @   mapsjs-core.js:70
af.yj   @   mapsjs-core.js:69
(anonymous) @   mapsjs-core.js:44
(anonymous) @   mapsjs-core.js:44
zj  @   mapsjs-core.js:44
add @   mapsjs-core.js:44
rd  @   mapsjs-core.js:43
af  @   mapsjs-core.js:69
n.ga    @   VM2398:15
n.hh    @   VM2398:18
tn  @   VM2398:14
T.vb    @   VM2398:14
T.th    @   VM2398:20
(anonymous) @   script.js:60

Below is my complete code : 

///### Credentials

// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
    'apikey': '[Well .. my credentials]'
});

///### Map setup

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

///### Map Interaction

// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// Set the map interactive
// 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:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');

Maybe the statement for getting Map Tiles has changed?

2 answers

solution1
 0  2019-07-24 03:49:17

I just made your source code worked. Hope this help! 

<!DOCTYPE html>
<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>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
      type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css"
      href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
  </head>
  <body>
  <div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
  omv:
    type: OMV
    max_zoom: 17
    min_display_zoom: 1
scene:
  background:
    color: [1.000, 1.000, 1.000, 1.00]

layers:
  water_areas:
    data: {source: omv, layer: water}
    draw:
      polygons:
        order: 1 # z-order of the layer
        color: [0.055, 0.604, 0.914, 1.00]
  road:
    data: {source: omv, layer: roads}
    draw:
      lines:
        order: 2
        color: [0.561, 0.561, 0.561, 1.00]
        width: 15
    major_road:
      filter:
        kind: 'major_road'
      draw:
        lines:
          color: [0.882, 0.553, 0.086, 1.00]
          width: 5px
`;
  //Initialize the Platform object:
    var platform = new H.service.Platform({
    'apikey': 'APIKEY'
    });

  // Get the default map types from the Platform object:
  var defaultLayers = platform.createDefaultLayers();

  // Instantiate the map:
  var map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lng: 13.8, lat: 52.3 }
    });

  var baseLayer = map.getBaseLayer();
  baseLayer.getProvider().setStyle(new H.map.Style(style));

</script>
</body>
</html>

solution2
 0 ACCPTED  2019-07-24 05:36:02

You should use js version 3.0 to make your code worked instead of 3.1 Does this work for you? 

<!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="position:absolute; width:100%; height:100%; background:grey" ></div>
  <!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->

  <script  type="text/javascript" charset="UTF-8" >


//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true
});

//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();

//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
  type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");

//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
  center: {
    lat: 52.3,
    lng: 13.8
  },
  zoom: 10
});

//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

  </script>
</body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Maps API for JavaScript in HERE MAP Here API - Remove Map Here Map Javascript API turn by turn navigation HERE Map Javascript Api gives InvalidArgumentError Rotate map with Here Maps JavaScript API Here Maps api: how to get current center showing on the map (JavaScript) How to remove map route for HERE map API HERE Maps Javascript API how to add geocordination map to form with here api HERE maps for JavaScript API: How to calculate route?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM