Giter VIP home page Giter VIP logo

maps-api-for-javascript-examples's Introduction

Maps API for JavaScript

This repository holds a series of JavaScript based examples using the HERE Maps API for JavaScript. More information about the API can be found on https://here.com/docs website. To run the examples, clone this repo to a folder on your Desktop. Replace the credentials in the test-credentials.js file with your own credentials.

Note: In order to get the sample code to work, you must replace all instances of window.apikey within the code and use your own HERE credentials.

You can obtain a set of credentials from the HERE Base Plan Pricing page on here.com.

See the LICENSE file in the root of this project for license details.

Maps API for JavaScript

All of the following examples use version 3.1 of the API

maps-api-for-javascript-examples's People

Contributors

ajinkyagosavi avatar andriiheonia avatar b3none avatar bartekkozub avatar bernardmendonca avatar dbacarel avatar freethan avatar gauravprabhu46 avatar germanz avatar greenred123 avatar haifeng2013 avatar jason-fox avatar kplotnik avatar mkarpicki avatar ngross71 avatar sebquintas-zz avatar sschuberth avatar tiagomsmagalhaes avatar ttobis avatar vmmhere avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

maps-api-for-javascript-examples's Issues

H.ui.base.Button(); is not working ... it creates a div

I tried to insert specific controls in a here map.

  • H.ui.base.Button(); is not working ... it creates a div
  • It is not possible to add attributes to button such as alt or title thru the api.
  • i tried to make addEventListener working but without success (may be my code is wrong).
    var U_I = new H.ui.UI(map);
    
    var container = new H.ui.Control();
    container.addClass('here-ctrl here-ctrl-group');

    var button = new H.ui.base.Element('button', 'here-ctrl-icon map_control');
    container.addChild(button);
    button.addEventListener('click', function() { alert(1); });
    
    var button = new H.ui.base.Element('button', 'here-ctrl-icon map_center');
    container.addChild(button);
    button.addEventListener('click', function() { alert(2); });
    
    container.setAlignment('top-right');
    
    U_I.addControl('myControls', container );
    U_I.addControl('ScaleBar', new H.ui.ScaleBar() );

the rendering is made by css

8cwmj

cannot install simple-element-resize-detector

Following the instructions here: https://developer.here.com/documentation/maps/3.1.26.0/dev_guide/topics/react-practices.html

I have succeeded in installing the maps api for javascript, and rendered a basic map, however, I cannot proceed to install the resize package. The error in my console is as follows:

PS C:\Users\webdev\countries3> npm install simple-element-resize-detector --save
npm ERR! code E404
npm ERR! 404 Not Found - GET https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/simple-element-resize-detector - not_found
npm ERR! 404 
npm ERR! 404  'simple-element-resize-detector@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AppData\Local\npm-cache\_logs\2022-01-04T17_03_21_962Z-debug.log

My npm config file contains the following:

@here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/=true
registry=https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

How do I install the resize detector package? Something seems to be missing from the instructions. I don't see that package at all in the artifactory repo either.

Load mapsjs-core.js dynamically cause H is not defined

I have a problem using mapsjs-core.js v3.1 but the problem does not exist on v3.0
When i try to load here map dynamically i get the following error

        urls = ["https://js.api.here.com/v3/3.1/mapsjs-core.js",
            "https://js.api.here.com/v3/3.1/mapsjs-service.js",
            "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js",
            "https://js.api.here.com/v3/3.1/mapsjs-ui.js"];

    urls.forEach(function (url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        head.appendChild(script);
    });
Uncaught ReferenceError: H is not defined at mapsjs-service.js:7
mapsjs-service.js:7
mapsjs-mapevents.js:7 
Uncaught ReferenceError: H is not defined at mapsjs-mapevents.js:7
mapsjs-mapevents.js:7
mapsjs-ui.js:7 Uncaught ReferenceError: H is not defined at mapsjs-ui.js:7

HERE Maps API JS : How to change the date format in incident popup?

Hi,
Even if layers and UI have been created with french language : var defaultLayers = platform.createDefaultLayers({lg : 'fre'}); var ui = H.ui.UI.createDefault(map, defaultLayers,'fr-FR');

dates in layer incidents on popup are displayed in english format : It's like mm/dd/yyyy and I would like dd/mm/yyyy

How can I do it with here api javascript 3 ?
Thanks

image

Tangram: Style: error compiling program

Thanks for such great library 🙂

We recently upgraded the heremaps version from 1.23.0 to 1.30.7 and we started to see this error Tangram [error]: Style: error compiling program for style '1_translucent-pattern-lines' in production logs.

I saw the release notes from 1.23.0 upto 1.30.7 to see if missed any breaking changes but there is nothing caught my eyes.

When there is an error the user will see the below image 👇

image


I cannot able to reproduce this locally with :
Chrome 97.0.4692.71 (Official Build) (x86_64)
macOS 11.4

OR
Chrome 97
Windows 10


Affected users are with version :

  • Chrome 97, 96 and Windows 10 & 7 combinations.
  • Edge 97 & Window 10
  • FF 96 & Window 10
  • Safari 15 & macOS 10

Open question:
From the release notes I see there is no version for 1.23.0 but when installed it installs the exact version. I assume heremaps 3 has this preceding 3 in front of every release.
This is what we used in our package.json "@here/maps-api-for-javascript": "^1.23.0"


Full Log:

console error: Tangram [error]: Style: error compiling program for style '1_translucent-pattern-lines' (program key 'program') <error: unable to serialize object> Error: Error: WebGL program error:
            VALIDATE_STATUS: false
            ERROR: 0
            --- Vertex Shader ---
            precision highp float;
#define TANGRAM_EPSILON 0.00001
#define TANGRAM_LAYER_DELTA 0.00006103515625
#define TANGRAM_TILE_SCALE vec3(4096., 4096., u_meters_per_pixel * 256.)
#define TANGRAM_HEIGHT_SCALE 16.0
#define TANGRAM_ALPHA_TEST 0.1
#define TANGRAM_WORLD_POSITION_WRAP 100000.0
#define TANGRAM_BLEND_TRANSLUCENT
#define TANGRAM_MATERIAL_AMBIENT
#define TANGRAM_MATERIAL_DIFFUSE
#define TANGRAM_LIGHTING_FRAGMENT
#define TANGRAM_LAYER_ORDER
#define TANGRAM_CROP_BY_TILE
#define TANGRAM_BLOCK_CAMERA
#define TANGRAM_BLOCK_GLOBAL
#define TANGRAM_BLOCK_SETUP
#define TANGRAM_BLOCK_UTILS
#define TANGRAM_BLOCK_LIGHTING
#define TANGRAM_BLOCK_MATERIAL
#define TANGRAM_VERTEX_SHADER
uniform vec2 u_resolution;uniform vec4 u_tile_origin;uniform float u_tile_proxy_depth;uniform float u_meters_per_pixel;uniform float u_device_pixel_ratio;uniform sampler2D u_uniforms;uniform mat4 u_model;uniform mat4 u_modelView;uniform mat3 u_normalMatrix;uniform mat3 u_inverseNormalMatrix;uniform vec3 u_map_position;uniform float u_antialias;uniform vec2 u_linecaps;uniform float u_linejoin;uniform float u_miter_limit;uniform float u_dash_index;uniform vec2 u_dash_caps;uniform float u_dash_phase;uniform float u_dash_period;attribute vec4 a_position;attribute vec4 a_color;attribute float a_width;
#ifdef TANGRAM_DEBUG_TRIANGLES
attribute vec3 a_barycentric;
#endif
attribute vec2 a_normal;attribute float a_length;attribute vec2 a_segment;attribute vec2 a_texcoord;attribute vec2 a_angles;attribute vec4 a_tangents;attribute float a_closed;varying vec4 v_position;varying vec4 v_local_space_position;varying vec3 v_normal;varying vec4 v_color;varying vec4 v_world_position;
#ifdef TANGRAM_DEBUG_TRIANGLES
varying vec3 v_barycentric;
#endif
varying vec2 v_segment;varying vec2 v_angles;varying vec2 v_texcoord;varying vec2 v_distances;varying vec2 v_miter;varying float v_length;varying float v_linewidth_and_closed;varying float v_joinIndicator;
#define TANGRAM_NORMAL vec3(0., 0., 1.)
#ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
varying vec4 v_modelpos_base_zoom;
#endif
#if defined(TANGRAM_LIGHTING_VERTEX)
varying vec4 v_lighting;
#endif
#ifndef TANGRAM_HEIGHT_SCALE
float TANGRAM_HEIGHT_SCALE=16.0;
#endif
#define UNPACK_SCALING(x) (x / 1024.)

// tangram-block-start: ShaderProgram, camera, 0

            uniform mat4 u_projection;
            uniform vec3 u_eye;
            uniform vec2 u_center_offset;

            void cameraProjection (inout vec4 position) {
                position = u_projection * position;
            }
// tangram-block-end: ShaderProgram, camera, 0

