Today I am super excited to announce Idly-Gl! It is an opensource Mapbox GL plugin which renders OpenStreetMap data.

What is Idly-Gl?

Idly-Gl is a small plugin which reads data from Openstreetmap’s API and renders it on any Mapbox GL map. Click here for a demo.

What is IDLY 🍚?

Idly is an Indian rice cake 🍚. I picked this name as it can be the little brother of iD editor.

Why did you create it?

I work with a lot of Mapbox-gl maps and I am very impressed with their speed and portability. I have also worked with iD editor and it has impressed me with the way it handles OSM data. The only problem is that these two don’t talk to each other well. To bridge the gap, we would have a button to open it in iD. This works well when you have to make an edit, but if a user just wants to inspect/visualize OSM data the only option is to open the OSM website.

What does it do?

• 😎 It renders live osm data on a mapbox-gl map, which makes it blazingly fast.

• 👯‍♀️ It tries to mimic iD editor’s familiar styling.

• 🕵 Dig deep into OSM entities, by interacting with them.

• 💪 Add to any existing Mapbox-gl map to give it OSM superpowers.

What is next?

• Idly-gl already does an impressive 3d buildings. I plan on adding some advanced 3d visualization of OSM data, provided Mapbox-gl supports it.
• The Openstreetmap ‘s entity inspector provides a nice way to inspect an entity. I imagine Idly-gl doing the same thing. There are certain features like viewing the history or the changeset which are not yet there in Idly-gl, but I have plans to add them.
• If all goes fine, I think being able to search would be great. I imagine putting a query like highway=* and Idly-gl only shows all the highways on the map.
• I also wanna try to add some sort of linting into Idly-gl. There are already some great rules at osmlint, which I feel can be used to highlight entities which violate any selected linting rule.
• Currently it just visualizes Turn restrictions. I plan on adding more Restriction visualization, but the tricky part is how to best visualize restrictions without the map being too cluttered.

What is the goal Idly-gl?

The goal of Idly-gl is to be a highly customizable developer tool which helps the developers add powerful OSM data inspection/visualization into their apps.

How do I add it to my website?

I am glad that you want to give it a try, head over to the Github repository Idly-gl!

Where can I play with it?

Idly-gl Demo

*(Tip: If you want to see the 3d buildings, make sure you switch on 3d extrusion layer)*

Final thoughts

Idly-gl is currently very new and I am super excited to talk about it. I would really appreciate if you could try it out and give me feedback or ideas on how to further improve this tool and help OSM community build amazing things on top of it.

As a part of our data transparency efforts at Mapbox. We created osm-edit-report which helps anyone visualize our teams contribution to OSM.

Just to give a measure, the data team added 0.3 Million objects, 0.2 Million tags, and 3 thousand changesets last week.

This is how the numbers look:

Since this data is so huge to grasp at one go, we also have filters which help trim down data and focus on a particular group.

• Filter by users.

• Filter by tags

• Filter by BBox

The user table showcases all edits made by each user over the course of a week. The saturated blue boxes help emphasize huge edits and the chevrons compare today’s edits with the weekly average.

Overall this tool helps us benchmark our mapping efforts and visualize out priority areas. Please don’t forget to share your views on how to make our mapping efforts more transparent.

Link: https://mapbox.com/osm-edit-report

3 months have passed and GSoC is about to an end. This small diary post showcases my contributions uptill now and it also lays down my next actions.

Major Contributions

### Lane editor The lane editor is my primary objective of the GSoC for this summer. These diary posts (1, 2) can be referred to get updated with the work.

Currently, most of the functional code is ready with 81 test cases testing most if not all edge cases possible. This code parses the osm data and gives a nice JSON output, which should then be supplied to the rendering.

Making iD modular

The iD contributors felt the need to start using the new ES6 module system back in April. I helped in the phase 1 and phase 2 of this process.

OSM hackday

I was a part of organizing team of this small hackday at Mapbox Bengaluru. More info

Links

My pull requests

My commits

Next Steps

Well GSoC 2016 is approaching an end, but not my contributions. There are lot of things pending in my bucket list. The first thing I would like to finish in the coming months would be the lane editor’s UI and deploy it for the use of OSM community.

I am really proud to be one of the core contributors of iD and would really like to thank the community, my mentor Bryan Housel and Google for the awesome GSoC program.

An OpenStreetMap contributor, Kushan

Hey, I have made some major progress since I last talked about my work with iD. I am continuing my work with lane icons last time.

This is how the current lane selection looks like.

Also the iD is currently going through modularisation and we are tracking it here.

With the help of my mentors we decided to draw some awesome icons. You can track the update at this gitbub repo. These are some of the icons I recently created. Suggestions are welcomed.

I am also organising an OSM hack weekend at Bangalore. If you are around don’t miss this event. Link to the event http://wiki.openstreetmap.org/wiki/Bengaluru_Hack_weekend_July_2016.

Hello OSM community, this would be my 2nd diary post for my Summer of code project. Do checkout my first blog post where I introduce myself and the project I will be working on.

This week would be the last week in the community bonding process. All the GSoC students would receive their first stipend at the end of this week. Hurray !!!!

I believe my community bonding is going well. This week I was mostly busy with adding mapillary-js to iD. Thanks to the awesome work by Peter Neubaur, we have a PR ready to implement this feature to iD.

If you use iD editor you will find that the mapillary images are static and don’t have navigation buttons.

To have this feature, we would need mapillary-js in iD’s source code. This library gives the developers powerful new ways to interact with mapillary ecosystem. But this was easier said than done. Peter helped us with setting up the basic work required for the inclusion of this library.

The major problem which I was aiming to solve was the asynchronous loading of images by the mapillary-js. If you quickly click on multiple points, the system suddenly enters into chaos. The point highlighted and the current image no longer tally. The following screen cast should do justice in depicting this situation.

To fix this problem, without messing up the code of mapillary-js, I added a variable which keeps track of the last point clicked on by the user whenever mapillary-js goes into loading mode. This allows me to do cool things like show loading and keep the system stable and predictable. After fixing this here is the screen cast showcasing the awesome blip.

So this was all about mapillary-js and its humble addition to iD. Apart from that iD is soon going to get this huge internal makeover by splitting the code into modules. Now, this is an architectural shift. Doing this will make way for easy development of iD. Head over to this ticket for any updates regarding this.

Community Bonding

I got involved with OSM back in January. Now its been 4 months and I think its the right time to make an introductory post.

I started looking for interesting projects, and iD caught my attention. The first bug that I fixed was pretty simple, It required me to fix a faulty regex. D3 was new to me, as I come from the fancy React/Angular land which obscures most of the internal working. My mentor Bryan was more than happy to help me out. After my first week I discussed with him about the possibility of an OSM GSoC on #dev channel. Which brought up a lot of heated conversation regarding the pros and cons of GSoC for the organization. The channel did admit that overall GSoC 2015 was a success. Which got me pumped up to spend my summer working on iD.

While this was happening I also started going through OSM wiki/diaries to learn mapping. I planned on mapping my college. My college and its surrounding had a spotty coverage. Since, I was a newbie I tried to map things I was most confident with. In India we call dormitories hostels, so I started marking my college buildings with hostel tags. When I showed my work to Bryan he was to quick to point out that might not be the case everywhere. He suggested me to tag all the buildings with University Building tag.

This is what my college and surrounding area looks like now.

One of the best things that contributed to iD was the multiselect feature, which I implemented with the help of Bryan. This feature took a lot of days for me to implement and gave me a good understanding of how iD works.

Another exciting feature which helped me build confidence with the iD code was the imagery offset. The earlier implementation of imagery offset was unintuitive and required a fix. This feature request required me to fix the UI and to make it easy to use. Know more about this feature, click here.

Future

I will continue with my investigation on the lane editor for GSoC. And learn more about D3 to fix some of the pending bugs of iD. I plan on writing about my progress weekly from now on, so that the community knows where I stand and give me inputs on how to improve upon my work.