├── .gitignore
├── Day_1
└── index.html
├── Day_10
├── index.html
└── map.js
├── Day_100
└── index.html
├── Day_11
├── index.html
└── map.js
├── Day_12
├── index.html
└── map.js
├── Day_13
├── index.html
└── map.js
├── Day_14
├── index.html
└── map.js
├── Day_15
├── index.html
└── map.js
├── Day_16
├── index.html
└── map.js
├── Day_17
├── index.html
└── map.js
├── Day_18
├── index.html
└── map.js
├── Day_19
├── index.html
└── map.js
├── Day_2
├── index.html
└── map.js
├── Day_20
├── index.html
└── map.js
├── Day_21
├── geocoder.js
├── index.html
└── map.js
├── Day_22
├── geocoder.js
├── index.html
└── map.js
├── Day_23
├── geocoder.js
├── index.html
└── map.js
├── Day_24
├── geocoder.js
├── index.html
└── map.js
├── Day_25
├── geocoder.js
├── index.html
└── map.js
├── Day_26
├── geocoder.js
├── index.html
└── map.js
├── Day_27
├── geocoder.js
├── index.html
└── map.js
├── Day_28
├── geocoder.js
├── index.html
└── map.js
├── Day_29
├── geocoder.js
├── index.html
└── map.js
├── Day_3
├── index.html
└── maps.js
├── Day_30
├── geocoder.js
├── index.html
└── map.js
├── Day_31
├── geocoder.js
├── index.html
└── map.js
├── Day_32
├── geocoder.js
├── index.html
└── map.js
├── Day_33
├── geocoder.js
├── index.html
└── map.js
├── Day_34
├── geocoder.js
├── index.html
└── map.js
├── Day_35
├── geocoder.js
├── index.html
└── map.js
├── Day_36
└── spaceneedle.wkt
├── Day_37
├── README.md
└── spaceneedle.png
├── Day_38
├── config.js
├── index.html
├── main.js
├── map.js
└── spaceneedle.wkt
├── Day_39
├── config.js
├── index.html
├── main.js
├── map.js
└── spaceneedle.wkt
├── Day_4
├── index.html
└── maps.js
├── Day_40
├── config.js
├── index.html
├── main.js
├── map.js
└── spaceneedle.wkt
├── Day_41
├── index.html
├── map.js
└── routing.js
├── Day_42
├── index.html
├── map.js
└── routing.js
├── Day_43
├── index.html
├── map.js
└── routing.js
├── Day_44
├── index.html
├── map.js
└── routing.js
├── Day_45
├── index.html
├── map.js
└── routing.js
├── Day_46
├── index.html
├── map.js
└── routing.js
├── Day_47
├── index.html
├── map.js
└── routing.js
├── Day_48
├── index.html
├── map.js
└── routing.js
├── Day_49
├── index.html
├── map.js
└── routing.js
├── Day_5
├── index.html
└── map.js
├── Day_50
├── index.html
├── map.js
└── routing.js
├── Day_51
├── index.html
├── map.js
└── routing.js
├── Day_52
├── index.html
├── map.js
└── routing.js
├── Day_53
├── index.html
├── map.js
└── routing.js
├── Day_54
├── index.html
├── map.js
└── routing.js
├── Day_55
├── index.html
├── map.js
└── routing.js
├── Day_56
├── index.html
├── map.js
└── routing.js
├── Day_57
├── index.html
├── map.js
└── routing.js
├── Day_58
├── index.html
├── map.js
└── routing.js
├── Day_59
├── index.html
├── map.js
└── routing.js
├── Day_6
├── index.html
└── map.js
├── Day_60
├── index.html
├── map.js
└── routing.js
├── Day_61
├── index.html
├── map.js
└── routing.js
├── Day_62
├── index.html
├── map.js
└── routing.js
├── Day_63
├── index.html
├── map.js
└── routing.js
├── Day_64
├── index.html
├── map.js
└── routing.js
├── Day_65
├── index.html
├── map.js
└── routing.js
├── Day_66
├── index.html
├── map.js
└── routing.js
├── Day_67
├── index.html
├── map.js
└── routing.js
├── Day_68
├── index.html
├── map.js
└── routing.js
├── Day_69
├── index.html
├── map.js
└── routing.js
├── Day_7
├── index.html
└── map.js
├── Day_70
├── index.html
├── map.js
└── routing.js
├── Day_71
├── index.html
├── map.js
└── routing.js
├── Day_72
├── index.html
├── map.js
└── routing.js
├── Day_73
├── index.html
├── map.js
└── routing.js
├── Day_74
├── index.html
├── map.js
└── routing.js
├── Day_75
├── index.html
├── map.js
└── routing.js
├── Day_76
├── index.html
├── map.js
└── routing.js
├── Day_77
├── index.html
├── map.js
└── routing.js
├── Day_78
├── index.html
├── map.js
└── routing.js
├── Day_79
├── index.html
├── map.js
└── routing.js
├── Day_8
├── index.html
└── map.js
├── Day_80
├── index.html
├── map.js
└── routing.js
├── Day_81
├── index.html
├── map.js
└── routing.js
├── Day_82
├── index.html
├── map.js
└── routing.js
├── Day_83
├── index.html
├── map.js
└── routing.js
├── Day_84
├── index.html
├── map.js
└── routing.js
├── Day_85
├── index.html
├── map.js
└── routing.js
├── Day_86
└── 100days-map-image.postman_collection.json
├── Day_87
└── 100days-map-image.postman_collection.json
├── Day_88
└── 100days-map-image.postman_collection.json
├── Day_89
└── 100days-map-image.postman_collection.json
├── Day_9
├── index.html
└── map.js
├── Day_90
└── 100days-map-image.postman_collection.json
├── Day_91
├── index.html
├── map.js
└── transit.js
├── Day_92
├── index.html
├── map.js
└── transit.js
├── Day_93
├── index.html
├── map.js
└── transit.js
├── Day_94
├── index.html
├── map.js
└── transit.js
├── Day_95
├── index.html
├── map.js
└── transit.js
├── Day_96
└── readme.md
├── Day_97
├── national-parks.geojson
└── readme.md
├── Day_98
├── app.js
├── package-lock.json
└── readme.md
├── Day_99
├── app.js
├── package-lock.json
└── readme.md
├── README.md
├── img
├── 100daysofcode.jpg
├── bicycle.png
├── car.png
├── finish.png
├── radioactive.png
├── robot.png
├── truck.png
└── walk.png
└── styles
└── font_arial.yaml
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | .DS_Store
3 | node_modules/
--------------------------------------------------------------------------------
/Day_1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Day_10/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_11/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_12/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_13/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_14/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_15/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_16/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Day_17/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_18/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_19/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Day_2/map.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
--------------------------------------------------------------------------------
/Day_20/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_21/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'hauptstraße'
8 | }
9 |
10 | function onResult(result){
11 | console.log(result);
12 | }
13 |
14 | geocoder.geocode(geocoderParams,onResult,alert);
15 |
16 | }
17 |
18 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_21/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_22/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'hauptstraße',
8 | limit : 5
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.geocode(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_22/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_23/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'hauptstraße',
8 | in: 'countryCode:DEU',
9 | limit : 5
10 | }
11 |
12 | function onResult(result){
13 | console.log(result);
14 | }
15 |
16 | geocoder.geocode(geocoderParams,onResult,alert);
17 |
18 | }
19 |
20 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_23/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_24/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | qq : 'street=hauptstraße;city=Berlin;country=Germany'
8 | }
9 |
10 | function onResult(result){
11 | console.log(result);
12 | }
13 |
14 | geocoder.geocode(geocoderParams,onResult,alert);
15 |
16 | }
17 |
18 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_24/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_25/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'invalidenstraße 116, Berlin'
8 | }
9 |
10 | function onResult(result){
11 | console.log(result);
12 | map.addObject(new H.map.Marker(result.items[0].access[0]));
13 | }
14 |
15 | geocoder.geocode(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_25/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_26/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'markets',
8 | at : '52.49105,13.37917'
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.discover(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_26/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_27/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'markets',
8 | in : 'circle:52.49105,13.37917;r=1000'
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.discover(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_27/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_28/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'markets',
8 | in : 'circle:52.49105,13.37917;r=1000'
9 | }
10 |
11 | function onResult(result){
12 | // console.log(result);
13 | result.items.forEach(item => {
14 | ui.addBubble(new H.ui.InfoBubble( item.position, {
15 | content: 'distance: '+item.distance+' m'
16 | }));
17 | });
18 |
19 | }
20 |
21 | geocoder.discover(geocoderParams,onResult,alert);
22 |
23 | }
24 |
25 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_28/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_29/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'star',
8 | at : '52.491059,13.37917'
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.autosuggest(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_29/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 100 Days of Code with HERE
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Day_3/maps.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
5 | var mapCenter = {lat: 52.53086, lng: 13.38474};
6 | // initializing default layers for the map
7 | var defaultLayers = platform.createDefaultLayers();
8 | // rendering map within the container on the page
9 | var map = new H.Map(
10 | document.getElementById('mapContainer'),
11 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
12 | {
13 | zoom: 11, // Initial zoom level of map
14 | center: mapCenter // Initial center of map
15 | });
--------------------------------------------------------------------------------
/Day_30/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | q : 'star',
8 | in : 'bbox:13.3817,52.50474,13.40432,52.51647'
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.autosuggest(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_30/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_31/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | name: 'museum',
8 | at : '52.45722,13.38044'
9 | }
10 |
11 | function onResult(result){
12 | console.log(result);
13 | }
14 |
15 | geocoder.browse(geocoderParams,onResult,alert);
16 |
17 | }
18 |
19 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_31/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_32/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | name: 'museum',
8 | at : '52.45722,13.38044',
9 | categories: '300-3100-0028'
10 | }
11 |
12 | function onResult(result){
13 | console.log(result);
14 | }
15 |
16 | geocoder.browse(geocoderParams,onResult,alert);
17 |
18 | }
19 |
20 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_32/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_33/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | name: 'restaurant',
8 | at : '52.45722,13.38044',
9 | categories: '102-000,100-1000-0003'
10 | }
11 |
12 | function onResult(result){
13 | console.log(result);
14 | }
15 |
16 | geocoder.browse(geocoderParams,onResult,alert);
17 |
18 | }
19 |
20 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_33/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_34/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | id : 'here:pds:place:276aabd1-9fd829e3684d05b86f7ddb1f3f83924c'
8 | }
9 |
10 | function onResult(result){
11 | console.log(result);
12 | }
13 |
14 | geocoder.lookup(geocoderParams,onResult,alert);
15 |
16 | }
17 |
18 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_34/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_35/geocoder.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the geocoding service:
2 | var geocoder = platform.getSearchService();
3 |
4 | function geocodeAndSearch(){
5 |
6 | let geocoderParams = {
7 | at : '52.5415,13.39316'
8 | }
9 |
10 | function onResult(result){
11 | console.log(result);
12 | }
13 |
14 | geocoder.reverseGeocode(geocoderParams,onResult,alert);
15 |
16 | }
17 |
18 | geocodeAndSearch();
--------------------------------------------------------------------------------
/Day_35/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_36/spaceneedle.wkt:
--------------------------------------------------------------------------------
1 | NAME WKT
2 | SPACENEEDLE POLYGON((-122.34955611506788 47.620666853267224,-122.34930398742048 47.6208006380942,-122.34902235547392 47.62069758764966,-122.34904917756407 47.62047340703363,-122.34933080951063 47.62034323720253,-122.34958561936705 47.62044990417142,-122.34955611506788 47.620666853267224))
--------------------------------------------------------------------------------
/Day_37/README.md:
--------------------------------------------------------------------------------
1 | # Uploading Your Layer
2 |
3 | To upload your layer you can go to our [layers portal](https://enterprise.here.com/#/login). You can log in using the credentials you created for your application on developer portal.
4 |
5 | You'll want to then go to Import Layer from file and select your wkt file.
6 |
7 | When you have uploaded your layer, you click on your layer and the geometry type in order to verify it on the map.
8 | 
9 |
--------------------------------------------------------------------------------
/Day_37/spaceneedle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/Day_37/spaceneedle.png
--------------------------------------------------------------------------------
/Day_38/config.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | apiKey : 'YOURAPIKEY'
3 | }
4 |
--------------------------------------------------------------------------------
/Day_38/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Day_38/main.js:
--------------------------------------------------------------------------------
1 | const start = async () => {
2 | const map = new HereMap(document.getElementById("map"));
3 | // creates the same shape as geofence created for spaceneedle
4 | const points = [
5 | { lat: '47.620666853267224', lng: '-122.34955611506788' },
6 | { lat: '47.6208006380942', lng: '-122.34930398742048' },
7 | { lat: '47.62069758764966', lng: '-122.34902235547392' },
8 | { lat: '47.62047340703363', lng: '-122.34904917756407' },
9 | { lat: '47.62034323720253', lng: '-122.34933080951063' },
10 | { lat: '47.62044990417142', lng: '-122.34958561936705' },
11 | { lat: '47.620666853267224', lng: '-122.34955611506788' }
12 | ]
13 | let lineString = new H.geo.LineString();
14 |
15 | points.forEach(point => lineString.pushPoint(point));
16 | const polygon = new H.map.Polygon(lineString);
17 | // draws the shape of geofence on map
18 | map.draw(polygon);
19 | };
20 |
21 | document.addEventListener('DOMContentLoaded', function() {
22 | start();
23 | });
24 |
--------------------------------------------------------------------------------
/Day_38/map.js:
--------------------------------------------------------------------------------
1 | class HereMap {
2 | constructor(mapElement) {
3 | this.platform = new H.service.Platform({
4 | 'apikey': config.apiKey
5 | });
6 |
7 | this.map = new H.Map(
8 | mapElement,
9 | this.platform.createDefaultLayers().vector.normal.map,
10 | {
11 | zoom: 18,
12 | center: { lat: '47.62047340703363', lng: '-122.34904917756407' }
13 | }
14 | );
15 |
16 | const mapEvent = new H.mapevents.MapEvents(this.map);
17 | const behavior = new H.mapevents.Behavior(mapEvent);
18 | this.geofencing = this.platform.getGeofencingService();
19 | this.currentPosition = new H.map.Marker({ lat: 37.21, lng: -121.21 });
20 | this.map.addObject(this.currentPosition);
21 | }
22 |
23 | draw(mapObject) {
24 | this.map.addObject(mapObject);
25 | }
26 |
27 | // returns list of uploaded layers
28 | getLayers() {
29 | let fleetURL = "https://fleet.ls.hereapi.com/2/layers/list.json"
30 |
31 | return axios({
32 | method: 'get',
33 | url: fleetURL,
34 | params: {
35 | apiKey: config.apiKey
36 | }
37 | })
38 | .then( response => {
39 | return response.data.layers
40 | })
41 | .catch( error => {
42 | console.log(error);
43 | return Promise.reject(error)
44 | })
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/Day_38/spaceneedle.wkt:
--------------------------------------------------------------------------------
1 | NAME WKT
2 | SPACENEEDLE POLYGON((-122.34955611506788 47.620666853267224,-122.34930398742048 47.6208006380942,-122.34902235547392 47.62069758764966,-122.34904917756407 47.62047340703363,-122.34933080951063 47.62034323720253,-122.34958561936705 47.62044990417142,-122.34955611506788 47.620666853267224))
--------------------------------------------------------------------------------
/Day_39/config.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | apiKey : 'YOURAPIKEY'
3 | }
4 |
--------------------------------------------------------------------------------
/Day_39/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Day_39/main.js:
--------------------------------------------------------------------------------
1 | const start = async () => {
2 | const map = new HereMap(document.getElementById("map"));
3 | // creates the same shape as geofence created for spaceneedle
4 | const points = [
5 | { lat: '47.620666853267224', lng: '-122.34955611506788' },
6 | { lat: '47.6208006380942', lng: '-122.34930398742048' },
7 | { lat: '47.62069758764966', lng: '-122.34902235547392' },
8 | { lat: '47.62047340703363', lng: '-122.34904917756407' },
9 | { lat: '47.62034323720253', lng: '-122.34933080951063' },
10 | { lat: '47.62044990417142', lng: '-122.34958561936705' },
11 | { lat: '47.620666853267224', lng: '-122.34955611506788' }
12 | ]
13 | let lineString = new H.geo.LineString();
14 |
15 | points.forEach(point => lineString.pushPoint(point));
16 | const polygon = new H.map.Polygon(lineString);
17 | // draws the shape of geofence on map
18 | map.draw(polygon);
19 | };
20 |
21 | document.addEventListener('DOMContentLoaded', function() {
22 | start();
23 | });
24 |
--------------------------------------------------------------------------------
/Day_39/spaceneedle.wkt:
--------------------------------------------------------------------------------
1 | NAME WKT
2 | SPACENEEDLE POLYGON((-122.34955611506788 47.620666853267224,-122.34930398742048 47.6208006380942,-122.34902235547392 47.62069758764966,-122.34904917756407 47.62047340703363,-122.34933080951063 47.62034323720253,-122.34958561936705 47.62044990417142,-122.34955611506788 47.620666853267224))
--------------------------------------------------------------------------------
/Day_4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_4/maps.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
5 | // initializing default layers for the map
6 | var defaultLayers = platform.createDefaultLayers();
7 | // rendering map within the container on the page
8 | var map = new H.Map(
9 | document.getElementById('mapContainer'),
10 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
11 | {
12 | zoom: 11, // Initial zoom level of map
13 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
14 | });
15 |
16 | // creating default UI for map
17 | var ui = H.ui.UI.createDefault(map, defaultLayers);
--------------------------------------------------------------------------------
/Day_40/config.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | apiKey : 'YOURAPIKEY'
3 | }
4 |
--------------------------------------------------------------------------------
/Day_40/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Day_40/main.js:
--------------------------------------------------------------------------------
1 | const start = async () => {
2 | const map = new HereMap(document.getElementById("map"));
3 | // creates the same shape as geofence created for spaceneedle
4 | const points = [
5 | { lat: '47.620666853267224', lng: '-122.34955611506788' },
6 | { lat: '47.6208006380942', lng: '-122.34930398742048' },
7 | { lat: '47.62069758764966', lng: '-122.34902235547392' },
8 | { lat: '47.62047340703363', lng: '-122.34904917756407' },
9 | { lat: '47.62034323720253', lng: '-122.34933080951063' },
10 | { lat: '47.62044990417142', lng: '-122.34958561936705' },
11 | { lat: '47.620666853267224', lng: '-122.34955611506788' }
12 | ]
13 | let lineString = new H.geo.LineString();
14 |
15 | points.forEach(point => lineString.pushPoint(point));
16 | const polygon = new H.map.Polygon(lineString);
17 | // draws the shape of geofence on map
18 | map.draw(polygon);
19 | };
20 |
21 | document.addEventListener('DOMContentLoaded', function() {
22 | start();
23 | });
24 |
--------------------------------------------------------------------------------
/Day_40/spaceneedle.wkt:
--------------------------------------------------------------------------------
1 | NAME WKT
2 | SPACENEEDLE POLYGON((-122.34955611506788 47.620666853267224,-122.34930398742048 47.6208006380942,-122.34902235547392 47.62069758764966,-122.34904917756407 47.62047340703363,-122.34933080951063 47.62034323720253,-122.34958561936705 47.62044990417142,-122.34955611506788 47.620666853267224))
--------------------------------------------------------------------------------
/Day_41/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_41/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 8:
2 | var router = platform.getRoutingService(null, 8);
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | transportMode:'car',
7 | routingMode: 'fast',
8 | origin: '52.4569927,13.380545',
9 | destination: '52.52407865,13.429371',
10 | return:'polyline',
11 | };
12 |
13 | // Define a callback function to process the routing response:
14 | var onResult = function(result) {
15 | console.log(result);
16 | };
17 |
18 | // error callback function
19 | var onError = function(error) {
20 | alert(error.message);
21 | };
22 |
23 | // Call calculateRoute() with the routing parameters,
24 | // the callback and an error callback function
25 |
26 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_42/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_42/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 8:
2 | var router = platform.getRoutingService(null, 8);
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | transportMode:'car',
7 | routingMode: 'fast',
8 | origin: '52.4569927,13.380545',
9 | destination: '52.52407865,13.429371',
10 | return:'polyline',
11 | };
12 |
13 | // Define a callback function to process the routing response:
14 | var onResult = function(result) {
15 | console.log(result);
16 | if (result.routes.length) {
17 | // result.routes.forEach(route =>{
18 | result.routes[0].sections.forEach((section) => {
19 | // Create a linestring to use as a point source for the route line
20 | let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
21 |
22 | // Create a polyline to display the route:
23 | let routeLine = new H.map.Polyline(linestring, {
24 | style: { strokeColor: '#034F84', lineWidth: 3 }
25 | });
26 |
27 | // Create a marker for the start point:
28 | let startMarker = new H.map.Marker(section.departure.place.location);
29 |
30 | // Create a marker for the end point:
31 | let endMarker = new H.map.Marker(section.arrival.place.location);
32 |
33 |
34 | // Add the route polyline and the two markers to the map:
35 | map.addObjects([routeLine, startMarker, endMarker]);
36 |
37 | // Set the map's viewport to make the whole route visible:
38 | map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
39 |
40 | });
41 |
42 | }
43 | };
44 |
45 | var onError = function(error) {
46 | alert(error.message);
47 | };
48 |
49 | // Call calculateRoute() with the routing parameters,
50 | // the callback and an error callback function (called if a
51 | // communication error occurs):
52 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_43/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_43/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 8:
2 | var router = platform.getRoutingService(null, 8);
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | transportMode:'car',
7 | routingMode: 'fast',
8 | origin: '52.4569927,13.380545',
9 | destination: '52.52407865,13.429371',
10 | alternatives:3,
11 | return:'polyline',
12 | };
13 |
14 | // Define a callback function to process the routing response:
15 | var onResult = function(result) {
16 | console.log(result);
17 | if (result.routes.length) {
18 | result.routes.forEach(route =>{
19 | route.sections.forEach((section) => {
20 | // Create a linestring to use as a point source for the route line
21 | let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
22 |
23 | // Create a polyline to display the route:
24 | let routeLine = new H.map.Polyline(linestring, {
25 | style: { strokeColor: '#034F84', lineWidth: 3 }
26 | });
27 |
28 | // Create a marker for the start point:
29 | let startMarker = new H.map.Marker(section.departure.place.location);
30 |
31 | // Create a marker for the end point:
32 | let endMarker = new H.map.Marker(section.arrival.place.location);
33 |
34 |
35 | // Add the route polyline and the two markers to the map:
36 | map.addObjects([routeLine, startMarker, endMarker]);
37 |
38 | // Set the map's viewport to make the whole route visible:
39 | map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
40 |
41 | });
42 | });
43 |
44 | }
45 | };
46 |
47 | var onError = function(error) {
48 | alert(error.message);
49 | };
50 |
51 | // Call calculateRoute() with the routing parameters,
52 | // the callback and an error callback function (called if a
53 | // communication error occurs):
54 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_44/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Day_44/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 8:
2 | var router = platform.getRoutingService(null, 8);
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | transportMode:'car',
7 | routingMode: 'fast',
8 | origin: '52.4569927,13.380545',
9 | destination: '52.52407865,13.429371',
10 | alternatives:3,
11 | departureTime:'2020-05-13T09:00:00',
12 | return:'polyline',
13 | };
14 |
15 | // Define a callback function to process the routing response:
16 | var onResult = function(result) {
17 | console.log(result);
18 | if (result.routes.length) {
19 | result.routes.forEach(route =>{
20 | route.sections.forEach((section) => {
21 | // Create a linestring to use as a point source for the route line
22 | let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
23 |
24 | // Create a polyline to display the route:
25 | let routeLine = new H.map.Polyline(linestring, {
26 | style: { strokeColor: '#034F84', lineWidth: 3 }
27 | });
28 |
29 | // Create a marker for the start point:
30 | let startMarker = new H.map.Marker(section.departure.place.location);
31 |
32 | // Create a marker for the end point:
33 | let endMarker = new H.map.Marker(section.arrival.place.location);
34 |
35 |
36 | // Add the route polyline and the two markers to the map:
37 | map.addObjects([routeLine, startMarker, endMarker]);
38 |
39 | // Set the map's viewport to make the whole route visible:
40 | map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
41 |
42 | });
43 | });
44 |
45 | }
46 | };
47 |
48 | var onError = function(error) {
49 | alert(error.message);
50 | };
51 |
52 | // Call calculateRoute() with the routing parameters,
53 | // the callback and an error callback function (called if a
54 | // communication error occurs):
55 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_45/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_46/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_47/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_48/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_49/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_5/map.js:
--------------------------------------------------------------------------------
1 |
2 | // Initialize platform with JS API KEY
3 | var platform = new H.service.Platform({
4 | apikey: "YOUR_JS_API_KEY"
5 | });
6 | // initializing default layers for the map
7 | var defaultLayers = platform.createDefaultLayers();
8 | // rendering map within the container on the page
9 | var map = new H.Map(
10 | document.getElementById('mapContainer'),
11 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
12 | {
13 | zoom: 11, // Initial zoom level of map
14 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
15 | });
16 |
17 | // creating default UI for map
18 | var ui = H.ui.UI.createDefault(map, defaultLayers);
19 |
20 | // Add basic map events like pan and zoom
21 | var mapEvents = new H.mapevents.MapEvents(map);
22 | // Initialize for map behaviour on events
23 | var behavior = new H.mapevents.Behavior(mapEvents);
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Day_50/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_51/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_51/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0: '52.4569927,13.380545',
7 | waypoint1:'52.4874515,13.42361286',
8 | mode:"fastest;pedestrian;park:-1",
9 | representation: "display"
10 | };
11 |
12 | // Define a callback function to process the routing response:
13 | var onResult = function(result) {
14 | console.log(result);
15 | var route = result.response.route[0];
16 | var lineString = new H.geo.LineString(),
17 | routeShape = route.shape,
18 | polyline,
19 | startIcon,
20 | endIcon,
21 | startMarker,
22 | endMarker;
23 |
24 | startIcon = new H.map.Icon('img/walk.png');
25 | endIcon = new H.map.Icon('img/finish.png');
26 |
27 | // Retrieve the mapped positions of the requested waypoints:
28 | startPoint = route.waypoint[0].mappedPosition;
29 | endPoint = route.waypoint[1].mappedPosition;
30 |
31 | routeShape.forEach(function(point) {
32 | var parts = point.split(',');
33 | lineString.pushLatLngAlt(parts[0], parts[1]);
34 | });
35 |
36 |
37 | polyline = new H.map.Polyline(lineString, {
38 | style: {
39 | lineWidth: 4,
40 | strokeColor: 'rgba(0, 0, 0, 0.7)'
41 | }
42 | });
43 |
44 | startMarker = new H.map.Marker({
45 | lat:route.waypoint[0].mappedPosition.latitude,
46 | lng:route.waypoint[0].mappedPosition.longitude },{
47 | icon:startIcon
48 | });
49 |
50 | endMarker = new H.map.Marker({
51 | lat:route.waypoint[1].mappedPosition.latitude,
52 | lng:route.waypoint[1].mappedPosition.longitude },{
53 | icon:endIcon
54 | });
55 |
56 | // Add the polyline to the map
57 | map.addObjects([polyline,startMarker,endMarker]);
58 | // And zoom to its bounding rectangle
59 | map.getViewModel().setLookAtData({
60 | bounds: polyline.getBoundingBox()
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_52/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_52/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;bicycle",
9 | representation: "display"
10 | };
11 |
12 | // Define a callback function to process the routing response:
13 | var onResult = function(result) {
14 | console.log(result);
15 | var route = result.response.route[0];
16 | var lineString = new H.geo.LineString(),
17 | routeShape = route.shape,
18 | polyline,
19 | startIcon,
20 | endIcon,
21 | startMarker,
22 | endMarker;
23 |
24 | startIcon = new H.map.Icon('img/bicycle.png');
25 | endIcon = new H.map.Icon('img/finish.png');
26 |
27 | // Retrieve the mapped positions of the requested waypoints:
28 | startPoint = route.waypoint[0].mappedPosition;
29 | endPoint = route.waypoint[1].mappedPosition;
30 |
31 | routeShape.forEach(function(point) {
32 | var parts = point.split(',');
33 | lineString.pushLatLngAlt(parts[0], parts[1]);
34 | });
35 |
36 |
37 | polyline = new H.map.Polyline(lineString, {
38 | style: {
39 | lineWidth: 4,
40 | strokeColor: 'rgba(0, 0, 0, 0.7)'
41 | }
42 | });
43 |
44 | startMarker = new H.map.Marker({
45 | lat:route.waypoint[0].mappedPosition.latitude,
46 | lng:route.waypoint[0].mappedPosition.longitude },{
47 | icon:startIcon
48 | });
49 |
50 | endMarker = new H.map.Marker({
51 | lat:route.waypoint[1].mappedPosition.latitude,
52 | lng:route.waypoint[1].mappedPosition.longitude },{
53 | icon:endIcon
54 | });
55 |
56 | // Add the polyline to the map
57 | map.addObjects([polyline,startMarker,endMarker]);
58 | // And zoom to its bounding rectangle
59 | map.getViewModel().setLookAtData({
60 | bounds: polyline.getBoundingBox()
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_53/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_53/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;bicycle;dirtRoad:-2",
9 | representation: "display"
10 | };
11 |
12 | // Define a callback function to process the routing response:
13 | var onResult = function(result) {
14 | console.log(result);
15 | var route = result.response.route[0];
16 | var lineString = new H.geo.LineString(),
17 | routeShape = route.shape,
18 | polyline,
19 | startIcon,
20 | endIcon,
21 | startMarker,
22 | endMarker;
23 |
24 | startIcon = new H.map.Icon('img/bicycle.png');
25 | endIcon = new H.map.Icon('img/finish.png');
26 |
27 | // Retrieve the mapped positions of the requested waypoints:
28 | startPoint = route.waypoint[0].mappedPosition;
29 | endPoint = route.waypoint[1].mappedPosition;
30 |
31 | routeShape.forEach(function(point) {
32 | var parts = point.split(',');
33 | lineString.pushLatLngAlt(parts[0], parts[1]);
34 | });
35 |
36 |
37 | polyline = new H.map.Polyline(lineString, {
38 | style: {
39 | lineWidth: 4,
40 | strokeColor: 'rgba(0, 0, 0, 0.7)'
41 | }
42 | });
43 |
44 | startMarker = new H.map.Marker({
45 | lat:route.waypoint[0].mappedPosition.latitude,
46 | lng:route.waypoint[0].mappedPosition.longitude },{
47 | icon:startIcon
48 | });
49 |
50 | endMarker = new H.map.Marker({
51 | lat:route.waypoint[1].mappedPosition.latitude,
52 | lng:route.waypoint[1].mappedPosition.longitude },{
53 | icon:endIcon
54 | });
55 |
56 | // Add the polyline to the map
57 | map.addObjects([polyline,startMarker,endMarker]);
58 | // And zoom to its bounding rectangle
59 | map.getViewModel().setLookAtData({
60 | bounds: polyline.getBoundingBox()
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_54/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_54/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;publicTransport",
9 | representation: "display"
10 | };
11 |
12 | // Define a callback function to process the routing response:
13 | var onResult = function(result) {
14 | console.log(result);
15 | var route = result.response.route[0];
16 | var lineString = new H.geo.LineString(),
17 | routeShape = route.shape,
18 | polyline,
19 | startMarker,
20 | endMarker;
21 |
22 | // Retrieve the mapped positions of the requested waypoints:
23 | startPoint = route.waypoint[0].mappedPosition;
24 | endPoint = route.waypoint[1].mappedPosition;
25 |
26 | routeShape.forEach(function(point) {
27 | var parts = point.split(',');
28 | lineString.pushLatLngAlt(parts[0], parts[1]);
29 | });
30 |
31 |
32 | polyline = new H.map.Polyline(lineString, {
33 | style: {
34 | lineWidth: 3,
35 | strokeColor: 'rgba(0, 0, 0, 0.7)',
36 | lineDash : [1,2]
37 | }
38 | });
39 |
40 | startMarker = new H.map.Marker({
41 | lat:route.waypoint[0].mappedPosition.latitude,
42 | lng:route.waypoint[0].mappedPosition.longitude
43 | });
44 |
45 | endMarker = new H.map.Marker({
46 | lat:route.waypoint[1].mappedPosition.latitude,
47 | lng:route.waypoint[1].mappedPosition.longitude
48 | });
49 |
50 | // Add the polyline to the map
51 | map.addObjects([polyline,startMarker,endMarker]);
52 | // And zoom to its bounding rectangle
53 | map.getViewModel().setLookAtData({
54 | bounds: polyline.getBoundingBox()
55 | });
56 | };
57 |
58 |
59 | var onError = function(error) {
60 | alert(error.message);
61 | };
62 |
63 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_55/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_55/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;publicTransport",
9 | avoidTransportTypes:"busPublic",
10 | representation: "display"
11 | };
12 |
13 | // Define a callback function to process the routing response:
14 | var onResult = function(result) {
15 | console.log(result);
16 | var route = result.response.route[0];
17 | var lineString = new H.geo.LineString(),
18 | routeShape = route.shape,
19 | polyline,
20 | startMarker,
21 | endMarker;
22 |
23 | // Retrieve the mapped positions of the requested waypoints:
24 | startPoint = route.waypoint[0].mappedPosition;
25 | endPoint = route.waypoint[1].mappedPosition;
26 |
27 | routeShape.forEach(function(point) {
28 | var parts = point.split(',');
29 | lineString.pushLatLngAlt(parts[0], parts[1]);
30 | });
31 |
32 |
33 | polyline = new H.map.Polyline(lineString, {
34 | style: {
35 | lineWidth: 3,
36 | strokeColor: 'rgba(0, 0, 0, 0.7)',
37 | lineDash : [1,2]
38 | }
39 | });
40 |
41 | startMarker = new H.map.Marker({
42 | lat:route.waypoint[0].mappedPosition.latitude,
43 | lng:route.waypoint[0].mappedPosition.longitude
44 | });
45 |
46 | endMarker = new H.map.Marker({
47 | lat:route.waypoint[1].mappedPosition.latitude,
48 | lng:route.waypoint[1].mappedPosition.longitude
49 | });
50 |
51 | // Add the polyline to the map
52 | map.addObjects([polyline,startMarker,endMarker]);
53 | // And zoom to its bounding rectangle
54 | map.getViewModel().setLookAtData({
55 | bounds: polyline.getBoundingBox()
56 | });
57 | };
58 |
59 | var onError = function(error) {
60 | alert(error.message);
61 | };
62 |
63 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_56/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_56/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;car;traffic:enabled",
9 | alternatives:3,
10 | representation: "display"
11 |
12 | };
13 |
14 | // Define a callback function to process the routing response:
15 | var onResult = function(result) {
16 | console.log(result);
17 | var colors =["green","orange","yellow","red"]
18 | result.response.route.forEach(route =>{
19 | var lineString = new H.geo.LineString(),
20 | routeShape = route.shape,
21 | polyline,
22 | startMarker,
23 | endMarker;
24 |
25 | // Retrieve the mapped positions of the requested waypoints:
26 | startPoint = route.waypoint[0].mappedPosition;
27 | endPoint = route.waypoint[1].mappedPosition;
28 |
29 | routeShape.forEach(function(point) {
30 | var parts = point.split(',');
31 | lineString.pushLatLngAlt(parts[0], parts[1]);
32 | });
33 |
34 |
35 | polyline = new H.map.Polyline(lineString, {
36 | style: {
37 | lineWidth: 4,
38 | strokeColor: colors[result.response.route.indexOf(route)]
39 | }
40 | });
41 |
42 | startMarker = new H.map.Marker({
43 | lat:route.waypoint[0].mappedPosition.latitude,
44 | lng:route.waypoint[0].mappedPosition.longitude
45 | });
46 |
47 | endMarker = new H.map.Marker({
48 | lat:route.waypoint[1].mappedPosition.latitude,
49 | lng:route.waypoint[1].mappedPosition.longitude
50 | });
51 |
52 | // Add the polyline to the map
53 | map.addObjects([polyline,startMarker,endMarker]);
54 | // And zoom to its bounding rectangle
55 |
56 | map.getViewPort().setPadding(100, 0, 0, 0);
57 | map.getViewModel().setLookAtData({
58 | bounds: polyline.getBoundingBox()
59 | });
60 | map.getViewPort().setPadding(0, 0, 0, 0);
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_57/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_57/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;car;traffic:enabled",
9 | representation: "display"
10 | };
11 |
12 | // Define a callback function to process the routing response:
13 | var onResult = function(result) {
14 | console.log(result);
15 | var colors =["green","orange","yellow","red"]
16 | result.response.route.forEach(route =>{
17 | var lineString = new H.geo.LineString(),
18 | routeShape = route.shape,
19 | polyline,
20 | startMarker,
21 | endMarker;
22 |
23 | // Retrieve the mapped positions of the requested waypoints:
24 | startPoint = route.waypoint[0].mappedPosition;
25 | endPoint = route.waypoint[1].mappedPosition;
26 |
27 | routeShape.forEach(function(point) {
28 | var parts = point.split(',');
29 | lineString.pushLatLngAlt(parts[0], parts[1]);
30 | });
31 |
32 |
33 | polyline = new H.map.Polyline(lineString, {
34 | style: {
35 | lineWidth: 4,
36 | strokeColor: colors[result.response.route.indexOf(route)]
37 | }
38 | });
39 |
40 | startMarker = new H.map.Marker({
41 | lat:route.waypoint[0].mappedPosition.latitude,
42 | lng:route.waypoint[0].mappedPosition.longitude
43 | });
44 |
45 | endMarker = new H.map.Marker({
46 | lat:route.waypoint[1].mappedPosition.latitude,
47 | lng:route.waypoint[1].mappedPosition.longitude
48 | });
49 |
50 | // Add the polyline to the map
51 | map.addObjects([polyline,startMarker,endMarker]);
52 | // And zoom to its bounding rectangle
53 |
54 | map.getViewPort().setPadding(100, 0, 0, 0);
55 | map.getViewModel().setLookAtData({
56 | bounds: polyline.getBoundingBox()
57 | });
58 | map.getViewPort().setPadding(0, 0, 0, 0);
59 | });
60 | };
61 |
62 | var onError = function(error) {
63 | alert(error.message);
64 | };
65 |
66 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_58/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_59/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_59/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | // Create the parameters for the routing request:
5 | var routingParameters = {
6 | waypoint0:"52.4569927,13.380545",
7 | waypoint1:"52.4805740,13.4303771",
8 | mode:"fastest;car;traffic:enabled",
9 | alternatives:3,
10 | representation: "display",
11 | legAttributes:'links'
12 | };
13 |
14 | // Define a callback function to process the routing response:
15 | var onResult = function(result) {
16 | console.log(result);
17 | var colors =["green","orange","yellow","red"]
18 | result.response.route.forEach(route =>{
19 | var lineString = new H.geo.LineString(),
20 | routeShape = route.shape,
21 | polyline,
22 | startMarker,
23 | endMarker;
24 |
25 | // Retrieve the mapped positions of the requested waypoints:
26 | startPoint = route.waypoint[0].mappedPosition;
27 | endPoint = route.waypoint[1].mappedPosition;
28 |
29 | routeShape.forEach(function(point) {
30 | var parts = point.split(',');
31 | lineString.pushLatLngAlt(parts[0], parts[1]);
32 | });
33 |
34 |
35 | polyline = new H.map.Polyline(lineString, {
36 | style: {
37 | lineWidth: 4,
38 | strokeColor: colors[result.response.route.indexOf(route)]
39 | }
40 | });
41 |
42 | startMarker = new H.map.Marker({
43 | lat:route.waypoint[0].mappedPosition.latitude,
44 | lng:route.waypoint[0].mappedPosition.longitude
45 | });
46 |
47 | endMarker = new H.map.Marker({
48 | lat:route.waypoint[1].mappedPosition.latitude,
49 | lng:route.waypoint[1].mappedPosition.longitude
50 | });
51 |
52 | // Add the polyline to the map
53 | map.addObjects([polyline,startMarker,endMarker]);
54 | // And zoom to its bounding rectangle
55 |
56 | map.getViewPort().setPadding(100, 0, 0, 0);
57 | map.getViewModel().setLookAtData({
58 | bounds: polyline.getBoundingBox()
59 | });
60 | map.getViewPort().setPadding(0, 0, 0, 0);
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_6/map.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
5 | // initializing default layers for the map
6 | var defaultLayers = platform.createDefaultLayers();
7 | // rendering map within the container on the page
8 | var map = new H.Map(
9 | document.getElementById('mapContainer'),
10 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
11 | {
12 | zoom: 11, // Initial zoom level of map
13 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
14 | });
15 |
16 | // creating default UI for map
17 | var ui = H.ui.UI.createDefault(map, defaultLayers);
18 |
19 | // Add basic map events like pan and zoom
20 | var mapEvents = new H.mapevents.MapEvents(map);
21 | // Initialize for map behaviour on events
22 | var behavior = new H.mapevents.Behavior(mapEvents);
23 |
24 | // adjust tilt and rotation of the map
25 | map.getViewModel().setLookAtData({
26 | tilt: 60,
27 | heading: 90
28 | });
29 |
30 |
--------------------------------------------------------------------------------
/Day_60/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_60/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | var routingParameters = {
5 | waypoint0:"52.4569927,13.380545",
6 | waypoint1:"52.4805740,13.4303771",
7 | mode:"fastest;car;traffic:enabled",
8 | alternatives:3,
9 | representation: "display",
10 | avoidLinks:'-1258798441'
11 | };
12 |
13 |
14 | // Define a callback function to process the routing response:
15 | var onResult = function(result) {
16 | console.log(result);
17 | var colors =["green","orange","yellow","red"]
18 | result.response.route.forEach(route =>{
19 | var lineString = new H.geo.LineString(),
20 | routeShape = route.shape,
21 | polyline,
22 | startMarker,
23 | endMarker;
24 |
25 | // Retrieve the mapped positions of the requested waypoints:
26 | startPoint = route.waypoint[0].mappedPosition;
27 | endPoint = route.waypoint[1].mappedPosition;
28 |
29 | routeShape.forEach(function(point) {
30 | var parts = point.split(',');
31 | lineString.pushLatLngAlt(parts[0], parts[1]);
32 | });
33 |
34 |
35 | polyline = new H.map.Polyline(lineString, {
36 | style: {
37 | lineWidth: 4,
38 | strokeColor: colors[result.response.route.indexOf(route)]
39 | }
40 | });
41 |
42 | startMarker = new H.map.Marker({
43 | lat:route.waypoint[0].mappedPosition.latitude,
44 | lng:route.waypoint[0].mappedPosition.longitude
45 | });
46 |
47 | endMarker = new H.map.Marker({
48 | lat:route.waypoint[1].mappedPosition.latitude,
49 | lng:route.waypoint[1].mappedPosition.longitude
50 | });
51 |
52 | // Add the polyline to the map
53 | map.addObjects([polyline,startMarker,endMarker]);
54 | // And zoom to its bounding rectangle
55 |
56 | map.getViewPort().setPadding(100, 0, 0, 0);
57 | map.getViewModel().setLookAtData({
58 | bounds: polyline.getBoundingBox()
59 | });
60 | map.getViewPort().setPadding(0, 0, 0, 0);
61 | });
62 | };
63 |
64 | var onError = function(error) {
65 | alert(error.message);
66 | };
67 |
68 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_61/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_62/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_62/routing.js:
--------------------------------------------------------------------------------
1 | var circle10Km = new H.map.Circle({lat:52.4571601,lng:13.3806395}, 10000);
2 | // Add the circle to the map:
3 | map.addObject(circle10Km);
4 | map.getViewModel().setLookAtData({
5 | bounds: circle10Km.getBoundingBox()
6 | });
7 |
8 |
9 | var routingParams = {
10 | 'mode': 'fastest;car;',
11 | 'start': '52.4571601,13.3806395',
12 | 'range': '10000',
13 | 'rangetype': 'distance'
14 | };
15 |
16 |
17 | // Define a callback function to process the isoline response.
18 | var onResult = function(result) {
19 | var center = new H.geo.Point(
20 | result.response.center.latitude,
21 | result.response.center.longitude),
22 | isolineCoords = result.response.isoline[0].component[0].shape,
23 | linestring = new H.geo.LineString(),
24 | isolinePolygon,
25 | isolineCenter;
26 |
27 | // Add the returned isoline coordinates to a linestring:
28 | isolineCoords.forEach(function(coords) {
29 | linestring.pushLatLngAlt.apply(linestring, coords.split(','));
30 | });
31 |
32 | // Create a polygon and a marker representing the isoline:
33 | isolinePolygon = new H.map.Polygon(linestring);
34 | isolineCenter = new H.map.Marker(center);
35 |
36 | // Add the polygon and marker to the map:
37 | map.addObjects([isolineCenter, isolinePolygon]);
38 |
39 | // Center and zoom the map so that the whole isoline polygon is
40 | // in the viewport:
41 | map.getViewModel().setLookAtData({bounds: isolinePolygon.getBoundingBox()});
42 | };
43 |
44 | // Get an instance of the routing service:
45 | var router = platform.getRoutingService();
46 |
47 | // Call the Routing API to calculate an isoline:
48 | router.calculateIsoline(
49 | routingParams,
50 | onResult,
51 | function(error) {
52 | alert(error.message);
53 | }
54 | );
55 |
--------------------------------------------------------------------------------
/Day_63/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_63/routing.js:
--------------------------------------------------------------------------------
1 | var circle10Km = new H.map.Circle({lat:52.4571601,lng:13.3806395}, 10000);
2 | // Add the circle to the map:
3 | map.addObject(circle10Km);
4 | map.getViewModel().setLookAtData({
5 | bounds: circle10Km.getBoundingBox()
6 | });
7 |
8 |
9 | var routingParams = {
10 | 'mode': 'fastest;car;',
11 | 'start': '52.4571601,13.3806395',
12 | 'range': '900',// 15 x 60 sec
13 | 'rangetype': 'time'
14 | };
15 |
16 | // Define a callback function to process the isoline response.
17 | var onResult = function(result) {
18 | var center = new H.geo.Point(
19 | result.response.center.latitude,
20 | result.response.center.longitude),
21 | isolineCoords = result.response.isoline[0].component[0].shape,
22 | linestring = new H.geo.LineString(),
23 | isolinePolygon,
24 | isolineCenter;
25 |
26 | // Add the returned isoline coordinates to a linestring:
27 | isolineCoords.forEach(function(coords) {
28 | linestring.pushLatLngAlt.apply(linestring, coords.split(','));
29 | });
30 |
31 | // Create a polygon and a marker representing the isoline:
32 | isolinePolygon = new H.map.Polygon(linestring);
33 | isolineCenter = new H.map.Marker(center);
34 |
35 | // Add the polygon and marker to the map:
36 | map.addObjects([isolineCenter, isolinePolygon]);
37 |
38 | // Center and zoom the map so that the whole isoline polygon is
39 | // in the viewport:
40 | map.getViewModel().setLookAtData({bounds: isolinePolygon.getBoundingBox()});
41 | };
42 |
43 | // Get an instance of the routing service:
44 | var router = platform.getRoutingService();
45 |
46 | // Call the Routing API to calculate an isoline:
47 | router.calculateIsoline(
48 | routingParams,
49 | onResult,
50 | function(error) {
51 | alert(error.message);
52 | }
53 | );
54 |
--------------------------------------------------------------------------------
/Day_64/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_64/routing.js:
--------------------------------------------------------------------------------
1 |
2 | function getMatrixRoute(){
3 | let url = `https://matrix.route.ls.hereapi.com/routing/7.2/calculatematrix.json?`+
4 | `apikey=${window.hereCreds.JS_KEY}`+
5 | `&mode=fastest;car`+
6 | `&start0=52.4571601,13.3806395`+
7 | `&start1=52.530858,13.384744`+
8 | `&start2=52.50665,13.39162`+
9 | `&destination0=52.48505,13.47921`+
10 | `&destination1=52.54345,13.35946`+
11 | `&matrixAttributes=indices`
12 |
13 | fetch(url)
14 | .then(response => response.json())
15 | .then(response => {
16 | console.log(response);
17 | }, error =>{
18 | console.error(error);
19 | });
20 | }
21 |
22 | getMatrixRoute();
23 |
--------------------------------------------------------------------------------
/Day_65/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_66/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_66/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | var routingParameters = {
5 | waypoint0:"52.53086235,13.38475371",
6 | waypoint1:"52.1370754,11.6326044",
7 | mode:"fastest;truck;traffic:enabled",
8 | truckRestrictionPenalty:'strict',
9 | alternatives:3,
10 | representation: "display",
11 | };
12 |
13 |
14 | // Define a callback function to process the routing response:
15 | var onResult = function(result) {
16 | console.log(result);
17 | var colors =["green","orange","yellow","red"]
18 | result.response.route.forEach(route =>{
19 | var lineString = new H.geo.LineString(),
20 | routeShape = route.shape,
21 | polyline,
22 | startMarker,
23 | endMarker;
24 |
25 | // Retrieve the mapped positions of the requested waypoints:
26 | startPoint = route.waypoint[0].mappedPosition;
27 | endPoint = route.waypoint[1].mappedPosition;
28 |
29 | routeShape.forEach(function(point) {
30 | var parts = point.split(',');
31 | lineString.pushLatLngAlt(parts[0], parts[1]);
32 | });
33 |
34 |
35 | polyline = new H.map.Polyline(lineString, {
36 | style: {
37 | lineWidth: 4,
38 | strokeColor: colors[result.response.route.indexOf(route)]
39 | }
40 | });
41 |
42 | startMarker = new H.map.Marker({
43 | lat:route.waypoint[0].mappedPosition.latitude,
44 | lng:route.waypoint[0].mappedPosition.longitude
45 | },{icon:(new H.map.Icon('img/truck.png'))});
46 |
47 |
48 |
49 | endMarker = new H.map.Marker({
50 | lat:route.waypoint[1].mappedPosition.latitude,
51 | lng:route.waypoint[1].mappedPosition.longitude
52 | },{icon:(new H.map.Icon('img/end.png'))});
53 |
54 |
55 |
56 | // Add the polyline to the map
57 | map.addObjects([polyline,startMarker,endMarker]);
58 | // And zoom to its bounding rectangle
59 |
60 | map.getViewPort().setPadding(100, 0, 0, 0);
61 | map.getViewModel().setLookAtData({
62 | bounds: polyline.getBoundingBox()
63 | });
64 | map.getViewPort().setPadding(0, 0, 0, 0);
65 | });
66 | };
67 |
68 | var onError = function(error) {
69 | alert(error.message);
70 | };
71 |
72 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_67/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_68/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_68/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | var routingParameters = {
5 | waypoint0:"52.518543744,13.37906420",
6 | waypoint1:"52.14837255,11.617700516",
7 | mode:"fastest;truck;traffic:enabled",
8 | truckRestrictionPenalty:'strict',
9 | height:3,
10 | alternatives:3,
11 | representation: "display",
12 | };
13 |
14 |
15 | // Define a callback function to process the routing response:
16 | var onResult = function(result) {
17 | console.log(result);
18 | var colors =["green","orange","yellow","red"]
19 | result.response.route.forEach(route =>{
20 | var lineString = new H.geo.LineString(),
21 | routeShape = route.shape,
22 | polyline,
23 | startMarker,
24 | endMarker;
25 |
26 | // Retrieve the mapped positions of the requested waypoints:
27 | startPoint = route.waypoint[0].mappedPosition;
28 | endPoint = route.waypoint[1].mappedPosition;
29 |
30 | routeShape.forEach(function(point) {
31 | var parts = point.split(',');
32 | lineString.pushLatLngAlt(parts[0], parts[1]);
33 | });
34 |
35 |
36 | polyline = new H.map.Polyline(lineString, {
37 | style: {
38 | lineWidth: 4,
39 | strokeColor: colors[result.response.route.indexOf(route)]
40 | }
41 | });
42 |
43 | startMarker = new H.map.Marker({
44 | lat:route.waypoint[0].mappedPosition.latitude,
45 | lng:route.waypoint[0].mappedPosition.longitude
46 | },{icon:(new H.map.Icon('img/truck.png',{size:{w:40, h:40}}))});
47 |
48 |
49 |
50 | endMarker = new H.map.Marker({
51 | lat:route.waypoint[1].mappedPosition.latitude,
52 | lng:route.waypoint[1].mappedPosition.longitude
53 | },{icon:(new H.map.Icon('img/end.png'))});
54 |
55 |
56 |
57 | // Add the polyline to the map
58 | map.addObjects([polyline,startMarker,endMarker]);
59 | // And zoom to its bounding rectangle
60 |
61 | map.getViewPort().setPadding(100, 0, 0, 0);
62 | map.getViewModel().setLookAtData({
63 | bounds: polyline.getBoundingBox()
64 | });
65 | map.getViewPort().setPadding(0, 0, 0, 0);
66 | });
67 | };
68 |
69 | var onError = function(error) {
70 | alert(error.message);
71 | };
72 |
73 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_69/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_69/routing.js:
--------------------------------------------------------------------------------
1 | // Get an instance of the routing service version 7:
2 | var router = platform.getRoutingService();
3 |
4 | var routingParameters = {
5 | waypoint0:"52.53086235,13.38475371",
6 | waypoint1:"52.1370754,11.6326044",
7 | mode:"fastest;truck;traffic:enabled",
8 | truckRestrictionPenalty:'strict',
9 | trailersCount:1,
10 | axleCount:4,
11 | length:20,
12 | alternatives:3,
13 | representation: "display",
14 | };
15 |
16 |
17 | // Define a callback function to process the routing response:
18 | var onResult = function(result) {
19 | console.log(result);
20 | var colors =["green","orange","yellow","red"]
21 | result.response.route.forEach(route =>{
22 | var lineString = new H.geo.LineString(),
23 | routeShape = route.shape,
24 | polyline,
25 | startMarker,
26 | endMarker;
27 |
28 | // Retrieve the mapped positions of the requested waypoints:
29 | startPoint = route.waypoint[0].mappedPosition;
30 | endPoint = route.waypoint[1].mappedPosition;
31 |
32 | routeShape.forEach(function(point) {
33 | var parts = point.split(',');
34 | lineString.pushLatLngAlt(parts[0], parts[1]);
35 | });
36 |
37 |
38 | polyline = new H.map.Polyline(lineString, {
39 | style: {
40 | lineWidth: 4,
41 | strokeColor: colors[result.response.route.indexOf(route)]
42 | }
43 | });
44 |
45 | startMarker = new H.map.Marker({
46 | lat:route.waypoint[0].mappedPosition.latitude,
47 | lng:route.waypoint[0].mappedPosition.longitude
48 | },{icon:(new H.map.Icon('img/truck.png'))});
49 |
50 | endMarker = new H.map.Marker({
51 | lat:route.waypoint[1].mappedPosition.latitude,
52 | lng:route.waypoint[1].mappedPosition.longitude
53 | },{icon:(new H.map.Icon('img/end.png'))});
54 |
55 | // Add the polyline to the map
56 | map.addObjects([polyline,startMarker,endMarker]);
57 | // And zoom to its bounding rectangle
58 |
59 | map.getViewPort().setPadding(100, 0, 0, 0);
60 | map.getViewModel().setLookAtData({
61 | bounds: polyline.getBoundingBox()
62 | });
63 | map.getViewPort().setPadding(0, 0, 0, 0);
64 | });
65 | };
66 |
67 | var onError = function(error) {
68 | alert(error.message);
69 | };
70 |
71 | router.calculateRoute(routingParameters, onResult, onError);
--------------------------------------------------------------------------------
/Day_7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_7/map.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
5 | // initializing default layers for the map
6 | var defaultLayers = platform.createDefaultLayers();
7 | // rendering map within the container on the page
8 | var map = new H.Map(
9 | document.getElementById('mapContainer'),
10 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
11 | {
12 | zoom: 11, // Initial zoom level of map
13 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
14 | });
15 |
16 | // creating default UI for map
17 | var ui = H.ui.UI.createDefault(map, defaultLayers);
18 |
19 | // Add basic map events like pan and zoom
20 | var mapEvents = new H.mapevents.MapEvents(map);
21 | // Initialize for map behaviour on events
22 | var behavior = new H.mapevents.Behavior(mapEvents);
23 |
24 | // adjust tilt and rotation of the map
25 | map.getViewModel().setLookAtData({
26 | tilt: 60,
27 | heading: 90
28 | });
29 |
30 |
31 | function getBrowserPosition(){
32 |
33 | if(navigator.geolocation) {
34 | navigator.geolocation.getCurrentPosition(position => {
35 | console.log(position.coords);
36 | });
37 | } else {
38 | alert("Geolocation is not supported by this browser!");
39 | }
40 | };
41 |
42 | getBrowserPosition();
--------------------------------------------------------------------------------
/Day_70/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_71/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_72/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_73/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_74/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_75/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_76/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_76/routing.js:
--------------------------------------------------------------------------------
1 |
2 | var tollCostCall = `https://fleet.ls.hereapi.com/2/calculateroute.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&waypoint0=52.53086235,13.38475371`+
5 | `&waypoint1=53.13256,17.98909`+
6 | `&mode=fastest;truck;traffic:enabled`+
7 | `&alternatives=3`+
8 | `&legAttributes=none`+
9 | `&routeAttributes=none`+
10 | `&driver_cost=10`+
11 | `&vehicle_cost=0.5`+
12 | `¤cy=EUR`;
13 |
14 | fetch(tollCostCall)
15 | .then(response => response.json())
16 | .then(response => {
17 |
18 | response.response.route.forEach(route=>{
19 |
20 | document.getElementById("panel").innerHTML += `
`+ " Driver Cost: "+route.cost.details.driverCost+ " €"+" Vehicle Cost: "+route.cost.details.vehicleCost+ " €"+" Total Cost: "+route.cost.totalCost+" €";
21 |
22 | });
23 |
24 | }, error =>{
25 | console.error(error);
26 | });
--------------------------------------------------------------------------------
/Day_77/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_77/routing.js:
--------------------------------------------------------------------------------
1 |
2 | var tollCostCall = `https://fleet.ls.hereapi.com/2/calculateroute.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&waypoint0=52.53086235,13.38475371`+
5 | `&waypoint1=53.13256,17.98909`+
6 | `&mode=fastest;truck;traffic:enabled`+
7 | `&alternatives=3`+
8 | `&legAttributes=none`+
9 | `&routeAttributes=none`+
10 | `&driver_cost=10`+
11 | `&vehicle_cost=0.5`+
12 | `¤cy=EUR`+
13 | `&customConsumptionDetails=40t`;
14 |
15 | fetch(tollCostCall)
16 | .then(response => response.json())
17 | .then(response => {
18 | console.log(response);
19 |
20 | response.response.route.forEach(route=>{
21 |
22 | document.getElementById("panel").innerHTML += `
`+ " Driver Cost: "+route.cost.details.driverCost+ " €"+
23 | " Vehicle Cost: "+route.cost.details.vehicleCost+ " €"+
24 | " Energy Cost: "+route.cost.details.energyCost+ " €"+
25 | " Total Cost: "+route.cost.totalCost+" €";
26 |
27 | });
28 |
29 | }, error =>{
30 | console.error(error);
31 | });
--------------------------------------------------------------------------------
/Day_78/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_78/routing.js:
--------------------------------------------------------------------------------
1 |
2 | var tollCostCall = `https://fleet.ls.hereapi.com/2/calculateroute.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&waypoint0=52.53086235,13.38475371`+
5 | `&waypoint1=53.13256,17.98909`+
6 | `&mode=fastest;truck;traffic:enabled`+
7 | `&alternatives=3`+
8 | `&legAttributes=none`+
9 | `&routeAttributes=none`+
10 | `&driver_cost=10`+
11 | `&vehicle_cost=0.5`+
12 | `¤cy=EUR`+
13 | `&customConsumptionDetails=40t`+
14 | `&fuelType=Diesel`+
15 | `&costPerConsumptionUnit=1.225`;
16 |
17 | fetch(tollCostCall)
18 | .then(response => response.json())
19 | .then(response => {
20 | console.log(response);
21 |
22 | response.response.route.forEach(route=>{
23 |
24 | document.getElementById("panel").innerHTML += `
`+ " Driver Cost: "+route.cost.details.driverCost+ " €"+
25 | " Vehicle Cost: "+route.cost.details.vehicleCost+ " €"+
26 | " Energy Cost: "+route.cost.details.energyCost+ " €"+
27 | " Total Cost: "+route.cost.totalCost+" €";
28 |
29 | });
30 |
31 | }, error =>{
32 | console.error(error);
33 | });
--------------------------------------------------------------------------------
/Day_79/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_79/routing.js:
--------------------------------------------------------------------------------
1 |
2 | var tollCostCall = `https://fleet.ls.hereapi.com/2/calculateroute.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&waypoint0=52.53086235,13.38475371`+
5 | `&waypoint1=53.13256,17.98909`+
6 | `&mode=fastest;truck;traffic:enabled`+
7 | `&alternatives=3`+
8 | `&legAttributes=none`+
9 | `&routeAttributes=none`+
10 | `&driver_cost=10`+
11 | `&vehicle_cost=0.5`+
12 | `¤cy=EUR`+
13 | `&customConsumptionDetails=40t`+
14 | `&fuelType=Diesel`+
15 | `&costPerConsumptionUnit=1.225`+
16 | `&rollups=total`+
17 | `&trailersCount=1`+
18 | `&weightPerAxle=10`+
19 | `&tollVehicleType=3`+
20 | `&trailerType=2`;
21 |
22 | fetch(tollCostCall)
23 | .then(response => response.json())
24 | .then(response => {
25 | console.log(response);
26 |
27 | response.response.route.forEach(route=>{
28 |
29 | document.getElementById("panel").innerHTML += `
`+ " Driver Cost: "+route.cost.details.driverCost+ " €"+
30 | `
`+" Vehicle Cost: "+route.cost.details.vehicleCost+ " €"+
31 | `
`+" Energy Cost: "+route.cost.details.energyCost+ " €"+
32 | `
`+" Toll Cost: "+route.cost.details.tollCost+ " €"+
33 | `
`+" Total Cost: "+route.cost.totalCost+" €";
34 |
35 | });
36 |
37 | }, error =>{
38 | console.error(error);
39 | });
--------------------------------------------------------------------------------
/Day_8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_8/map.js:
--------------------------------------------------------------------------------
1 |
2 | // Initialize platform with JS API KEY
3 | var platform = new H.service.Platform({
4 | apikey: "YOUR_JS_API_KEY"
5 | });
6 | // initializing default layers for the map
7 | var defaultLayers = platform.createDefaultLayers();
8 | // rendering map within the container on the page
9 | var map = new H.Map(
10 | document.getElementById('mapContainer'),
11 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
12 | {
13 | zoom: 11, // Initial zoom level of map
14 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
15 | });
16 |
17 | // creating default UI for map
18 | var ui = H.ui.UI.createDefault(map, defaultLayers);
19 |
20 | // Add basic map events like pan and zoom
21 | var mapEvents = new H.mapevents.MapEvents(map);
22 | // Initialize for map behaviour on events
23 | var behavior = new H.mapevents.Behavior(mapEvents);
24 |
25 | // adjust tilt and rotation of the map
26 | map.getViewModel().setLookAtData({
27 | tilt: 60,
28 | heading: 90
29 | });
30 |
31 | getBrowserPosition();
32 |
33 |
34 | function getBrowserPosition(){
35 |
36 | if(navigator.geolocation) {
37 | navigator.geolocation.getCurrentPosition(position => {
38 | // console.log(position.coords);
39 | let browserPosition = {lat:position.coords.latitude, lng:position.coords.longitude};
40 | let marker = new H.map.Marker(browserPosition);
41 | map.addObject(marker);
42 | });
43 | } else {
44 | alert("Geolocation is not supported by this browser!");
45 | }
46 | };
47 |
48 |
49 |
--------------------------------------------------------------------------------
/Day_80/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_80/routing.js:
--------------------------------------------------------------------------------
1 |
2 | var tollCostCall = `https://fleet.ls.hereapi.com/2/calculateroute.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&waypoint0=52.53086235,13.38475371`+
5 | `&waypoint1=53.13256,17.98909`+
6 | `&mode=fastest;truck;traffic:enabled`+
7 | `&alternatives=3`+
8 | `&legAttributes=none`+
9 | `&routeAttributes=none`+
10 | `&driver_cost=10`+
11 | `&vehicle_cost=0.5`+
12 | `¤cy=EUR`+
13 | `&customConsumptionDetails=40t`+
14 | `&fuelType=Diesel`+
15 | `&costPerConsumptionUnit=1.225`+
16 | `&rollups=total,tollsys`+
17 | `&trailersCount=1`+
18 | `&weightPerAxle=10`+
19 | `&tollVehicleType=3`+
20 | `&trailerType=2`;
21 |
22 | fetch(tollCostCall)
23 | .then(response => response.json())
24 | .then(response => {
25 | console.log(response);
26 |
27 | response.response.route.forEach(route=>{
28 |
29 | document.getElementById("panel").innerHTML += `
`+ " Driver Cost: "+route.cost.details.driverCost+ " €"+
30 | `
`+" Vehicle Cost: "+route.cost.details.vehicleCost+ " €"+
31 | `
`+" Energy Cost: "+route.cost.details.energyCost+ " €";
32 | route.tollCost.costsByTollSystem.forEach(tollSys =>{
33 | document.getElementById("panel").innerHTML += `
`+ " Toll system Id: " + tollSys.tollSystemId + " Toll Amount "+tollSys.amountInTargetCurrency+ " €";
34 | });
35 | document.getElementById("panel").innerHTML += `
`+" Total Toll Cost: "+route.tollCost.totalCost.amountInTargetCurrency+ " €"+
36 | `
`+" Total Cost: "+route.cost.totalCost+" €";
37 |
38 | });
39 |
40 | }, error =>{
41 | console.error(error);
42 | });
--------------------------------------------------------------------------------
/Day_81/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_82/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_82/routing.js:
--------------------------------------------------------------------------------
1 | function getEVChargingRoute(){
2 | let url = `https://wse.ls.hereapi.com/2/findsequence.json`+
3 | `?apiKey=${window.hereCreds.JS_KEY}`+
4 | `&start=52.53086235,13.38475371`+//Berlin
5 | `&destination0=52.457213,13.3806209`+// Warsaw
6 | `&destination1=52.518229,13.315388`+
7 | `&destination2=52.54830288,13.3634539`+
8 | `&mode=fastest;car;traffic:disabled`+
9 | `&improveFor=time`;
10 |
11 |
12 | fetch(url)
13 | .then(response => response.json())
14 | .then(response => {
15 |
16 | // let route = response.response.route[0];
17 | console.log(response.results);
18 | let routeGroup = new H.map.Group();
19 |
20 | response.results[0].waypoints.forEach(waypoint => {
21 |
22 | let waypointMarker = new H.map.Marker({
23 | lat:waypoint.lat,
24 | lng:waypoint.lng
25 | });
26 | waypointMarker.setData("Sequence: "+waypoint.sequence+" "+waypoint.id);
27 | routeGroup.addObject(waypointMarker);
28 |
29 | });
30 |
31 | map.addObject(routeGroup);
32 | map.getViewPort().setPadding(100, 0, 0, 0);
33 | map.getViewModel().setLookAtData({
34 | bounds: routeGroup.getBoundingBox()
35 | });
36 | map.getViewPort().setPadding(0, 0, 0, 0);
37 |
38 | }, error =>{
39 | console.error(error);
40 | });
41 | }
42 |
43 | getEVChargingRoute();
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Day_83/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_83/routing.js:
--------------------------------------------------------------------------------
1 |
2 | function uploadCustomRoute(){
3 | let url = `https://fleet.ls.hereapi.com/2/overlays/upload.json`+
4 | `?apikey=${window.hereCreds.JS_KEY}`+
5 | `&map_name=OVERLAYIKEA`+
6 | `&overlay_spec=[{
7 | "op":"create",
8 | "shape":[
9 | [52.46959,13.36809],
10 | [52.46959,13.36801],
11 | [52.46960,13.36792],
12 | [52.46960,13.36781],
13 | [52.46960,13.36771],
14 | [52.46961,13.36761],
15 | [52.46961,13.36751],
16 | [52.46962,13.36741],
17 | [52.46962,13.36732]],
18 | "data":{"NAMES":"IKEA loading Road","TRAVEL_DIRECTION":"B"}
19 | }]`+
20 | `&storage=readonly`;
21 |
22 |
23 |
24 | fetch(url)
25 | .then(response => response.json())
26 | .then(response => {
27 | console.log(response);
28 |
29 |
30 | }, error =>{
31 | console.error(error);
32 | });
33 | }
34 |
35 | function drawCustomRoute(){
36 | let points = [
37 | {lat:52.46959,lng:13.36809},
38 | {lat:52.46959,lng:13.36801},
39 | {lat:52.46960,lng:13.36792},
40 | {lat:52.46960,lng:13.36781},
41 | {lat:52.46960,lng:13.36771},
42 | {lat:52.46961,lng:13.36761},
43 | {lat:52.46961,lng:13.36751},
44 | {lat:52.46962,lng:13.36741},
45 | {lat:52.46962,lng:13.36732}];
46 |
47 |
48 | var linestring = new H.geo.LineString();
49 | points.forEach(function(point) {
50 | linestring.pushPoint(point);
51 | });
52 |
53 | // Initialize a polyline with the linestring:
54 | var polyline = new H.map.Polyline(linestring, { style: { strokeColor: "rgba(255,0,0,0.5)", lineWidth: 6 }});
55 |
56 | // Add the polyline to the map:
57 | map.addObject(polyline);
58 | };
59 |
60 | drawCustomRoute();
61 | uploadCustomRoute();
62 |
63 |
--------------------------------------------------------------------------------
/Day_84/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_85/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100 Days Of Code
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 100 Days of Code with HERE
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Day_9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 100DaysOfCode
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 100 Days of Code with HERE
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Day_9/map.js:
--------------------------------------------------------------------------------
1 | // Initialize platform with JS API KEY
2 | var platform = new H.service.Platform({
3 | apikey: "YOUR_JS_API_KEY"
4 | });
5 | // initializing default layers for the map
6 | var defaultLayers = platform.createDefaultLayers();
7 | // rendering map within the container on the page
8 | var map = new H.Map(
9 | document.getElementById('mapContainer'),
10 | defaultLayers.vector.normal.map, // rendering vector map with NORMAL map view.
11 | {
12 | zoom: 11, // Initial zoom level of map
13 | center: {lat: 52.53086, lng: 13.38474} // Initial center of map
14 | });
15 |
16 | // creating default UI for map
17 | var ui = H.ui.UI.createDefault(map, defaultLayers);
18 |
19 | // Add basic map events like pan and zoom
20 | var mapEvents = new H.mapevents.MapEvents(map);
21 | // Initialize for map behaviour on events
22 | var behavior = new H.mapevents.Behavior(mapEvents);
23 |
24 | // adjust tilt and rotation of the map
25 | map.getViewModel().setLookAtData({
26 | tilt: 60,
27 | heading: 90
28 | });
29 |
30 | getBrowserPosition();
31 |
32 | let positionIcon = ``
33 |
34 |
35 | function getBrowserPosition(){
36 |
37 | if(navigator.geolocation) {
38 | navigator.geolocation.getCurrentPosition(position => {
39 | // console.log(position.coords);
40 | let browserPosition = {lat:position.coords.latitude, lng:position.coords.longitude};
41 | let posIcon = new H.map.Icon(positionIcon);
42 | let marker = new H.map.Marker(browserPosition,{icon:posIcon});
43 | map.addObject(marker);
44 | });
45 | } else {
46 | alert("Geolocation is not supported by this browser!");
47 | }
48 | };
49 |
--------------------------------------------------------------------------------
/Day_91/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Map at a specified location
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Day_91/map.js:
--------------------------------------------------------------------------------
1 | // Step 1: initialize the HERE map platform
2 | // IMPORTANT: Replace the apikey with your own from developer.here.com
3 | var platform = new H.service.Platform({
4 | apikey: 'YOUR_API_KEY'
5 | });
6 | var defaultLayers = platform.createDefaultLayers();
7 |
8 | // Step 2: Initialize the map in the "map" div
9 | // This map is centered on New York, using the default map style
10 | var map = new H.Map(document.getElementById('map'),
11 | defaultLayers.vector.normal.map, {
12 | center: { lat: 40.71, lng: -74.01 },
13 | zoom: 15,
14 | pixelRatio: window.devicePixelRatio || 1
15 | });
16 |
17 | // Step 4: Add a resize listener to make sure that the map occupies the whole container
18 | window.addEventListener('resize', () => map.getViewPort().resize());
19 |
20 | // Step 5: Enable the event system and add default interactions (e.g., zoom)
21 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
22 |
23 | // Step 6: Create the default UI components (e.g., zoom buttons)
24 | var ui = H.ui.UI.createDefault(map, defaultLayers);
25 |
--------------------------------------------------------------------------------
/Day_91/transit.js:
--------------------------------------------------------------------------------
1 | function getTransitRoute() {
2 |
3 | let url = "https://transit.router.hereapi.com/v8/routes" +
4 | "?apiKey=YOUR_API_KEY" +
5 | "&origin=1.40464,103.79009" +
6 | "&destination=1.28675,103.85441" +
7 | "&return=polyline";
8 |
9 | fetch(url)
10 | .then(response => response.json())
11 | .then(response => {
12 |
13 | let routeGroup = new H.map.Group();
14 |
15 | response.routes[0].sections.forEach(section => {
16 |
17 | let lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline);
18 | var polyline = new H.map.Polyline(lineString, { style: { lineWidth: 10 } });
19 | routeGroup.addObject(polyline);
20 |
21 | });
22 |
23 | map.addObject(routeGroup);
24 | map.getViewModel().setLookAtData({
25 | bounds: routeGroup.getBoundingBox()
26 | });
27 |
28 | }, error => {
29 | console.log.error(error);
30 | });
31 |
32 | }
33 |
34 | getTransitRoute();
--------------------------------------------------------------------------------
/Day_92/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Map at a specified location
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Day_92/map.js:
--------------------------------------------------------------------------------
1 | // Step 1: initialize the HERE map platform
2 | // IMPORTANT: Replace the apikey with your own from developer.here.com
3 | var platform = new H.service.Platform({
4 | apikey: 'YOUR_API_KEY'
5 | });
6 | var defaultLayers = platform.createDefaultLayers();
7 |
8 | // Step 2: Initialize the map in the "map" div
9 | // This map is centered on New York, using the default map style
10 | var map = new H.Map(document.getElementById('map'),
11 | defaultLayers.vector.normal.map, {
12 | center: { lat: 40.71, lng: -74.01 },
13 | zoom: 15,
14 | pixelRatio: window.devicePixelRatio || 1
15 | });
16 |
17 | // Step 4: Add a resize listener to make sure that the map occupies the whole container
18 | window.addEventListener('resize', () => map.getViewPort().resize());
19 |
20 | // Step 5: Enable the event system and add default interactions (e.g., zoom)
21 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
22 |
23 | // Step 6: Create the default UI components (e.g., zoom buttons)
24 | var ui = H.ui.UI.createDefault(map, defaultLayers);
25 |
--------------------------------------------------------------------------------
/Day_92/transit.js:
--------------------------------------------------------------------------------
1 | function getTransitRoute() {
2 |
3 | let url = "https://transit.router.hereapi.com/v8/routes" +
4 | "?apiKey=YOUR_API_KEY" +
5 | "&origin=52.5214,13.41555" +
6 | "&destination=52.50715,13.39061" +
7 | "&return=polyline" +
8 | "&arrivalTime=2020-07-03T09:00:00" +
9 | "&alternatives=1";
10 |
11 | fetch(url)
12 | .then(response => response.json())
13 | .then(response => {
14 |
15 | let routeGroup = new H.map.Group();
16 |
17 | response.routes.forEach(route => {
18 | route.sections.forEach(section => {
19 |
20 | let lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline);
21 | var polyline = new H.map.Polyline(lineString, { style: { lineWidth: 10 } });
22 | routeGroup.addObject(polyline);
23 |
24 | });
25 | });
26 |
27 | map.addObject(routeGroup);
28 | map.getViewModel().setLookAtData({
29 | bounds: routeGroup.getBoundingBox()
30 | });
31 |
32 | }, error => {
33 | console.log.error(error);
34 | });
35 |
36 | }
37 |
38 | getTransitRoute();
--------------------------------------------------------------------------------
/Day_93/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Map at a specified location
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Day_93/map.js:
--------------------------------------------------------------------------------
1 | // Step 1: initialize the HERE map platform
2 | // IMPORTANT: Replace the apikey with your own from developer.here.com
3 | var platform = new H.service.Platform({
4 | apikey: 'YOUR_API_KEY'
5 | });
6 | var defaultLayers = platform.createDefaultLayers();
7 |
8 | // Step 2: Initialize the map in the "map" div
9 | // This map is centered on New York, using the default map style
10 | var map = new H.Map(document.getElementById('map'),
11 | defaultLayers.vector.normal.map, {
12 | center: { lat: 40.71, lng: -74.01 },
13 | zoom: 15,
14 | pixelRatio: window.devicePixelRatio || 1
15 | });
16 |
17 | // Step 4: Add a resize listener to make sure that the map occupies the whole container
18 | window.addEventListener('resize', () => map.getViewPort().resize());
19 |
20 | // Step 5: Enable the event system and add default interactions (e.g., zoom)
21 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
22 |
23 | // Step 6: Create the default UI components (e.g., zoom buttons)
24 | var ui = H.ui.UI.createDefault(map, defaultLayers);
25 |
--------------------------------------------------------------------------------
/Day_93/transit.js:
--------------------------------------------------------------------------------
1 | function getTransitRoute() {
2 |
3 | let url = "https://transit.router.hereapi.com/v8/routes" +
4 | "?apiKey=YOUR_API_KEY" +
5 | "&origin=40.74843,-73.98567" +
6 | "&destination=40.78193,-73.97239" +
7 | "&return=polyline,fares" +
8 | "&modes=-subway" +
9 | "&changes=2";
10 |
11 | fetch(url)
12 | .then(response => response.json())
13 | .then(response => {
14 |
15 | let routeGroup = new H.map.Group();
16 |
17 | response.routes.forEach(route => {
18 | console.log(route);
19 | route.sections.forEach(section => {
20 |
21 | let lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline);
22 | var polyline = new H.map.Polyline(lineString, { style: { lineWidth: 10 } });
23 | routeGroup.addObject(polyline);
24 |
25 | });
26 | });
27 |
28 | map.addObject(routeGroup);
29 | map.getViewModel().setLookAtData({
30 | bounds: routeGroup.getBoundingBox()
31 | });
32 |
33 | }, error => {
34 | console.log.error(error);
35 | });
36 |
37 | }
38 |
39 | getTransitRoute();
--------------------------------------------------------------------------------
/Day_94/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Map at a specified location
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Day_94/map.js:
--------------------------------------------------------------------------------
1 | // Step 1: initialize the HERE map platform
2 | // IMPORTANT: Replace the apikey with your own from developer.here.com
3 | var platform = new H.service.Platform({
4 | apikey: 'YOUR_API_KEY'
5 | });
6 | var defaultLayers = platform.createDefaultLayers();
7 |
8 | // Step 2: Initialize the map in the "map" div
9 | // This map is centered on New York, using the default map style
10 | var map = new H.Map(document.getElementById('map'),
11 | defaultLayers.vector.normal.map, {
12 | center: { lat: 40.71, lng: -74.01 },
13 | zoom: 15,
14 | pixelRatio: window.devicePixelRatio || 1
15 | });
16 |
17 | // Step 4: Add a resize listener to make sure that the map occupies the whole container
18 | window.addEventListener('resize', () => map.getViewPort().resize());
19 |
20 | // Step 5: Enable the event system and add default interactions (e.g., zoom)
21 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
22 |
23 | // Step 6: Create the default UI components (e.g., zoom buttons)
24 | var ui = H.ui.UI.createDefault(map, defaultLayers);
25 |
--------------------------------------------------------------------------------
/Day_94/transit.js:
--------------------------------------------------------------------------------
1 | function getTransitRoute() {
2 |
3 | let url = "https://transit.router.hereapi.com/v8/stations" +
4 | "?apiKey=YOUR_API_KEY" +
5 | "&in=51.50808,-0.07587";
6 |
7 | fetch(url)
8 | .then(response => response.json())
9 | .then(response => {
10 |
11 | console.log(response);
12 |
13 | let markerGroup = new H.map.Group();
14 |
15 | response.stations.forEach(station => {
16 | let marker = new H.map.Marker(station.place.location);
17 | markerGroup.addObject(marker);
18 | });
19 |
20 | map.addObject(markerGroup);
21 | map.getViewModel().setLookAtData({
22 | bounds: markerGroup.getBoundingBox()
23 | });
24 |
25 | }, error => {
26 | console.log.error(error);
27 | });
28 |
29 | }
30 |
31 | getTransitRoute();
--------------------------------------------------------------------------------
/Day_95/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Map at a specified location
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Day_95/map.js:
--------------------------------------------------------------------------------
1 | // Step 1: initialize the HERE map platform
2 | // IMPORTANT: Replace the apikey with your own from developer.here.com
3 | var platform = new H.service.Platform({
4 | apikey: 'YOUR_API_KEY'
5 | });
6 | var defaultLayers = platform.createDefaultLayers();
7 |
8 | // Step 2: Initialize the map in the "map" div
9 | // This map is centered on New York, using the default map style
10 | var map = new H.Map(document.getElementById('map'),
11 | defaultLayers.vector.normal.map, {
12 | center: { lat: 40.71, lng: -74.01 },
13 | zoom: 15,
14 | pixelRatio: window.devicePixelRatio || 1
15 | });
16 |
17 | // Step 4: Add a resize listener to make sure that the map occupies the whole container
18 | window.addEventListener('resize', () => map.getViewPort().resize());
19 |
20 | // Step 5: Enable the event system and add default interactions (e.g., zoom)
21 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
22 |
23 | // Step 6: Create the default UI components (e.g., zoom buttons)
24 | var ui = H.ui.UI.createDefault(map, defaultLayers);
25 |
--------------------------------------------------------------------------------
/Day_95/transit.js:
--------------------------------------------------------------------------------
1 | function getTransitRoute() {
2 |
3 | let url = "https://transit.router.hereapi.com/v8/departures" +
4 | "?apiKey=YOUR_API_KEY" +
5 | "&ids=425315170" +
6 | "×pan=30";
7 |
8 | fetch(url)
9 | .then(response => response.json())
10 | .then(response => {
11 |
12 | console.log(response);
13 |
14 | }, error => {
15 | console.log.error(error);
16 | });
17 |
18 | }
19 |
20 | getTransitRoute();
--------------------------------------------------------------------------------
/Day_96/readme.md:
--------------------------------------------------------------------------------
1 | For this day, you simply install the CLI via npm. Run this in your terminal:
2 |
3 | npm install -g @here/cli
4 |
5 | Then run:
6 |
7 | here configure
8 |
9 | This will prompt you for your username and password. You can get this by signing up for our freemium plan at https://developer.here.com
--------------------------------------------------------------------------------
/Day_97/readme.md:
--------------------------------------------------------------------------------
1 | For this day, you'll run the following commands.
2 |
3 | here xyz create -t "NPS Data"
4 |
5 | This creates a new, empty space with the title, "NPS Data". When it's done, it will output the ID of the new space.
6 |
7 | here xyz upload ID_OF_THE_NEW_SPACE -f ./national-parks.geojson
8 |
9 | This will upload the data in `national-parks.geojson` to the space you just created.
10 |
11 | here xyz show ID_OF_THE_NEW_SPACE
12 |
13 | This will show the contents of the space.
--------------------------------------------------------------------------------
/Day_98/app.js:
--------------------------------------------------------------------------------
1 | const fetch = require('node-fetch');
2 |
3 | require('dotenv').config();
4 | const ACCESS_TOKEN = process.env.ACCESS_TOKEN;
5 | const SPACE_ID = process.env.SPACE_ID;
6 |
7 | fetch(`https://xyz.api.here.com/hub/spaces/${SPACE_ID}/iterate?access_token=${ACCESS_TOKEN}`)
8 | .then(res => {
9 | return res.json();
10 | })
11 | .then(res => {
12 | console.log(res);
13 | })
14 | .catch(e => {
15 | console.error(e);
16 | });
17 |
18 |
--------------------------------------------------------------------------------
/Day_98/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "requires": true,
3 | "lockfileVersion": 1,
4 | "dependencies": {
5 | "dotenv": {
6 | "version": "8.2.0",
7 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
8 | "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
9 | },
10 | "node-fetch": {
11 | "version": "2.6.7",
12 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
13 | "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/Day_98/readme.md:
--------------------------------------------------------------------------------
1 | Get your token ID here:
2 |
3 | https://xyz.api.here.com/token-ui/spacemgmt.html
4 |
5 | Copy the value, and the space ID, to the .env file:
6 |
7 | ACCESS_TOKEN=The token value
8 | SPACE_ID=The ID of the space
--------------------------------------------------------------------------------
/Day_99/app.js:
--------------------------------------------------------------------------------
1 | const fetch = require('node-fetch');
2 |
3 | require('dotenv').config();
4 | const ACCESS_TOKEN = process.env.ACCESS_TOKEN;
5 | const SPACE_ID = process.env.SPACE_ID;
6 |
7 | // City of New Orleans, LA
8 | const LAT = 29.95;
9 | const LON = -90.07;
10 | // How big of a circle to search (meters)
11 | const RAD = 5000;
12 |
13 | fetch(`https://xyz.api.here.com/hub/spaces/${SPACE_ID}/spatial?access_token=${ACCESS_TOKEN}&lat=${LAT}&lon=${LON}&radius=${RAD}`)
14 | .then(res => {
15 | return res.json();
16 | })
17 | .then(res => {
18 | console.log(res);
19 | })
20 | .catch(e => {
21 | console.error(e);
22 | });
23 |
24 |
--------------------------------------------------------------------------------
/Day_99/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "requires": true,
3 | "lockfileVersion": 1,
4 | "dependencies": {
5 | "dotenv": {
6 | "version": "8.2.0",
7 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
8 | "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
9 | },
10 | "node-fetch": {
11 | "version": "2.6.7",
12 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
13 | "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/Day_99/readme.md:
--------------------------------------------------------------------------------
1 | Get your token ID here:
2 |
3 | https://xyz.api.here.com/token-ui/spacemgmt.html
4 |
5 | Copy the value, and the space ID, to the .env file:
6 |
7 | ACCESS_TOKEN=The token value
8 | SPACE_ID=The ID of the space
--------------------------------------------------------------------------------
/img/100daysofcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/100daysofcode.jpg
--------------------------------------------------------------------------------
/img/bicycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/bicycle.png
--------------------------------------------------------------------------------
/img/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/car.png
--------------------------------------------------------------------------------
/img/finish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/finish.png
--------------------------------------------------------------------------------
/img/radioactive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/radioactive.png
--------------------------------------------------------------------------------
/img/robot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/robot.png
--------------------------------------------------------------------------------
/img/truck.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/truck.png
--------------------------------------------------------------------------------
/img/walk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kuberaspeaking/100DaysOfCodeWithHERE/a5ade2dd1c4ec230c9c5dd159b496debda509416/img/walk.png
--------------------------------------------------------------------------------