// tangram-block-start: Material, material, 0
/*Defines globals:materiallight_accumulator_**/struct Material{
#ifdef TANGRAM_MATERIAL_EMISSION
vec4 emission;
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
vec3 emissionScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT
vec4 ambient;
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
vec3 ambientScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE
vec4 diffuse;
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
vec3 diffuseScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR
vec4 specular;float shininess;
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
vec3 specularScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
vec3 normalScale;float normalAmount;
#endif
};uniform Material u_material;Material material;
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
uniform sampler2D u_material_emission_texture;
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
uniform sampler2D u_material_ambient_texture;
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
uniform sampler2D u_material_diffuse_texture;
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
uniform sampler2D u_material_specular_texture;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
uniform sampler2D u_material_normal_texture;
#endif
vec4 light_accumulator_ambient=vec4(vec3(0.0),1.);vec4 light_accumulator_diffuse=vec4(vec3(0.0),1.);
#ifdef TANGRAM_MATERIAL_SPECULAR
vec4 light_accumulator_specular=vec4(vec3(0.0),1.);
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_SPHEREMAP
vec4 getSphereMap(in sampler2D _tex,in vec3 _eyeToPoint,in vec3 _normal,in vec2 _skew){vec3 eye=normalize(_eyeToPoint);eye.xy-=_skew;eye=normalize(eye);vec3 r=reflect(eye,_normal);r.z+=1.0;float m=2.*length(r);vec2 uv=r.xy/m+.5;return texture2D(_tex,uv);}
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_TRIPLANAR
vec3 getTriPlanarBlend(in vec3 _normal){vec3 blending=abs(_normal);blending=normalize(max(blending,0.00001));float b=(blending.x+blending.y+blending.z);return blending/b;}vec4 getTriPlanar(in sampler2D _tex,in vec3 _pos,in vec3 _normal,in vec3 _scale){vec3 blending=getTriPlanarBlend(_normal);vec4 xaxis=texture2D(_tex,fract(_pos.yz*_scale.x));vec4 yaxis=texture2D(_tex,fract(_pos.xz*_scale.y));vec4 zaxis=texture2D(_tex,fract(_pos.xy*_scale.z));return xaxis*blending.x+yaxis*blending.y+zaxis*blending.z;}
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_PLANAR
vec4 getPlanar(in sampler2D _tex,in vec3 _pos,in vec2 _scale){return texture2D(_tex,fract(_pos.xy*_scale.x));}
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
void calculateNormal(inout vec3 _normal){
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_UV
_normal+=texture2D(u_material_normal_texture,fract(v_texcoord*material.normalScale.xy)).rgb*2.0-1.0;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_PLANAR
vec3 normalTex=getPlanar(u_material_normal_texture,v_world_position.xyz,material.normalScale.xy).rgb*2.0-1.0;_normal+=normalTex;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_TRIPLANAR
vec3 normalTex=getTriPlanar(u_material_normal_texture,v_world_position.xyz,_normal,material.normalScale).rgb*2.0-1.0;_normal+=normalTex;
#endif
_normal=normalize(_normal);}
#endif
void calculateMaterial(in vec3 _eyeToPoint,inout vec3 _normal){
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_UV
material.emission*=texture2D(u_material_emission_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_PLANAR
material.emission*=getPlanar(u_material_emission_texture,v_world_position.xyz,material.emissionScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_TRIPLANAR
material.emission*=getTriPlanar(u_material_emission_texture,v_world_position.xyz,_normal,material.emissionScale);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_SPHEREMAP
material.emission*=getSphereMap(u_material_emission_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_UV
material.ambient*=texture2D(u_material_ambient_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_PLANAR
material.ambient*=getPlanar(u_material_ambient_texture,v_world_position.xyz,material.ambientScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_TRIPLANAR
material.ambient*=getTriPlanar(u_material_ambient_texture,v_world_position.xyz,_normal,material.ambientScale);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_SPHEREMAP
material.ambient*=getSphereMap(u_material_ambient_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_UV
material.diffuse*=texture2D(u_material_diffuse_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_PLANAR
material.diffuse*=getPlanar(u_material_diffuse_texture,v_world_position.xyz,material.diffuseScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_TRIPLANAR
material.diffuse*=getTriPlanar(u_material_diffuse_texture,v_world_position.xyz,_normal,material.diffuseScale);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_SPHEREMAP
material.diffuse*=getSphereMap(u_material_diffuse_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_UV
material.specular*=texture2D(u_material_specular_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_PLANAR
material.specular*=getPlanar(u_material_specular_texture,v_world_position.xyz,material.specularScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_TRIPLANAR
material.specular*=getTriPlanar(u_material_specular_texture,v_world_position.xyz,_normal,material.specularScale);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_SPHEREMAP
material.specular*=getSphereMap(u_material_specular_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
}
// tangram-block-end: Material, material, 0

// tangram-block-start: ShaderProgram, lighting, 0
/*Expected globals:materiallight_accumulator_**/struct DirectionalLight{vec3 ambient;vec3 diffuse;vec3 specular;vec3 direction;};void calculateLight(in DirectionalLight _light,in vec3 _eyeToPoint,in vec3 _normal){light_accumulator_ambient.rgb+=_light.ambient;float nDotVP=clamp(dot(_normal,-_light.direction),0.0,1.0);
#ifdef TANGRAM_MATERIAL_DIFFUSE
light_accumulator_diffuse.rgb+=_light.diffuse*nDotVP;
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR
float pf=0.0;if(nDotVP>0.0){vec3 reflectVector=reflect(_light.direction,_normal);float eyeDotR=max(dot(normalize(_eyeToPoint),reflectVector),0.0);pf=pow(eyeDotR,material.shininess);}light_accumulator_specular.rgb+=_light.specular*pf;
#endif
}
// tangram-block-end: ShaderProgram, lighting, 0

// tangram-block-start: ShaderProgram, lighting, 1

            uniform DirectionalLight u_default_light;
            DirectionalLight default_light;
            
// tangram-block-end: ShaderProgram, lighting, 1

// tangram-block-start: ShaderProgram, lighting, 2

            vec4 calculateLighting(in vec3 _eyeToPoint, in vec3 _normal, in vec4 _color) {

                // Do initial material calculations over normal, emission, ambient, diffuse and specular values
                calculateMaterial(_eyeToPoint,_normal);

                // Un roll the loop of individual ligths to calculate
                calculateLight(default_light, _eyeToPoint, _normal);


                //  Final light intensity calculation
                vec4 color = vec4(vec3(0.), _color.a); // start with vertex color alpha

                #ifdef TANGRAM_MATERIAL_EMISSION
                    color.rgb = material.emission.rgb;
                    color.a *= material.emission.a;
                #endif

                #ifdef TANGRAM_MATERIAL_AMBIENT
                    color.rgb += light_accumulator_ambient.rgb * _color.rgb * material.ambient.rgb;
                    color.a *= material.ambient.a;
                #else
                    #ifdef TANGRAM_MATERIAL_DIFFUSE
                        color.rgb += light_accumulator_ambient.rgb * _color.rgb * material.diffuse.rgb;
                    #endif
                #endif

                #ifdef TANGRAM_MATERIAL_DIFFUSE
                    color.rgb += light_accumulator_diffuse.rgb * _color.rgb * material.diffuse.rgb;
                    color.a *= material.diffuse.a;
                #endif

                #ifdef TANGRAM_MATERIAL_SPECULAR
                    color.rgb += light_accumulator_specular.rgb * material.specular.rgb;
                    color.a *= material.specular.a;
                #endif

                // Clamp final color
                color = clamp(color, 0.0, 1.0);

                return color;
            }
// tangram-block-end: ShaderProgram, lighting, 2

// tangram-block-start: ShaderProgram, global, 0
#ifdef TANGRAM_VERTEX_SHADER
vec4 modelPosition(){return vec4(a_position.xyz/TANGRAM_TILE_SCALE*exp2(u_tile_origin.z-u_tile_origin.w),1.)+vec4(0.,1.,0.,0.);}vec4 modelPositionBaseZoom(){return vec4(a_position.xyz/TANGRAM_TILE_SCALE,1.)+vec4(0.,1.,0.,0.);}
#endif
vec4 worldPosition(){return v_world_position;}
#ifdef TANGRAM_VERTEX_SHADER
vec4 wrapWorldPosition(vec4 world_position){
#if defined(TANGRAM_WORLD_POSITION_WRAP)
vec2 anchor=u_tile_origin.xy-mod(u_tile_origin.xy,TANGRAM_WORLD_POSITION_WRAP);world_position.xy-=anchor;
#endif
return world_position;}
#endif
#if defined(TANGRAM_VERTEX_SHADER)
vec3 worldNormal(){return TANGRAM_NORMAL;}
#elif defined(TANGRAM_FRAGMENT_SHADER)
vec3 worldNormal(){return u_inverseNormalMatrix*TANGRAM_NORMAL;}
#endif

// tangram-block-end: ShaderProgram, global, 0

// tangram-block-start: ShaderProgram, global, 1
void applyLayerOrder(float layer,inout vec4 position){position.z-=layer*TANGRAM_LAYER_DELTA*position.w;}
// tangram-block-end: ShaderProgram, global, 1

// tangram-block-start: ShaderProgram, global, 2

#if defined(TANGRAM_FEATURE_SELECTION) && defined(TANGRAM_VERTEX_SHADER)
attribute vec4 a_selection_color;varying vec4 v_selection_color;uniform vec4 u_selection_discard0;uniform vec4 u_selection_discard1;uniform vec4 u_selection_discard2;uniform vec4 u_selection_discard3;uniform vec4 u_selection_discard4;uniform vec4 u_selection_discard5;uniform vec4 u_selection_discard6;uniform vec4 u_selection_discard7;uniform vec4 u_selection_discard8;uniform vec4 u_selection_discard9;
#endif

// tangram-block-end: ShaderProgram, global, 2

// tangram-block-start: ShaderProgram, global, 3
uniform float u_view_pan_snap_timer;void snapToPixelGrid(inout vec4 position){vec2 position_fract=fract((((position.xy/position.w)+1.)*.5)*u_resolution);vec2 position_snap=position.xy+((step(0.5,position_fract)-position_fract)*position.w*2./u_resolution);
#ifdef TANGRAM_VIEW_PAN_SNAP_RATE
position.xy=mix(position.xy,position_snap,clamp(u_view_pan_snap_timer*TANGRAM_VIEW_PAN_SNAP_RATE,0.,1.));
#else
position.xy=position_snap;
#endif
}
// tangram-block-end: ShaderProgram, global, 3

const float PI=3.141592653589793;const float THETA=15.0*PI/180.0;float cross(in vec2 v1,in vec2 v2){return v1.x*v2.y-v1.y*v2.x;}float signed_distance(in vec2 v1,in vec2 v2,in vec2 v3){return cross(v2-v1,v1-v3)/length(v2-v1);}void rotate(in vec2 v,in float angle,out vec2 result){float cosine=cos(angle);float sine=sin(angle);result=vec2(cosine*v.x-sine*v.y,sine*v.x+cosine*v.y);}void main(){

// tangram-block-start: ShaderProgram, setup, 0

#if defined(TANGRAM_FEATURE_SELECTION) && defined(TANGRAM_VERTEX_SHADER)
if(a_selection_color.rgb==vec3(0.)||a_selection_color==u_selection_discard0||a_selection_color==u_selection_discard1||a_selection_color==u_selection_discard2||a_selection_color==u_selection_discard3||a_selection_color==u_selection_discard4||a_selection_color==u_selection_discard5||a_selection_color==u_selection_discard6||a_selection_color==u_selection_discard7||a_selection_color==u_selection_discard8||a_selection_color==u_selection_discard9){gl_Position=vec4(0.,0.,0.,1.);return;}v_selection_color=a_selection_color;
#endif

// tangram-block-end: ShaderProgram, setup, 0

// tangram-block-start: ShaderProgram, setup, 1

            default_light = u_default_light;

        
// tangram-block-end: ShaderProgram, setup, 1

// tangram-block-start: Material, setup, 0

material = u_material;

// tangram-block-end: Material, setup, 0

#ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
v_modelpos_base_zoom=modelPositionBaseZoom();
#endif
float linewidth=a_width*2.0;v_angles=a_angles;v_segment=a_segment;v_color=a_color;v_length=a_length;v_texcoord=a_texcoord;
#ifdef TANGRAM_DEBUG_TRIANGLES
v_barycentric=a_barycentric;
#endif
v_color.a=min(linewidth,v_color.a);linewidth=max(linewidth,1.0);linewidth/=exp2(u_map_position.z-u_tile_origin.w);v_linewidth_and_closed=linewidth*(a_closed>0.0 ?-1.0 : 1.0);if(v_color.a<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}float width=ceil(1.25*u_antialias+linewidth)/2.0;vec2 t1=normalize(a_tangents.xy);vec2 t2=normalize(a_tangents.zw);float u=a_texcoord.x;u*=-1.0;float v=a_texcoord.y;vec4 position=vec4(a_position.xy,a_position.z/TANGRAM_HEIGHT_SCALE,1.0);if(t1!=t2){float angle=a_texcoord.x==1.0 ? a_angles.x : a_angles.y;vec2 t=normalize(t1+t2);vec2 o=vec2(+t.y,-t.x);float segmentLength=a_segment.y-a_segment.x;float magnitude=width/cos(angle/2.0);float sqMagnitude=magnitude*magnitude;float seg1SqMagnitude=dot(a_tangents.xy,a_tangents.xy);float seg2SqMagnitude=dot(a_tangents.zw,a_tangents.zw);if((abs(magnitude)>linewidth)&&(sqMagnitude>=min(seg1SqMagnitude,seg2SqMagnitude))){if(u==1.0){o=vec2(-t2.y,+t2.x);}else{o=vec2(-t1.y,+t1.x);}magnitude=width;angle=0.0;v_angles.x=0.0;v_angles.y=0.0;}if(u_dash_index>0.0){if((abs(angle)>THETA)){position.xy+=v*width*o/cos(angle/2.0);float s=sign(angle);if(angle<0.0){if(u==+1.0){u=v_segment.y+v*width*tan(angle/2.0);if(v==1.0){position.xy-=2.0*width*t1/sin(angle);u-=2.0*width/sin(angle);}}else{u=v_segment.x-v*width*tan(angle/2.0);if(v==1.0){position.xy+=2.0*width*t2/sin(angle);u+=2.0*width/sin(angle);}}}else{if(u==+1.0){u=v_segment.y+v*width*tan(angle/2.0);if(v==-1.0){position.xy+=2.0*width*t1/sin(angle);u+=2.0*width/sin(angle);}}else{u=v_segment.x-v*width*tan(angle/2.0);if(v==-1.0){position.xy-=2.0*width*t2/sin(angle);u-=2.0*width/sin(angle);}}}}else{position.xy+=v*width*o/cos(angle/2.0);if(u==+1.0){u=v_segment.y;}else{u=v_segment.x;}}}else{position.xy+=v*o*magnitude;if(u==+1.0){u=v_segment.y+v*width*tan(angle/2.0);}else{u=v_segment.x-v*width*tan(angle/2.0);}}v_joinIndicator=(segmentLength+v*width*tan(angle/2.0))/segmentLength;}else{v_joinIndicator=-1.0;vec2 o=vec2(+t1.y,-t1.x);position.xy+=v*width*o;if(u==-1.0){u=v_segment.x-width;position.xy-=width*t1;}else{u=v_segment.y+width;position.xy+=width*t2;}}vec2 t;vec2 curr=a_position.xy;if(a_texcoord.x>=0.0){vec2 next=curr+t2*(v_segment.y-v_segment.x);rotate(t1,+a_angles.x/2.0,t);v_miter.x=signed_distance(curr,curr+t,position.xy);rotate(t2,+a_angles.y/2.0,t);v_miter.y=signed_distance(next,next+t,position.xy);}else{vec2 prev=curr-t1*(v_segment.y-v_segment.x);rotate(t1,-a_angles.x/2.0,t);v_miter.x=signed_distance(prev,prev+t,position.xy);rotate(t2,-a_angles.y/2.0,t);v_miter.y=signed_distance(curr,curr+t,position.xy);}v_distances=vec2(u,v*width);v_world_position=wrapWorldPosition(u_model*position);v_local_space_position=position;position=u_modelView*position;

v_position=position;v_normal=normalize(u_normalMatrix*TANGRAM_NORMAL);
#if defined(TANGRAM_LIGHTING_VERTEX)
vec3 normal=v_normal;

v_lighting=calculateLighting(position.xyz-u_eye,normal,vec4(1.));
#endif
cameraProjection(position);
#ifdef TANGRAM_LAYER_ORDER
applyLayerOrder(a_position.w+u_tile_proxy_depth+1.,position);
#endif
gl_Position=position;}
            --- Fragment Shader ---
            precision highp float;
#define TANGRAM_EPSILON 0.00001
#define TANGRAM_LAYER_DELTA 0.00006103515625
#define TANGRAM_TILE_SCALE vec3(4096., 4096., u_meters_per_pixel * 256.)
#define TANGRAM_HEIGHT_SCALE 16.0
#define TANGRAM_ALPHA_TEST 0.1
#define TANGRAM_WORLD_POSITION_WRAP 100000.0
#define TANGRAM_BLEND_TRANSLUCENT
#define TANGRAM_MATERIAL_AMBIENT
#define TANGRAM_MATERIAL_DIFFUSE
#define TANGRAM_LIGHTING_FRAGMENT
#define TANGRAM_LAYER_ORDER
#define TANGRAM_CROP_BY_TILE
#define TANGRAM_BLOCK_CAMERA
#define TANGRAM_BLOCK_GLOBAL
#define TANGRAM_BLOCK_SETUP
#define TANGRAM_BLOCK_UTILS
#define TANGRAM_BLOCK_LIGHTING
#define TANGRAM_BLOCK_MATERIAL
#define TANGRAM_FRAGMENT_SHADER
uniform vec2 u_resolution;uniform vec4 u_tile_origin;uniform float u_meters_per_pixel;uniform float u_device_pixel_ratio;uniform mat3 u_normalMatrix;uniform mat3 u_inverseNormalMatrix;uniform sampler2D u_dash_atlas;uniform float u_antialias;uniform vec2 u_linecaps;uniform float u_linejoin;uniform float u_miter_limit;uniform float u_dash_phase;uniform float u_dash_period;uniform float u_dash_index;uniform vec2 u_dash_caps;varying vec4 v_position;varying vec4 v_local_space_position;varying vec3 v_normal;varying vec4 v_color;varying vec4 v_world_position;
#ifdef TANGRAM_DEBUG_TRIANGLES
varying vec3 v_barycentric;
#endif
varying vec2 v_segment;varying vec2 v_angles;varying vec2 v_texcoord;varying vec2 v_distances;varying vec2 v_miter;varying float v_length;varying float v_linewidth_and_closed;varying float v_joinIndicator;
#define TANGRAM_NORMAL v_normal
#ifdef TANGRAM_MODEL_POSITION_BASE_ZOOM_VARYING
varying vec4 v_modelpos_base_zoom;
#endif
#if defined(TANGRAM_LIGHTING_VERTEX)
varying vec4 v_lighting;
#endif

// tangram-block-start: ShaderProgram, camera, 0

            uniform mat4 u_projection;
            uniform vec3 u_eye;
            uniform vec2 u_center_offset;

            void cameraProjection (inout vec4 position) {
                position = u_projection * position;
            }
// tangram-block-end: ShaderProgram, camera, 0

// tangram-block-start: Material, material, 0
/*Defines globals:materiallight_accumulator_**/struct Material{
#ifdef TANGRAM_MATERIAL_EMISSION
vec4 emission;
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
vec3 emissionScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT
vec4 ambient;
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
vec3 ambientScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE
vec4 diffuse;
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
vec3 diffuseScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR
vec4 specular;float shininess;
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
vec3 specularScale;
#endif
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
vec3 normalScale;float normalAmount;
#endif
};uniform Material u_material;Material material;
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
uniform sampler2D u_material_emission_texture;
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
uniform sampler2D u_material_ambient_texture;
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
uniform sampler2D u_material_diffuse_texture;
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
uniform sampler2D u_material_specular_texture;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
uniform sampler2D u_material_normal_texture;
#endif
vec4 light_accumulator_ambient=vec4(vec3(0.0),1.);vec4 light_accumulator_diffuse=vec4(vec3(0.0),1.);
#ifdef TANGRAM_MATERIAL_SPECULAR
vec4 light_accumulator_specular=vec4(vec3(0.0),1.);
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_SPHEREMAP
vec4 getSphereMap(in sampler2D _tex,in vec3 _eyeToPoint,in vec3 _normal,in vec2 _skew){vec3 eye=normalize(_eyeToPoint);eye.xy-=_skew;eye=normalize(eye);vec3 r=reflect(eye,_normal);r.z+=1.0;float m=2.*length(r);vec2 uv=r.xy/m+.5;return texture2D(_tex,uv);}
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_TRIPLANAR
vec3 getTriPlanarBlend(in vec3 _normal){vec3 blending=abs(_normal);blending=normalize(max(blending,0.00001));float b=(blending.x+blending.y+blending.z);return blending/b;}vec4 getTriPlanar(in sampler2D _tex,in vec3 _pos,in vec3 _normal,in vec3 _scale){vec3 blending=getTriPlanarBlend(_normal);vec4 xaxis=texture2D(_tex,fract(_pos.yz*_scale.x));vec4 yaxis=texture2D(_tex,fract(_pos.xz*_scale.y));vec4 zaxis=texture2D(_tex,fract(_pos.xy*_scale.z));return xaxis*blending.x+yaxis*blending.y+zaxis*blending.z;}
#endif
#ifdef TANGRAM_MATERIAL_TEXTURE_PLANAR
vec4 getPlanar(in sampler2D _tex,in vec3 _pos,in vec2 _scale){return texture2D(_tex,fract(_pos.xy*_scale.x));}
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE
void calculateNormal(inout vec3 _normal){
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_UV
_normal+=texture2D(u_material_normal_texture,fract(v_texcoord*material.normalScale.xy)).rgb*2.0-1.0;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_PLANAR
vec3 normalTex=getPlanar(u_material_normal_texture,v_world_position.xyz,material.normalScale.xy).rgb*2.0-1.0;_normal+=normalTex;
#endif
#ifdef TANGRAM_MATERIAL_NORMAL_TEXTURE_TRIPLANAR
vec3 normalTex=getTriPlanar(u_material_normal_texture,v_world_position.xyz,_normal,material.normalScale).rgb*2.0-1.0;_normal+=normalTex;
#endif
_normal=normalize(_normal);}
#endif
void calculateMaterial(in vec3 _eyeToPoint,inout vec3 _normal){
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_UV
material.emission*=texture2D(u_material_emission_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_PLANAR
material.emission*=getPlanar(u_material_emission_texture,v_world_position.xyz,material.emissionScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_TRIPLANAR
material.emission*=getTriPlanar(u_material_emission_texture,v_world_position.xyz,_normal,material.emissionScale);
#endif
#ifdef TANGRAM_MATERIAL_EMISSION_TEXTURE_SPHEREMAP
material.emission*=getSphereMap(u_material_emission_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_UV
material.ambient*=texture2D(u_material_ambient_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_PLANAR
material.ambient*=getPlanar(u_material_ambient_texture,v_world_position.xyz,material.ambientScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_TRIPLANAR
material.ambient*=getTriPlanar(u_material_ambient_texture,v_world_position.xyz,_normal,material.ambientScale);
#endif
#ifdef TANGRAM_MATERIAL_AMBIENT_TEXTURE_SPHEREMAP
material.ambient*=getSphereMap(u_material_ambient_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_UV
material.diffuse*=texture2D(u_material_diffuse_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_PLANAR
material.diffuse*=getPlanar(u_material_diffuse_texture,v_world_position.xyz,material.diffuseScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_TRIPLANAR
material.diffuse*=getTriPlanar(u_material_diffuse_texture,v_world_position.xyz,_normal,material.diffuseScale);
#endif
#ifdef TANGRAM_MATERIAL_DIFFUSE_TEXTURE_SPHEREMAP
material.diffuse*=getSphereMap(u_material_diffuse_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_UV
material.specular*=texture2D(u_material_specular_texture,v_texcoord);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_PLANAR
material.specular*=getPlanar(u_material_specular_texture,v_world_position.xyz,material.specularScale.xy);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_TRIPLANAR
material.specular*=getTriPlanar(u_material_specular_texture,v_world_position.xyz,_normal,material.specularScale);
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR_TEXTURE_SPHEREMAP
material.specular*=getSphereMap(u_material_specular_texture,_eyeToPoint,_normal,u_center_offset);
#endif
#endif
}
// tangram-block-end: Material, material, 0

// tangram-block-start: ShaderProgram, lighting, 0
/*Expected globals:materiallight_accumulator_**/struct DirectionalLight{vec3 ambient;vec3 diffuse;vec3 specular;vec3 direction;};void calculateLight(in DirectionalLight _light,in vec3 _eyeToPoint,in vec3 _normal){light_accumulator_ambient.rgb+=_light.ambient;float nDotVP=clamp(dot(_normal,-_light.direction),0.0,1.0);
#ifdef TANGRAM_MATERIAL_DIFFUSE
light_accumulator_diffuse.rgb+=_light.diffuse*nDotVP;
#endif
#ifdef TANGRAM_MATERIAL_SPECULAR
float pf=0.0;if(nDotVP>0.0){vec3 reflectVector=reflect(_light.direction,_normal);float eyeDotR=max(dot(normalize(_eyeToPoint),reflectVector),0.0);pf=pow(eyeDotR,material.shininess);}light_accumulator_specular.rgb+=_light.specular*pf;
#endif
}
// tangram-block-end: ShaderProgram, lighting, 0

// tangram-block-start: ShaderProgram, lighting, 1

            uniform DirectionalLight u_default_light;
            DirectionalLight default_light;
            
// tangram-block-end: ShaderProgram, lighting, 1

// tangram-block-start: ShaderProgram, lighting, 2

            vec4 calculateLighting(in vec3 _eyeToPoint, in vec3 _normal, in vec4 _color) {

                // Do initial material calculations over normal, emission, ambient, diffuse and specular values
                calculateMaterial(_eyeToPoint,_normal);

                // Un roll the loop of individual ligths to calculate
                calculateLight(default_light, _eyeToPoint, _normal);


                //  Final light intensity calculation
                vec4 color = vec4(vec3(0.), _color.a); // start with vertex color alpha

                #ifdef TANGRAM_MATERIAL_EMISSION
                    color.rgb = material.emission.rgb;
                    color.a *= material.emission.a;
                #endif

                #ifdef TANGRAM_MATERIAL_AMBIENT
                    color.rgb += light_accumulator_ambient.rgb * _color.rgb * material.ambient.rgb;
                    color.a *= material.ambient.a;
                #else
                    #ifdef TANGRAM_MATERIAL_DIFFUSE
                        color.rgb += light_accumulator_ambient.rgb * _color.rgb * material.diffuse.rgb;
                    #endif
                #endif

                #ifdef TANGRAM_MATERIAL_DIFFUSE
                    color.rgb += light_accumulator_diffuse.rgb * _color.rgb * material.diffuse.rgb;
                    color.a *= material.diffuse.a;
                #endif

                #ifdef TANGRAM_MATERIAL_SPECULAR
                    color.rgb += light_accumulator_specular.rgb * material.specular.rgb;
                    color.a *= material.specular.a;
                #endif

                // Clamp final color
                color = clamp(color, 0.0, 1.0);

                return color;
            }
// tangram-block-end: ShaderProgram, lighting, 2

// tangram-block-start: ShaderProgram, global, 0
#ifdef TANGRAM_VERTEX_SHADER
vec4 modelPosition(){return vec4(a_position.xyz/TANGRAM_TILE_SCALE*exp2(u_tile_origin.z-u_tile_origin.w),1.)+vec4(0.,1.,0.,0.);}vec4 modelPositionBaseZoom(){return vec4(a_position.xyz/TANGRAM_TILE_SCALE,1.)+vec4(0.,1.,0.,0.);}
#endif
vec4 worldPosition(){return v_world_position;}
#ifdef TANGRAM_VERTEX_SHADER
vec4 wrapWorldPosition(vec4 world_position){
#if defined(TANGRAM_WORLD_POSITION_WRAP)
vec2 anchor=u_tile_origin.xy-mod(u_tile_origin.xy,TANGRAM_WORLD_POSITION_WRAP);world_position.xy-=anchor;
#endif
return world_position;}
#endif
#if defined(TANGRAM_VERTEX_SHADER)
vec3 worldNormal(){return TANGRAM_NORMAL;}
#elif defined(TANGRAM_FRAGMENT_SHADER)
vec3 worldNormal(){return u_inverseNormalMatrix*TANGRAM_NORMAL;}
#endif

// tangram-block-end: ShaderProgram, global, 0

// tangram-block-start: ShaderProgram, global, 1
void applyLayerOrder(float layer,inout vec4 position){position.z-=layer*TANGRAM_LAYER_DELTA*position.w;}
// tangram-block-end: ShaderProgram, global, 1

// tangram-block-start: ShaderProgram, global, 2

#if defined(TANGRAM_FEATURE_SELECTION) && defined(TANGRAM_VERTEX_SHADER)
attribute vec4 a_selection_color;varying vec4 v_selection_color;uniform vec4 u_selection_discard0;uniform vec4 u_selection_discard1;uniform vec4 u_selection_discard2;uniform vec4 u_selection_discard3;uniform vec4 u_selection_discard4;uniform vec4 u_selection_discard5;uniform vec4 u_selection_discard6;uniform vec4 u_selection_discard7;uniform vec4 u_selection_discard8;uniform vec4 u_selection_discard9;
#endif

// tangram-block-end: ShaderProgram, global, 2

// tangram-block-start: ShaderProgram, global, 3
uniform float u_view_pan_snap_timer;void snapToPixelGrid(inout vec4 position){vec2 position_fract=fract((((position.xy/position.w)+1.)*.5)*u_resolution);vec2 position_snap=position.xy+((step(0.5,position_fract)-position_fract)*position.w*2./u_resolution);
#ifdef TANGRAM_VIEW_PAN_SNAP_RATE
position.xy=mix(position.xy,position_snap,clamp(u_view_pan_snap_timer*TANGRAM_VIEW_PAN_SNAP_RATE,0.,1.));
#else
position.xy=position_snap;
#endif
}
// tangram-block-end: ShaderProgram, global, 3

// tangram-block-start: ShaderProgram, utils, 0
#ifndef UTILS
#define UTILS
bool isLocalSpacePixelOutsideTile(vec4 pixel_local_space_position,float tile_scale){return pixel_local_space_position.x<0.||pixel_local_space_position.x>=tile_scale||pixel_local_space_position.y>0.||pixel_local_space_position.y<=-tile_scale;}
#endif

// tangram-block-end: ShaderProgram, utils, 0

const float PI=3.141592653589793;const float HALF_PI=PI/2.0;const float THETA=15.0*PI/180.0;/***Compute distance to cap.*@param{int}type The Type of the cap(see CAP_TYPE in pattern_lines)*@param{float}dx The distance of the pixel from the beginning of the line(not straight distance,but along the legs)*@param{float}dy The distance of the pixel from the midline(see v_distances in vertex shader,aka ±1*half_line_width)*@param{float}aa_radius The distance from the mid-line from where antialiasing starts.*For example for a linewidth 10px width and 2px filter radius it is 10px/2-2px=3px.*@return{float}distance*/float cap(int type,float dx,float dy,float aa_radius){float dist=0.0;dx=abs(dx);dy=abs(dy);if(type==1)dist=sqrt(dx*dx+dy*dy);else if(type==3)dist=(dx+abs(dy));else if(type==2)dist=max(abs(dy),(aa_radius+dx-abs(dy)));else if(type==4)dist=max(dx,dy);else if(type==5)dist=max(dx+aa_radius,dy);return dist;}/***Compute distance to join.*@param{int}type The type of the join(see JOIN_TYPE in pattern_lines)*@param{vec2}segment Interpolated a_segment attribute from the vertex shader*@param{vec2}texcoord Pair of u/v coordinates to identify the 4 different extruded points of the segment.*@param{vec2}distances 2 component vector where:*x is the distance of the pixel from the beginning of the line(along the legs)*y is the  distance of the pixel from the midline(see v_distances in vertex shader,±1*half_line_width)*@param{vec2}miter Miter point coordiante*@param{float}miter_limit The miter limit*@param{float}linewidth The width of the line*@return{float}computed distance*/float join(in int type,in vec2 segment,in vec2 texcoord,in vec2 distances,in vec2 miter,in float miter_limit,in float linewidth){float dx=distances.x;float result=abs(distances.y);if((dx<segment.x)||(dx>segment.y)){if(type==1){float s=dx<segment.x ? segment.x : segment.y;result=max(result,length(distances-vec2(s,0.0)));}else{float m=abs(texcoord.x>=0.0 ? miter.x : miter.y);if(type==2){result=max(result,m);}else if(type==0){result=max(result,m-miter_limit*linewidth/2.0);}}}return result;}void main(void){

// tangram-block-start: ShaderProgram, setup, 0

#if defined(TANGRAM_FEATURE_SELECTION) && defined(TANGRAM_VERTEX_SHADER)
if(a_selection_color.rgb==vec3(0.)||a_selection_color==u_selection_discard0||a_selection_color==u_selection_discard1||a_selection_color==u_selection_discard2||a_selection_color==u_selection_discard3||a_selection_color==u_selection_discard4||a_selection_color==u_selection_discard5||a_selection_color==u_selection_discard6||a_selection_color==u_selection_discard7||a_selection_color==u_selection_discard8||a_selection_color==u_selection_discard9){gl_Position=vec4(0.,0.,0.,1.);return;}v_selection_color=a_selection_color;
#endif

// tangram-block-end: ShaderProgram, setup, 0

// tangram-block-start: ShaderProgram, setup, 1

            default_light = u_default_light;

        
// tangram-block-end: ShaderProgram, setup, 1

// tangram-block-start: Material, setup, 0

material = u_material;

// tangram-block-end: Material, setup, 0

vec4 color=v_color;vec3 normal=TANGRAM_NORMAL;
#ifdef TANGRAM_CROP_BY_TILE
if(isLocalSpacePixelOutsideTile(v_local_space_position,TANGRAM_TILE_SCALE.x)){discard;}
#endif
#if defined(TANGRAM_LIGHTING_FRAGMENT) && defined(TANGRAM_MATERIAL_NORMAL_TEXTURE)
calculateNormal(normal);
#endif
#if !defined(TANGRAM_LIGHTING_VERTEX)

#endif

#if defined(TANGRAM_LIGHTING_FRAGMENT)
color=calculateLighting(v_position.xyz-u_eye,normal,color);
#elif defined(TANGRAM_LIGHTING_VERTEX)
color*=v_lighting;
#endif

if(v_color.a<=0.0){discard;}bool solid=(u_dash_index==0.0);bool closed=v_linewidth_and_closed<0.0;float dx=v_distances.x;float dy=v_distances.y;float linewidth=abs(v_linewidth_and_closed);float aa_radius=linewidth/2.0-u_antialias;float dist=0.0;vec2 linecaps=u_linecaps;vec2 dash_caps=u_dash_caps;float line_start=0.0;float line_stop=v_length;if(solid){dist=abs(dy);bool potentialCap=!closed&&v_joinIndicator<0.0;if(potentialCap&&dx<line_start){dist=cap(int(u_linecaps.x),abs(dx),abs(dy),aa_radius);}else if(potentialCap&&dx>line_stop){dist=cap(int(u_linecaps.y),abs(dx)-line_stop,abs(dy),aa_radius);}else{dist=join(int(u_linejoin),v_segment,v_texcoord,v_distances,v_miter,u_miter_limit,linewidth);}}else{float segment_start=v_segment.x;float segment_stop=v_segment.y;float segment_center=(segment_start+segment_stop)/2.0;float freq=u_dash_period*linewidth;float dash_phase=u_dash_phase-1e-5;float u=mod(dx+dash_phase*linewidth,freq);vec4 tex=texture2D(u_dash_atlas,vec2(u/freq,u_dash_index));float dash_center=float(tex.x)*255.0*linewidth;float dash_type=floor(float(tex.y)*255.0+0.5);float _start=float(tex.z)*255.0*linewidth;float _stop=float(tex.a)*255.0*linewidth;float dash_start=dx-u+_start;float dash_stop=dx-u+_stop;if((dash_stop<segment_start)&&(dash_caps.x!=5.0)){float u=mod(segment_start+dash_phase*linewidth,freq);vec4 tex=texture2D(u_dash_atlas,vec2(u/freq,u_dash_index));dash_center=float(tex.x)*255.0*linewidth;float _start=float(tex.z)*255.0*linewidth;float _stop=float(tex.a)*255.0*linewidth;dash_start=segment_start-u+_start;dash_stop=segment_start-u+_stop;}else if((dash_start>segment_stop)&&(dash_caps.y!=5.0)){float u=mod(segment_stop+dash_phase*linewidth,freq);vec4 tex=texture2D(u_dash_atlas,vec2(u/freq,u_dash_index));dash_center=float(tex.x)*255.0*linewidth;float _start=float(tex.z)*255.0*linewidth;float _stop=float(tex.a)*255.0*linewidth;dash_start=segment_stop-u+_start;dash_stop=segment_stop-u+_stop;}bool discontinuous=((dx<segment_center)&&abs(v_angles.x)>THETA)||((dx>=segment_center)&&abs(v_angles.y)>THETA);float d_join=join(int(u_linejoin),v_segment,v_texcoord,v_distances,v_miter,u_miter_limit,linewidth);if(closed){line_start+=linewidth/2.0;line_stop-=linewidth/2.0;}if(dash_stop<=line_start){discard;}if(dash_start>=line_stop){discard;}if(discontinuous){if((dash_start>segment_stop)){discard;}if((dash_stop<segment_start)){discard;}if(dash_caps.x==1.0){if((u>_stop)&&(dash_stop>segment_stop)&&(abs(v_angles.y)<HALF_PI)){discard;}}if(dash_caps.y==1.0){if((u<_start)&&(dash_start<segment_start)&&(abs(v_angles.x)<HALF_PI)){discard;}}if((dash_caps.x!=1.0)&&(dash_caps.x!=5.0)){if((dash_start<segment_start)&&(abs(v_angles.x)<HALF_PI)){float a=v_angles.x/2.0;float cos_a=cos(a);float sin_a=sin(a);float x=(segment_start-dx)*cos_a-dy*sin_a;float y=(segment_start-dx)*sin_a+dy*cos_a;if(x>0.0){discard;}dash_caps.x=4.0;}}if((dash_caps.y!=1.0)&&(dash_caps.y!=5.0)){if((dash_stop>segment_stop)&&(abs(v_angles.y)<HALF_PI)){float a=v_angles.y/2.0;float cos_a=cos(a);float sin_a=sin(a);float x=(dx-segment_stop)*cos_a-dy*sin_a;float y=(dx-segment_stop)*sin_a+dy*cos_a;if(x>0.0){discard;}dash_caps.y=4.0;}}}if((dx<line_start)&&(dash_start<=line_start)&&(dash_stop>line_start)){dist=cap(int(linecaps.x),dx-line_start,dy,aa_radius);}else if((dx>line_stop)&&(dash_stop>line_stop)&&(dash_start<line_stop)){dist=cap(int(linecaps.y),dx-line_stop,dy,aa_radius);}else if(dash_type==1.0){dist=cap(int(dash_caps.x),abs(dash_center-u),dy,aa_radius);if((dx>line_start)&&(dx<line_stop)){dist=max(dist,d_join);}}else if(dash_type==0.0){dist=abs(dy);}else if(dash_type==2.0){dist=cap(int(dash_caps.y),abs(u-dash_center),dy,aa_radius);if((dx>line_start)&&(dx<line_stop)){dist=max(dist,d_join);}}if((dx>line_start)&&(dx<line_stop)){if((dx<=segment_start)&&(dash_start<=segment_start)&&(dash_stop>=segment_start)){dist=d_join;float angle=HALF_PI+v_angles.x;float f=abs((segment_start-dx)*cos(angle)-dy*sin(angle));dist=max(f,dist);}else if((dx>segment_stop)&&(dash_start<=segment_stop)&&(dash_stop>=segment_stop)){dist=d_join;float angle=HALF_PI+v_angles.y;float f=abs((dx-segment_stop)*cos(angle)-dy*sin(angle));dist=max(f,dist);}else if(dx<(segment_start-linewidth/2.)){discard;}else if(dx>(segment_stop+linewidth/2.)){discard;}}else if(dx<(segment_start-linewidth/2.)){discard;}else if(dx>(segment_stop+linewidth/2.)){discard;}}dist=dist-aa_radius;if(dist>=0.0){if(u_antialias==0.0){discard;}else{color=vec4(color.rgb,exp(-dist*dist)*color.a);}}
#ifdef TANGRAM_DEBUG_TRIANGLES
if(any(lessThan(v_barycentric,vec3(0.0085)))){color=vec4(0.0,1.0,0.0,1.0);}
#endif
gl_FragColor=color;}
    at Function.Qo.updateProgram (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:654951)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:647861)
    at Object.getProgram (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:690422)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1025234)
    at https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1024997
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1025131)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1024071)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1022496)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1022078)
    at t.value (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:1021380)
    at Cl.V (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:175228)
    at S.n.ci (https://<PROD_URL>/js/chunk.heremaps.cadf2092.js:1:203958)
    at i (https://<PROD_URL>/js/chunk-vendors.d14c51b3.js:31:387261)

Possibly related to #63 ?

JS v3.0 API Parsing/displaying of complex MultiPolygon shapes using KML/GeoJSON with "holes"

Hi there,

I've opened a support request relating to this same issue hoping that I'll get an answer back quickly relating to Heremaps JS API parsing of KML/GeoJSON MultiPolygons with "holes" in them as in the image below.

Screen Shot 2019-09-18 at 3 21 24 PM

As I'm a paying customer I've confirmed within the TCS Examples with KML and have uploaded the same KML file but don't see any of the cutout areas.

Screen Shot 2019-09-18 at 3 21 02 PM

So what's the current status for being able to work with complex shapes like this or how would I go about using these?

Let me know what else I could provide you to assist.

Cheers,
Jesse

Stick dom marker in here maps on zooming

I'm trying to add a truck Marker in the HERE Map. This marker is basically a truck icon. Here is my code.

addDomMarker(posObj): void {
     const map = this.mapComponent.getMap();
     (window as any).mymap = map;
     const domIcon = new H.map.DomIcon(truckIcon);
     this.truckMarker = new H.map.DomMarker(posObj, {
          icon: domIcon
          });

     map.addObject(this.truckMarker);
     map.setCenter(posObj);
  }



export const truckIcon = `<div class="truck-container">
<svg class="truck-marker" id="truck"
     ...        // svg code 
</svg></div>`;

Problem is when I'm zooming in or out, instead of sticking to the map , the dom marker is moving(animation).

Initial Position:
https://i.stack.imgur.com/qY3lj.png

After zoom out: ( black color dot is initial position.)

https://i.stack.imgur.com/lIR6i.png

After that it comes back to initial position. I want this marker to stick on the map rather that having animation. Is there any work around?

How do i get error response properly during route.calculateRoute({...}) ?

What i use ?

  • Reactjs
  • Here maps for javascript

My approach

My current approach to get calculated route are:

useEffect(() => {
  ...
  try {
    route.calculateRoute(
      {
        ...config,
      },
      sucess => {
        console.log(success);
      },
      error => {
        console.log(error);
      },
    );
  } catch (e) {
    console.log(e);
  }
  ...
});

That way works, but the error object I received are not complete, it only return this object:

//Error type that i got and able to process
Error: Error is NGEO_ERROR_ROUTE_NO_END_POINT
    at uq.a (eval at <anonymous> (mapsjs-core.js:71), <anonymous>:87:466)
    at eval (eval at <anonymous> (mapsjs-core.js:71), <anonymous>:87:176)

Based on here documentation, the error should return this object:

//Error type returned from the network request BUT i cannot process the result(type, subtype)
{
   "_type":"ns2:RoutingServiceErrorType",
   "type":"ApplicationError",
   "subtype":"NoRouteFound",
   "details":"Error is NGEO_ERROR_ROUTE_NO_END_POINT",
   "additionalData":[
      {
         "key":"error_code",
         "value":"NGEO_ERROR_ROUTE_NO_END_POINT"
      }
   ],
   "metaInfo":{
      "timestamp":"2020-04-23T02:34:32Z",
      "mapVersion":"8.30.107.158",
      "moduleVersion":"7.2.202016-6899",
      "interfaceVersion":"2.6.76",
      "availableMapVersion":[
         "8.30.107.158"
      ]
   }
}

I only get the details message from it, well the thing is I didn't know all the details message unless for subtype NoRouteFound, am i missing something ?

Because of this issue, my current workaround is to make it general error, so when user facing all errors it will only show general message that currently you can't get the route calculation.

They may wondering what exactly happened if I cannot give them proper message.

Didn't work for me

I took this code, as-is, and put it onto my website, just to see how it worked.

However, it does not give me the map it says it will give.

It does give me a sort of working map, but it is incomplete. If I then zoom out, I end up looking at a map of Berlin.

So something is sort of correct, it just looks like it's not passing through the Lat and Long.

Could someone verify that this code still works properly please? I looked into my developer tools and it looks like it's reading all of the files - I am not getting any file read errors, but there are some javascript errors going on.

CORS Blocks on Localhost while Developing Figma Plugin

I'm developing a Figma plugin to capture images from your map.
Following the example:
https://developer.here.com/documentation/examples/maps-js/styles/change-style-at-load

Produce the following error:
Access to XMLHttpRequest at 'http://js.api.here.com/v3/3.1/styles/omv/miami/normal.day.yaml' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Funny enough, after I change the styles, the map works on Localhost. Unfortunately it doesn't work as a figma plugin because this error.

platform.getSearchService Browse "In" parameter not functioning correctly?

I am attempting to return a list of places located within a circle object that Ive created for my map... Ive read the documentation, it explicitly states using an 'in' or 'at' parameter in my call to /browse, however I get the following response from the API gateway...

https://browse.search.hereapi.com/v1/browse?
  apikey={my api key}
  &in=circle:27.70525,85.28686;r=50
  &limit=100
  &categories=100-1100

status | 400
title | "Required parameter 'at' is missing"
correlationId | "de7d83c0-cff8-4e18-8201-865a0db2f210"
requestId | "REQ-07a1b42f-1f18-4b64-b675-8d3361ed01fb"

I get the same response from my code...

function getMiddleResults(circle) {
  var resultsService = platform.getSearchService()
  resultsService.browse({
       in: 'circle:' + circle.b.lat + ',' + circle.b.lng + ";r=" + circle.sa,
       limit: 10,
       categories: '100-1100'
   }, console.log, console.error);
}

Error: "Required parameter 'at' is missing"
c https://js.api.here.com/v3/3.1/mapsjs-core.js line 71 > eval:139
O https://js.api.here.com/v3/3.1/mapsjs-core.js line 71 > eval:3

When I add the 'at' parameter with the lat/lng position, the results returned are outside the defined circle radius value

Custom Marker HERE API 3.1

I want to have a custom marker.
An example with the default marker works.
http://nirvana.bplaced.net/20/

Unfortunately my example with the custom marker doesn't work.
http://nirvana.bplaced.net/21/

What is wrong with my code?

`function addMarkersToMap(map) {
var icon = new H.map.Icon('images/marker.png');
var myplaceMarker = new H.map.Marker({ lat: 49.302050, lng:10.571050 }, { icon: icon });
map.addObject(myplaceMarker);
}

var platform = new H.service.Platform({
'apikey': <API_KEY>
});
var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:49.302050, lng:10.571050},
zoom: 15,
pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener('resize', () => map.getViewPort().resize());

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

var ui = H.ui.UI.createDefault(map, defaultLayers);

window.onload = function () {
addMarkersToMap(map);
}`

Please help me.

Using easing animation in viewbounds?

I noticed a util exists for easing animations. First, I was curious to see any examples of this used. I tried looking in the guides and repos in the heremaps org. Also tried searching public repos on github.

Next, I have been struggling with animating viewbounds past the second parameter enabling or disabling animation. Is there any way easing or custom animations could be applied? I ask because our map changes size dynamically, updating viewbounds. Any code examples would be more than welcome if others have solved similar issues!

Are map views still available when using themed via Map Style Editor map?

See the shot below with the usually available map views

image

Wandering if using a custom theme map created via Map Style Editor are those still available?

References:

UPD:
Basically, I'm trying to ask whether a custom theme map created with Map Style Editor could be used in conjunction with other map views on the same map?

Styles created with Map Style Editor require it's own 'HARP' engine which is not compatible the defaultLayers. Is that correct?

Question: Is there another heremaps library that can create geo and wkt-strings?

For our application we now use the fleet.ls.hereapi for geofencing, thanks to you all of you for helping us out with it. 😄
The last issue we ran into is that, we cannot use the JavaScript API and need a tool, that creates a geo and than the wkt string from it like:

const rect = new H.geo.Rect(lat, long, lat2, long2);
const wkt = rect.toString();

Is there a npm package from here-maps that has this functionality? Or is there a standard or library we could use?

Thanks you!

InfoBubble size

Is there any chance to change size of InfoBubble?

I wish to change width: 300px; but using css seems doesn't work.

.H_ib_body, .H_ib_content {
  width: 300px !important;
}

According to your documentation maps-api-for-javascript-examples shouldn't work

Dear Everyone

I have a problem getting your example to work if I use typescript. Actually the typescript definition on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/heremaps/index.d.ts seems to be wrong. But it follows your documentation, so I actually think your documentation is wrong. Or your actual implementation deviates from the documentation.
Documentation I am referring to: https://developer.here.com/documentation/maps/topics_api/h-mapevents-pointer.html#h-mapevents-pointer

I am implementing the very simple example from https://github.com/heremaps/maps-api-for-javascript-examples/blob/8712f6b62b6e87fa3fa3b43fbf32cf0783f6e90a/finding-the-nearest-marker/js/app.js

I don't follow your example but your documentation. According to https://developer.here.com/documentation/maps/topics_api/h-mapevents-pointer.html#h-mapevents-pointer viewportX and viewportY are static variables.

So if my understanding of javascript is correct you need to use the fields from the class, not from the instance. So your example

function addClickEventListenerToMap(map) {
  // add 'tap' listener
  map.addEventListener('tap', function (evt) {
    var coords =  map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
    findNearestMarker(coords);
  }, false);
}

would not work, instead it would have to be

function addClickEventListenerToMap(map) {
  // add 'tap' listener
  map.addEventListener('tap', function (evt) {
    var coords =  map.screenToGeo(H.mapevents.Pointer.viewportX, H.mapevents.Pointer.viewportY);
    findNearestMarker(coords);
  }, false);
}

Reality shows that your implementation works while mine doesn't. So to my understanding your documentation is not correct. This in itself is not a problem, but the typescript implementation of the project is based on the documentation:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/heremaps/index.d.ts
So actually using typescript doesn't work here. So I'd like to change the typescript definition, but for that PR to go through I think you have to change your documentation first.

Page scroll does not work in Firefox when zooming is diabled

I have disabled zooming the map while scrolling. It works fine in Chrome when I scroll down/up while mouse pointer is on the map, but in Forefox, page does not get scrolled.

HERE maps version 3.0.15
Firefox version 79.0 (64-bit)
Chrome version 75.0.3770.142 (64-bit)
Ubuntu 18.04.2 LTS

DomMarker does not work in Shadow DOM

Using DomMarker with DomIcon within a shadow DOM creates the following error on every mouse movement in the map:

mapsjs.bundle.js:4 Uncaught TypeError: Cannot read property 'getPropertyValue' of undefined
    at mm.Ha (mapsjs.bundle.js:4)
    at Xm (mapsjs.bundle.js:4)
    at S.Ha (mapsjs.bundle.js:4)
    at T.$d (mapsjs.bundle.js:4)
    at Ho (mapsjs.bundle.js:4)
    at Go (mapsjs.bundle.js:4)
    at No.g (mapsjs.bundle.js:4)

Customize marker with sprite image

Hi there,

I'd like to add a sprite image as a marker icon,but I didn't find the corresponding configuration item in JS API V3.x

Here is a code snippet for API V2 but not working on V3


var iconPackUrl = 'http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/img/sprites.png',

// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
// in the image where icon is (35px from the left border, 35px from the top).
greyPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 35, 35),

// create a second icon from the same url, specify the size (28px x 27px) and another offset
// in the image where icon is (5px from the left border, 72px from the top).
greenPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 28, 27, 5, 72),

// Create marker no 1
plane1 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
  icon: greyPlaneBitmap
}),

// Create marker no 2
plane2 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
  icon: greenPlaneBitmap
}),

container = new nokia.maps.map.Container();
container.objects.addAll([plane1, plane2]);
map.objects.add(container);
map.zoomTo(container.getBoundingBox());
map.set('baseMapType', map.SATELLITE);

Remove/explain dependencies, especially iframe-height.js?

For sample code, these examples have a lot of non-standard and unexplained dependencies.
There are three separate css files, which is fine for production but not great for sample code.

I'm currently blocked by this one:

iframe-height.js

which is referenced from all of the examples as:
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>

but I couldn't find it in an archive search, or guess what it is supposed to do

TypeScript definition errors

There seems to be no public issue tracker for the library itself, so I'm putting this here for now.

There are several errors in the index.d.ts in @here/[email protected].
These require the use of // @ts-ignore to skip type checking in order to use the API.

Those that I have noticed:

  • H.geo.Point.validate has this : H.geo.Point as the first argument, which should not be present in a static method
  • Multiple classes have data as a required member when (according to the documentation) it should be optional.
    • H.map.AbstractMarker.Options
    • H.map.Circle.Options
    • H.map.DomMarker.Options
    • H.map.Group.Options
    • H.map.Marker.Options
    • H.map.Object.Options
    • H.map.Overlay.Options
    • H.map.Polygon.Options
    • H.map.Polyline.Options
    • H.map.Rect.Options
    • H.map.Spatial.Options
    • H.map.provider.Tile
    • H.ui.base.Button.Options

Show junctions numbers on Motorway even at lowest zoom level

How can I tell API to show me the junctions and street names on low zoom level. For example
When user zoom in Motorway junction appear, when user zoom out after junction number/name disappears. I want to show junction name/number at all zoom levels.

a tag not working if Here maps default pan/zoom interactions are implemented

I am trying to import Here maps into one of our webpage.

HTML content

<mat-expansion-panel [expanded]="true"> <mat-expansion-panel-header> <mat-panel-title>Location Summary</mat-panel-title> </mat-expansion-panel-header> <mat-card fxFlex="100" class="no-padding"> <div class="mapcontainer" style="width:100%; height:500px" id="mapContainer" ></div> </mat-card> </mat-expansion-panel>

Java Script

this.map = new H.Map(<HTMLElement> document.getElementById("mapContainer), this.mapTypes.normal.map); let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

If Here maps mapcontainer is successfully initialized with zoom and drag interactins are implemented , then following a tag does not work. On click of hyperlink does not take to me to new page. But works fine if I try to right click hyperlink and open in new tab.

<a *ngFor="let s of getSzValues(z.subzones)" [ngClass]='active' href="/HealthDetail/SZ" routerLink="/HealthDetail/{{s[0]}}"> {{s[1]}}</a>

Not able to narrow down root cause. Any reference or pointers will be helpful.

Open Source Here Maps JS SDK

Hi dear HERE Maps JS SDK Team,

I wanted to up front really thank you for all your hard work on this SDK! I originally wanted to ask for source-maps for this fine SDK in order to be able to debug problems on my usage of the SDK, but that is probably pretty much the same as asking for that to be open sourced completely.

I couldn't find any issues with regards to the topic so I figured we might just kick of the discussion here.

My biggest concern is that I'm unable to help myself when writing buggy code against your API because it's already minified and uglified. Here is an example Stack Track:

"Error
    at new C (https://js.api.here.com/v3/3.1/mapsjs-core.js:35:1007)
    at B (https://js.api.here.com/v3/3.1/mapsjs-core.js:27:55)
    at ki.add (https://js.api.here.com/v3/3.1/mapsjs-core.js:172:707)
    at Q.Ng (https://js.api.here.com/v3/3.1/mapsjs-core.js:352:249)
    at HereMapsUtils.drawServiceAreaPolygon (http://localhost:8080/main.bundle.js:263558:47)
    at HereMapsUtils.drawServiceAreaOnMap (http://localhost:8080/main.bundle.js:263430:12)
    at StopNetworkMap.renderMap (http://localhost:8080/main.bundle.js:260531:25)
    at StopNetworkMap.renderMap (http://localhost:8080/main.bundle.js:163512:25)
    at StopNetworkMap.componentDidUpdate (http://localhost:8080/main.bundle.js:260517:10)
    at StopNetworkMap.componentDidUpdate (http://localhost:8080/main.bundle.js:163502:123)"

I would love this to be a dialog with you explaining your reasoning and maybe providing some insights on the topic.

Thank you for the already great work and the SDK we are able to use 🙏

Best regards,
@kjellski

how drawing polygon

Hello!

I want this:
847ef0e23f36969f4e9490eae1a5b37

It looks like:drawing-control

var venuesProvider = new H.venues.Provider() // property 'venues' does not exist"@here/maps-api-for-javascript": "^1.30.9"
venuesService.loadVenue(VENUE_ID).then(venue => {`
venuesProvider.addVenue(venue);
venuesProvider.setActiveVenue(venue);

var drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);
});

[Issue] Opening an Infobubble on a Mouse Click

Screenshot (62)

Cannot change the size of close icon.

Code

import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    background: 'white',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'black',
    height: 260,
    width:250,
    padding: '0 30px',
  },
});


export const DisplayMapFC = () => {
  const classes = useStyles();
  const mapRef = React.useRef(null);
  const H = window.H;

  function addInfoBubble(map,ui) {
    var group = new H.map.Group();
  
    map.addObject(group);
  
    
    group.addEventListener('tap', function (evt) {

      var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
      });
      bubble.addClass(classes.root);
      // show info bubble
      ui.addBubble(bubble);
    }, false);
  
    addMarkerToGroup(group, {lat:23.199437029438037, lng:77.37230955928737},
       '<div><a href="http://www.mcfc.co.uk" target="_blank">Manchester City</a>' +
       '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');
  
     addMarkerToGroup(group, {lat:23.20468257679967, lng:81.49930150389847},
       '<div><a href="http://www.liverpoolfc.tv" target="_blank">Liverpool</a>' +
       '</div><div >Anfield<br>Capacity: 45,362</div>');
  
  }
  
  function addMarkerToGroup(group, coordinate, html) {
        var marker = new H.map.Marker(coordinate);
        marker.setData(html);
        group.addObject(marker);
  }

  function addMarkersToMap(map) {
        var parisMarker = new H.map.Marker({lat:23.199437029438037, lng:77.37230955928737});
        map.addObject(parisMarker);

        var romeMarker = new H.map.Marker({lat:23.20468257679967, lng: 81.49930150389847});
        map.addObject(romeMarker);

        var berlinMarker = new H.map.Marker({lat:21.155524201311838, lng:79.09382643838138});
        map.addObject(berlinMarker);

        var madridMarker = new H.map.Marker({lat:21.551219968915166, lng: 83.94495429666122});
        map.addObject(madridMarker);

        var londonMarker = new H.map.Marker({lat:12.9354658314237, lng:77.59906802777874});
        map.addObject(londonMarker);

        var aMarker = new H.map.Marker({lat:12.418646541698912, lng:77.08694089292962});
        map.addObject(aMarker);

        var bMarker = new H.map.Marker({lat:13.093068733391885, lng:80.3535155034048});
        map.addObject(bMarker);

        var cMarker = new H.map.Marker({lat:11.573546165238625, lng:77.4448591807503});
        map.addObject(cMarker);

        var dMarker = new H.map.Marker({lat:17.44844835879614, lng:78.49807919190246});
        map.addObject(dMarker);

        var eMarker = new H.map.Marker({lat:21.195478738898284, lng:72.84652656608034});
        map.addObject(eMarker);

        var eMarker = new H.map.Marker({lat:18.543832574199254, lng:73.89899367126982});
        map.addObject(eMarker);

        var fMarker = new H.map.Marker({lat:17.772447207636834, lng:83.37549140927077});
        map.addObject(fMarker);


  }
  React.useLayoutEffect(() => {
    if (!mapRef.current) return;
    const platform = new H.service.Platform({
        apikey: 'qlI2mORyOOQLxKbBiMMz-8v0GPuUY4IJ9OQYHibHjsA'
    });
    const defaultLayers = platform.createDefaultLayers();
    const hMap = new H.Map(mapRef.current, defaultLayers.vector.normal.map, {
      center: { lat: 23, lng: 79 },
      zoom: 7,
      pixelRatio: window.devicePixelRatio || 1
    });
    

    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(hMap));
    var ui = H.ui.UI.createDefault(hMap, defaultLayers);
    addInfoBubble(hMap,ui);

    window.onload = function () {
      addMarkersToMap(hMap);
    }
   
    return () => {
      hMap.dispose();
    };
  }, [mapRef]);

  return <div className="map" ref={mapRef} style={{ height: "500px" }} />;
}

Reference Documentation that I am following-

https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble

avoid multiple areas in v8 route api

Hi Guys,

i couldnt find a way to avoid multiple bbox areas in new version 8 route api. it says use avoid[areas] but i could only achieve to give one bbox area, i couldnt find a way to give multiple areas. Do you have any idea how to achieve this ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.