#leafletjs

I’ve been riding my bike to the Metro to head into DC to attend the Flatiron School. I’m not particularly “strong” or “physically fit.” I’m not good at “balancing” or “riding in straight lines.” But parking is $5 a day and, you know, the environment. So I bike, which means I worry about getting rolled over by a middle aged dude in an SUV. The lane I ride down is pretty vacant first thing or last thing. So if I was run over, it would be a good long while before someone found my body.

I came across a Twitter bot, @HowsMyDrivingNY. Tweet a license plate at the bot, and she will respond with chapter and verse on speed and red-light camera violations in the 5 boroughs of New York. There is also a web-based front end.

New plate format that enables looking up multiple vehicles at the same time! Tag me (@HowsMyDrivingNY) as usual and include vehicle information like this: <state|province|territory>:<plate>, e.g. NY:abc1234 Thank you to @jehiah for the suggestion!: https://t.co/ErXBdDUiF2

— How's My Driving NY (@HowsMyDrivingNY) May 25, 2018

I wondered how it was done. I suspected that the city of New York publishes traffic and parking violations in an easy to parse format and I was right. The raw data can be downloaded in a number of format, as well as a JSON API. The data is not updated in real time.

Turns out that my county, Montgomery County, MD, publishes a similar data source, with a comparable JSON API, updated every day with data going back 5 years or so.

Putting the Twitter API to the side for the moment, would I have the knowledge to iterate over this data, take which information that I want, and present it in a useful way? Sure.

The JSON published is an array of hashes. 1.5 million records long (as of this publication) and it is updated every 24 hours but the county government as part of their open data initiative. This data set does not include Personally Identifiable Information (PII) as the NYC set does, which I consider to be good and right, but it gives us enough data to make some good decisions about the relatively safety of a particular intersection, a route, or even the make and model of an automobile

The County’s public data initiative is driven by a tool called Socrata, which makes public the parameters that can be passed to their API. For example, if you wanted to paginate your results.

Using something like the Ruby Class CSV I can write the elements from the parsed hash to a CSV file. I could then use that CSV file, including Date of Violation, Latitude, Longitude, Car Make and Model, to build a map of Traffic incidents in and around my route to the Metro. To do that, I would use Leafletjs and some CSV plugins to make that happen.

This is surely not as interesting as what’s available in NYC, privacy considered, but an interesting exercise in using public data to highlight safe areas and troubled areas. Also, considering there is a GEOJson API available as well, this could be done much more simply. Surely more to come.

First Published Here http://tiwygwymw.us/gm

How to draw a marker on OpenStreetMap

To Use OpenStreetMap and draw marker we can use a javascript library, there’s a lot out there but for this example well use leafletjs.com. It’s open source, mobile friendly and lightweight and has a complete features most developers need.

Leafletjs

Now head over to the website and follow the quick start tutorial, that should be enough to get started. After you follow the tutorial, you can create…

HOW TO CREATE SIMPLE EFFECTS FOR MAP APPLICATIONS WITH CSS by @Moritz

In this post I will show you how to create some effects that let your maps appeal more interesting/fancy/weird.

These effects are just proof of concepts, but they could help you to attract more attention to your maps.

The examples are created with Leaflet but they should work with other libraries too.

V minulém týdnu jsme zveřejnili první Open-Source projekt CleverAnalytics s názvem Tiny Leaflet Directive. Jde se o jednoduchou JavaScriptovou knihovnu, která umožňuje vkládat mapu vytvořenou pomocí LeafletJS do aplikace napsané v AngularJS. Tyto dva frameworky jsou jakýmsi jádrem naší frontendové aplikace a Tiny Leaflet Directive je propojuje dohromady.

Před více než rokem jsme začali vytvářet náš produkt pomocí Angular Leaflet Directive, skvělé knihovny určené ke stejnému účelu. Umožňuje každému, kdo zná Angular a minimální znalost LeafletJS vytvářet poměrně složité mapové vizualizace. Ulehčuje vkládání nejrůznějších mapových vrstev, zpracování událostí a mnoho dalšího. Časem se ukázalo, že tahle složitost je zároveň hlavní nevýhoda, jelikož pro běžné mapové operace (přidávání/odebírání vrstev, poslouchání událostí...) registruje příliš mnoho “watcherů“ a tím dramaticky zatěžuje $digest cyklus Angularu zejména mapovými událostmi. Vše bylo potřeba zjednodušit.

Úlohy, které jsou vlastní Leafletu by měly být zpracované v Leafletu, úlohy Angularu v Angularu - žádná věda. Stačí to volně propojit, aby frameworky mohly snadno komunikovat. Odstranili jsme z Angular Leaflet Directive části, které jsme nepoužívali, nebo používat nemuseli a výsledek je Tiny Leaflet Directive. Odlehčená mapová direktiva s pouhými dvěma argumenty:

id - běžný HTML atribut

tld-options - mapové vlastnosti

Podíváme-li se pozorně, rozhraní je totožné při tvorbě bězného objektu mapy v Leafletu L.map(id, object). Takhle se direktiva vloží do šablony Angularu:

<tld-map    id="map"    tld-options="::mapOptions"    style="width:100%; height:480px;"> </tld-map>

To je vše, takhle jednoduše se zobrazí základní mapa. K dispozici je ještě služba tldMapService s funkcí getMap(id). Slouží k získání reálného mapového objektu Leafletu v rámci Angularových služeb a kontrolerů.

Mluvení stačilo, zkuste knihovnu použít nebo dokonce vylepšit - je k dispozici na GitHubu včetně příkladů. Zkuste i naše Demo, v němž se knihovna používá. A neváhejte se mi ozvat na Twitteru, když se vám bude knihovna líbit.

Last week, we've released first CleverAnalytics open-source project called Tiny Leaflet Directive. It is a tiny JavaScript library that allows you to embed LeafletJS map in AngularJS applications. These two frameworks are core of our frontend stack and Tiny Leaflet Directive connects them loosely together.

When we started building our product a year ago, we used great Angular Leaflet Directive by David Rubert for the same task. It helps anyone with the knowledge of Angular and with very little knowledge of LeafletJS to do complex map visualizations. It supports multiple map layers, event handling and much more. This has become to be a major bottleneck for us. It registers too many watchers to ease common map tasks (add/remove layers, listen for events...). When we had to display a lot of data, the $digest cycle became flooded by map events. Now we know better and the key is simplicity.

Leaflet tasks should be handled in Leaflet, Angular tasks in Angular - no big surprise. All this should be loosely coupled to achieve simple communication between the frameworks. We cut off all the parts of Angular Leaflet Directive we don't actually have to use and the result is Tiny Leaflet Directive. A lightweight map directive with only two arguments:

id - Common HTML attribute

tld-options - Map options

In fact the interface is the same as for common Leaflet map object L.map(id, options). Look how it's embedded in Angular templates:

<tld-map id="map" tld-options="::mapOptions" style="width:100%; height:480px;"> </tld-map>

That's all you have to do to display simple map. There is one another service called tldMapService with public function getMap(id). You can imagine it is used to retrieve real Leaflet map object in your controllers and services to play with.

No more talking, use it, fork it, improve it - it's on GitHub with examples. Try our demo to see it in production. And of course, hit me up on Twitter and let me know how do you like it.