An amazing way to learn a new skill is to learn a little bit of it , every day. We at HERE Technologies want you to get acquainted with Location Technology through Map APIs provided by us by launching Days Of Code with HERE
Starting from the 1st of April 2020, we have been posting 1 task every day on our twitter handle @heredev and will be doing this for 100 days. In solving the tasks, you will be using the HERE JavaScript APIs found at developer.here.com. The Documentation section will help you find the solutions.
Feel free to tweet your solutions back at us with the tags #100DaysOfCode and #100DaysOfCodeWithHERE.
We will also provide you the solutions in various forms:
- Preview video on twitter with solution to the previous day task
- Blogpost with solutions for 5 days of tasks on our developer blogs
- Video tutorial with solutions for 5 days of tasks on YouTube
If you have any questions during the 100 Days, feel free to dm us , post your questions on our developer blogs and YouTube videos or post the question on our slack channel
You will also find the day wise code in this repo.
Happy coding with 100DaysOfCode!
Day 0/100 : Get your credentials by signing up for a freemium account at developer.here.com
- Create the frame for an HTML + JS web page
- Add HERE map core and map services source within the tags
- Create div for holding map - width = 100% of screen , height = 80% of screen, background colour of your choice.
- initialize platform with the JavaScript apiKey
- define the center of the map with latitude and longitude
- initialize VECTOR map with default layer, center of map and zoom level
- Add zoom in and out buttons to the map.
- Also add ui element to change map type (satellite, traffic) after loading.
- Add panning capability to the map
- Set the map to tilt at a 60º angle
- Align the map such that the top of the map is the West half of the globe
- Get position from your browser * Hint check out our blogs
- Add basic marker at current position
- Change the marker from the default marker to an svg marker
- The maker can be a white circle inside a green circle like the one on our web app Here We Go
- add event to log the position when you click anywhere on the map
- Place an image as a marker where you clicked on the map.
- Add the text " I'm Here " to the marker as marker data
- Display an info-bubble on tapping the marker
- show the marker data as the info in the bubble.
- add capabilities to drag a marker and position it in another place on the screen
- Hint: You will have to write event listeners for when you start the drag, during the drag and end of drag
- Draw a circle of radius 10 km
- Let the center be the new position after the marker was dragged
- Fill in the circle with a color of your choice
- Give it a darker border of width 4px
- Change the map font on Load
- Hint ;) Take a look at map styles
- Create a button called highlight hospitals
- Change the colour of all hospitals in the world to a bright red on clicking the button
- Hint- use map style on load
- Change the default display language of the map to anything other than English
- Change the position of the map control panel to the top right of the map
- Change the unit of the map to see distance in miles
- Use the geocoder and Search service to conduct a free form search for 'hauptstraße'
- Choose any street with a common name instead, and let us know how many results you get!
- Limit the results from the task on Day 21 to 5 results
- Limit the results from the task on Day 22 to the country ' Germany'
- If you are using a street near you, limit the search to your country
- Instead of the free form search, use a structured search where street = hauptstraße , city = Berlin, Country = Germany
- Customize this according to the street you want in the result.
- Search for 'Invalidenstraße 116, Berlin'
- Place a marker on the access point of the building.
- Use the discover endpoint of the Geocoder and search for ‘markets’
- specify a point where you want to discover the markets
- Using the discover endpoint, search for markets in a 1km radius
- Note down the 'distance' parameter of each of the results from the result of Day 27
- Display the result in an info-bubble for every result.
- I am so tired that I need Starbucks and cannot even type it completely
- Use the autosuggest endpoint to search for an incomplete query 'star' near you.
- Repeat the query from day 29
- This time, restrict your search within a box of 4 blocks
- Hint : check the parameter bounding box
- Use the 'Browse' endpoint of the Geocoding and Search API to look for a 'Museum'
- Do a simple search with just the 'name'
- Add to the search query from Day 31 to add a level 3 category search.
- Look for 'History Museums' around you while writing 'Museum' in the name field
- Modify the search request from day 32 to use the level 2 food categories for Mexican food
- Make sure that you only search for restaurants which serve ' takeout' .
- Note the 'id' from one of the places in the results from day 33
- Use this id to 'lookup' the specific place
- You know where a friend lives but can't find their postal address to send them a gift ?
- Use the reverse geocoder to get the postal address from the position on the map {lat: ,lng: }
- Draw a polygon around a place that is interesting to you and save it in a WKT file.
- Upload the polygon you created in day 36 as a layer so you can use as a geofence later
- Retrieve the ID of the polygon that you uploaded as a layer on day 37
- Given a point with latitude and longitude and your layer from day 37, use one of our APIs to check whether the point is inside your layer or not.
- Hint: Check out the link: https://t.her.is/35zshEV
- Update your function from day 39 so that it’ll determine whether the point is within 100 meter proximity of your layer or not.
- Determine two random locations on the map that are navigable by car.
- Get the shortest route for car to drive between those locations in the form of a polyline.
- Use the flexible polyline received as the result from Day 41
- Draw the first route on the map and color it #034F84
- Request for 3 alternative routes for the route received on Day 42
- Set the departure time to 9 AM for the route
- Set the departure time to 3 PM for the same route
- Compare the difference between all received routes
- Get the summary of the time required and distance covered for any of the routes you calculated in the previous days.
- Add a waypoint which falls between the route from day 41
- Draw a route including this waypoint
- Print out driving instructions and actions for the first route received on Day 46
- Find out the speed limit on the route for Day 46
- Add a stopover of 900 seconds to the waypoint from day 46
- Log the waiting time with instructions
- Get a walking route between two points
- Draw the route with a dashed line
- For the pedestrian route from day 50, avoid parks
- Use Routing v7 to do this
- Get a bicycle route between two points
- Use Routing v7 to do this
- For the bicycle route from day 52, avoid dirt roads
- Use Routing v7 to do this
- Get a public transport route between two points
- Use Routing v7 to do this
- For the public transport route for day 54, get a route without buses
- Use Routing v7 to do this
- With a car route from a point A to B, avoid traffic jams
- Identify an area on the route from day 56 which you don't like driving through.
- Create and display a box around that area
- Obtain a new route between the same places as on day 56, while avoiding the area specified on day 57
- Obtain a breakdown of your route from day 56 in the form of road links
- From the results on day 58, select the link id of a patch of road you wish to avoid.
- Obtain a new route between the same places while avoid this patch of road.
- Draw a circle of 10km from any single point
- Get a route from the center to any point on the circle
- Check if the route is actually 10km long
- Get an isoline route from the center from day 61
- Make the radius of this isoline 10 km.
- Get an isoline route from the center from day 61
- This time find places you can reach within 15 minutes of walking.
- Select 3 different addresses as the starting address
- Select 2 different addresses as the destination address
- Get a route from all starting address to all destinations
- Get routing Ids for the different routes received on day 64
- Draw the routes using the routing Id endpoint.
- Get a route for a truck
- Make sure it follows strict road restrictions
- Get a route for a truck
- Mention that it contains radioactive material
- Does it still get a route through the city?
- Calculate a route for a truck 3 meters high
- Use two different cities as source and destination
- Calculate a route for a truck with 1 trailer, 4 axles and is 20 meters long
- Calculate a route for the truck profile in day 69
- The total mass of the truck with the trailer is 40T
- Weight per axle is 10T
- Get a route for a truck from Berlin, Germany to Warsaw, Poland
- Get the route summary by country
- Using the route request from day 71, also get the zones along the route
- For the route request from day 72, get maneuvers for every leg of the route
- For the maneuvers from day 73, make sure to also include the direction of the maneuver
- To get a cleaner result for the route from day 71, remove the leg attributes and summary from the result
- Using the Fleet Telematics API, calculate the costs of the journey if
- Driver is paid 10/hour
- Vehicle cost is 0.5/Km
- Specify the local currency
- Using the same truck profile as day 76, calculate the fuel cost for the trip
- Maximum speed of the truck is 90 km/hr
- Weight Dependent consumption profile of a 40T truck
- For the energy cost calculated on day 77, specify the fuel type
- Specify your local fuel price per unit
- Get the total toll cost for the above truck
- Specify that it has 1 trailer
- For the above toll cost, find out what was the toll cost per toll system
- Where is your toll money going ?🤔 🤑
- Get a route between two cities for your EV using the fleet telematics API
- Ask for stopovers to charge your vehicle by mentioning Battery Parameters
- Select a starting point for your route
- Select 3 destination points
- Use the Waypoint Sequence API, to get the optimal sequence for these points
- Regular vehicles aren't allowed on a private route
- Upload an overlay to allow access to your vehicle on this internal route
- Use the overlay from day 83
- Make a #lastmile delivery on an internal route.
- Use the Advanced Dataset called EVCHARGING_POI
- display all the EV Charging stations along the route from day 81
- Using the Map Image API, create a map image centered on Manhattan
- Get the image in in PNG format and of size 1280 by 720 pixels
- Create a map image of Easter Island in satellite view
- Zoom in as close as you can but make sure the entire island remains visible
- Create of map image of Disneyland put a marker on the castle
- Marker color should be green and the theme should be "pin"
- Create a map image of the Bermuda Triangle
- Draw a triangle on the map covering the Bermuda Triangle
- Use a white outline and a transparent blue fill color
- Create a map image of Crete
- The map labels should be in Greek
- Use the routing feature of the Map Image API to calculate and display a route between Kissamos and Sitia
- Use the HERE Transit API to find a route between the Singapore Zoo and the famous Singapore Merlion
- Draw the route on a map
- Find a transit route between Berlin Alexanderplatz and Checkpoint Charlie
- Make sure you arrive at your destination at 9am tomorrow
- Get an alternative route
- Find a transit route between the Eiffel Tower and the Places des Vosges
- Don’t use the Paris Métro!
- Don’t allow more than two changes
- Sow fares/ticket prices
- List all public transit stations near the Tower of London
- For Cavil Avenue Station in Gold Coast, Australia find the list of tram departures for the next 30 minutes
- This will require NPM
- Start here: t.her.is/3ewK9UB
- Be sure to login after you install the CLI!
- Use the National Parks System GeoJSON data (t.her.is/2Nwh6oc)
- Use the #CLI to create a new space
- Use the CLI to upload the #GeoJSON
- Confirm the data was added.
- Use Node (or language of your choice) to access features via REST API
- Display features in the console
- API Reference: t.her.is/31bN3uh
- Use Node (or language of your choice) to access features via REST API
- This time return features that are near a location (you pick!)
- API Reference: t.her.is/31bN3uh
- Create a basic map in #JavaScript using our library
- Add the features from your Data Hub space