heremaps / maps-api-for-javascript-examples Goto Github PK
View Code? Open in Web Editor NEWSelf-contained examples for Maps API for JavaScript v3.
Home Page: https://developer.here.com/javascript-apis/documentation/v3/maps
License: Other
Self-contained examples for Maps API for JavaScript v3.
Home Page: https://developer.here.com/javascript-apis/documentation/v3/maps
License: Other
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 methoddata
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
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.
In the guide section there is a example of how to add a overlay to the map. This works. But I need to add overlay to a polygon. Can i do this? I can't find a way to do this.
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
Hello,
there is an alternative to Map Image with Polylines (https://developer.here.com/documentation/examples/rest/map-image/map-image-with-routes)
accepting Post?
By Get, we are breaking the URL limit.
Thanks
Hi,
sometimes maps renders ok but most of times it looks like explained here:
https://stackoverflow.com/questions/44873578/how-to-fix-layout-with-heremaps
it is like map canvas height is not calculated correctly.
I hope that you an answer this.
Can't find corresponding repo. Just wondering whether it is available for forking?
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);
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
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 ?
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!
Appreciate any help or examples
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.
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.
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
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.
How can I set a custom mark?
I want to change the default marker to another one.
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)
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
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
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.
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.
Hello!
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);
});
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?
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 ๐
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 :
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 ?
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
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;
}
Hello,
my example http://nirvana.bplaced.net/21/ looks very nice in Mozilla Firefox, but in Google Chrome the map is really ugly.
Why does the map in Google Chrome not look like in Mozilla Firefox?
Why do the developer tools show so many errors?
Could someone help me to understand how do I know JS Maps API has changed?
Did not find any info on that in FAQ section.
I'm aware of that page https://developer.here.com/documentation/maps/3.1.17.0/release_notes/index.html.
I would like to have a heads up about the new versions and the API deprecations via email for an instance. Does anyone have emails about that?
Thanks
Data display as per latitude and longitude on map with info bubble. But when data size 10000+ these data can't display quickly, it take 1 min+ time or sometimes stuck the map and show nothing.
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.
is it possible to add some WKT on the Map example, like:
https://bogdartysh.github.io/energia/wkt/
https://arthur-e.github.io/Wicket/sandbox-gmaps3.html
https://jsfiddle.net/asnyder14/9dxbcr4f/embedded/result/
?
Hello Team,
Library https://js.api.here.com/v3/3.0/mapsjs-ui.css is not validating the css in https://jigsaw.w3.org/css-validator
Can u please remove extra "," present in css?
Thanks
Joshin
See the shot below with the usually available map views
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?
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" }} />;
}
https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble
As I described in that topic I can't install your package from npm.
this error shown in console on chrome browser
even in here map example page!
this is Log File
developer.here.com-1576515438029.log
Hello,
I want to have the example
map-at-specified-location with a custom marker ( a PNG image).
but what code do I need???
https://github.com/heremaps/maps-api-for-javascript-examples/tree/master/map-at-specified-location
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.
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.
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.
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
I tried to insert specific controls in a here map.
H.ui.base.Button();
is not working ... it creates a divbutton
such as alt
or title
thru the api. 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
Steps to reproduce:
Uncaught (in promise) TypeError: e.target.getPosition is not a function
at ps.onMarkerClick (demo.js:117)
at ps.n.gd [as yn] (mapsjs-core.js:61)
I wonder how I can use clustering directly on geojson or kml data ?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.