Solutions Day 6-10: 100DaysOfCode
#100DaysOfCodeWithHERE continues! If you have no idea what I'm talking about, take a look at this blog which will tell you everything about #100DaysOfCode. In this blog, I will cover solutions for days 6 through 10. If you have missed the solutions for days 0-5 , you can read them in my previous blog or in the video format. (Please excuse the sound quality, my microphone is in a lockdown.)
Let's begin!
Day 6/100
The task for day 6 was to tilt the map and to rotate it such that the west half of the globe in the top of the map. Although this task is pretty straight forward, it may have been a little tricky to find the solution directly in the documentation. So, you may want to look at API reference for ViewModel. At the bottom of this page, you will find the object to set the tilt as well as the rotation angle, called the heading.
<script>
...
// adjust tilt and rotation of the map
map.getViewModel().setLookAtData({
tilt: 60,
heading: 90 // angle relative to North
});
</script>
Day 7/100
On day 7, we got our geographical position from the browser instead of hard-coding it into the application. You need to make sure your browser version supports it. With this task we had also given you a hint! If you did follow the hint and go to our blogs, you'll find that there's a blog which can help you with getting your position from the browser. In your code, it will look like:
<script>
...
function getBrowserPosition(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
console.log(position.coords);
});
} else {
alert("Geolocation is not supported by this browser!");
}
};
getBrowserPosition();
</script>
Day 8/100
Once you have your position, it will be easy to put a marker in that position. You don't need to look far for markers as you will find them under the Map Objects within the Interactive Maps API. All the call needs is a position which you have acquired already. Let's see how that will look like.
<script>
...
function getBrowserPosition(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
// console.log(position.coords);
let browserPosition = {lat:position.coords.latitude, lng:position.coords.longitude};
let marker = new H.map.Marker(browserPosition);
map.addObject(marker);
});
} else {
alert("Geolocation is not supported by this browser!");
}
};
getBrowserPosition();
</script>
Looks cool doesn't it!
Day 9/100
Day 9 just takes day 8 further by adding a SVG marker instead of the standard marker. Don't get me wrong, I like the standard markers, but I also want to customize my application. This isn't too hard either. Go to the section Marker Objects and you will immediately see a neat eample with a SVG marker. You can customize the marker in any way you want. I made mine a white circle within a green circle. You can easlily create a SVG marker with the help of many tools which let you draw shapes and export them as SVG. I make mine using the desktop version of draw.io.
<script>
...
let positionIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21px" height="21px" viewBox="-0.5 -0.5 21 21"><defs/><g><ellipse cx="10" cy="10" rx="10" ry="10" fill="#009900" stroke="#000000" pointer-events="none"/><ellipse cx="10" cy="10" rx="3" ry="3" fill="#ffffff" stroke="#000000" pointer-events="none"/></g></svg>`
...
function getBrowserPosition(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
// console.log(position.coords);
let browserPosition = {lat:position.coords.latitude, lng:position.coords.longitude};
let posIcon = new H.map.Icon(positionIcon); // creating an Icon object
let marker = new H.map.Marker(browserPosition,{icon:posIcon}); // adding the icon to the marker
map.addObject(marker);
});
} else {
alert("Geolocation is not supported by this browser!");
}
};
getBrowserPosition();
</script>
Day 10/100
With day 10, we want to click anywhere on the map and get a position in the form of latitude and longitude. This task comes under event handling where clicking on the map would be an event, and getting the position on click is what you set the application to do after the event occurs. You guessed it right, head on to the map events section to learn about map event handling. As you can see, there's an event listener set up to handle the 'tap' event.
<script>
...
// Add event listener:
map.addEventListener('tap', function(evt) {
// Log 'tap' event
console.log(evt);
});
</script>
{…}
Jk: true
a: false
changedPointers: Array []
currentPointer: Object { viewportX: 307, viewportY: 475.73333740234375, id: 0, … }
currentTarget: Object { Bd: false, rb: (2) […], L: false, … }
eventPhase: 2
f: false
originalEvent: pointerup { target: div
, buttons: 0, clientX: 705, … }
pointers: Array [ {…} ]
target: Object { Bd: false, rb: (2) […], L: false, … }
targetPointers: Array [ {…} ]
type: "tap"
...
If you just log the event response, you will see that you get an object currentPointer which has information of the viewport of the place tapped or clicked on. We use this to get the position by using the map method screenToGeo which you will find in the API reference page of H.Map. Using this method, we can retreive the location of the tapped point which is of the type H.geo.Point.
<script>
...
// Add event listener:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
let pointer = evt.currentPointer;
console.log(evt);
console.log(map.screenToGeo(pointer.viewportX, pointer.viewportY));
});
</script>
Hope you found the content of these 5 days interesting. Be sure to tweet us your solutions on our Twitter handle @heredev. Keep following #100DaysOfCode and keep coding!
Have your say
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe