What's new in uMap

Posted by ybon on 25 August 2014 in English (English)

Here is an overview of the changes made in uMap recently:

The biggest change, even if it's not the more spectacular, is that Leaflet.Draw has been replaced by Leaflet.Editable as drawing engine. The goal was to have more control over the API, have touch support, and have multipolygon/polyline support. For now two enhancements come from that move:

  • It's now possible to continue a line. There are two ways to achieve this: right click on the last (or first) vertex of the line, or ctrl-click on the first or last vertex:

continue a line

  • It's now possible to draw (and edit) polygon holes: right-click inside of a polygon to start creating a hole:

create a hole

Next step is to handle multipolygon and multipolyglines editing and touch support (Leaflet.Editable is ready for that, but uMap itself need a bit more work).

  • when clicking on an element (marker, polygon…), it's now possible to open a panel, instead of the classic Leaflet popup

popup panel

example of story mapping activate slideshow

  • When using a clustered layer, it's now possible to define the cluster text color:

change cluster text color

  • Added a basic GPX and KML download, thanks to togpx and tokml:

download data

  • Until a proper multipolylines support, they are now merged (instead of being skipped) at import

  • A table editor allows to edit all elements of a layer in one view:

table editor

  • sometimes, we want a polygon to act as background, without being clickable. This is now possible trough the clickable option.

  • it's now possible to take control of the popup template using variables. Those variables will be populated dynamically from the elements properties. For example, let's say you have imported a geojson having the following properties: price, name, image, description; by default, only the name and the description will be displayed. But you can now take control of this. Here is an example of template to use with such data:

    # {name}
    Price: **{price}**
  • Added shortCredit (displayed in the attribution bar) and longCredit (displayed in the caption panel) properties, for more custom captions

  • a basic HTTP concurrency control has been added: if two persons edit a given layer of a same map in the same time, the last to save will be prompted that its changes will erase the changes made by someone else and asked for confirm before really saving:

example of save conflict

  • the "filter" field in the data browser was only filtering on the name property of the elements; this can be now controlled in the map properties

  • added a datalayers parameter, to override which layers will be visible on map load (useful to have different URLs for the same map, or when using the iframe exporter)

  • it's now possible to set a marker lat/lng properties by hand:

set marker latlng

More about uMap on the wiki:

Good umaping!

Comment from Zverik on 25 August 2014 at 15:33

Wow. This is amazing. Especially the Leaflet.Editable plugin, which as I can see allows for more features than Leaflet.draw (continuation of lines is great). I think it is possible now to employ routing engines in drawing of lines — will have to look into it later. Thanks.

Is uMap development sponsored, or you have too much free time? :)

Hide this comment

Comment from Sanderd17 on 25 August 2014 at 15:38

Very nice improvements to see.

There are however some usability problems I experience as a first time user. Maybe you guys can give it a thought.

IMO, it's hard to know what name you should set to show that name to people when they click on something. It's hard to see a difference between editing map properties, layer properties and object properties. I suppose a header in the right panel, saying "editing map settings", "editing layer x settings" or "editing object y settings" would help. Maybe for objects, even a colour code or coloured symbol could be added to distinguish between unnamed points, ways and areas.

The browse data button (which is extremely handy to get to the right object) is also rather well hidden. In the right-click menu, it's between "help" and "about", which isn't where I'd expect it. It's also hidden behind the layers button, which isn't where I'd expect it either. "Browse data" doesn't offer you a lot of control over the layers (and isn't meant to do so). So putting it under the layers is strange IMO. It would be better if it could be an always-visible button in the right of the screen (somewhere near the editing of the map settings and the background layers buttons).

It should also be possible to "disable editing" without saving the map IMO. This would ensure you're doing stuff correctly if you can switch perspectives easily.

When making maps anonymously, it's also way too easy to just lose your editing URL, and be locked out of your map forever. So I suggest that the default for anonymous-made maps should probably be that everyone can edit the map (so you're not locked out). Next to that, signing up really gives you a better user experience (you don't lose your maps), so it should be highly encouraged. Either with a pop-up on the first usage (sign-in popups are quite normal), or with a Wikipedia-like banner when you start editing anonymously.

The help menu called "directions from here" could probably also be renamed to "create a route with OSRM", which also gives the opportunity to have links to other websites (that may have better support for bikes, pedestrians, ...).

Apart from those usability issues, one big feature I'm missing is an export-to-paper function. Either to image, or directly to multi-page atlases. The first could be used to get an image for some folder you can print (f.e. with the location of a few stores), the second could be used to document a travel, or a cycle route you made.

I think this will tun out to be a very useful app for the big masses. Thanks for all your work on it.

Hide this comment

Comment from ybon on 25 August 2014 at 15:50

@Sanderd17: thanks for your useful feedbacks, I'm taking them into account!

@Zverik: the development is not sponsored, it's all volunteer work :) (I try to manage my life to have free time and liberty of choices instead of money :)

Hide this comment

Comment from Maxime Résibois on 26 August 2014 at 08:18

Great news! thank you for all of this! Good news for the multipolygon support.

Hide this comment

Comment from wheelingit on 17 January 2015 at 19:26

@ybon I am just now discovering uMap and am enjoying it very much. This will be my motivation to get rid of using Google Map for my mapping! Your work & customization features are amazing!

I am wondering (and please let me know if I am asking in the wrong place) if it is possible to automatically show GPS coordinates in the popup when you click on a marker. I know I can put them in manually into the "description", but I'm wondering if there's an automatic way to apply this to all my marker popups?

Hide this comment

Comment from ybon on 17 January 2015 at 19:38

Yes, you can add {lat} or {lng} in the description for that. See an example here:

Hide this comment

Comment from wheelingit on 20 January 2015 at 17:32

Thank you so much @ybon!! It worked. I've added the feature to all my maps. I am very much enjoying uMap.

Hide this comment

Comment from pwll on 3 February 2015 at 01:52

I may be missing something but the ability to place marker using lat / long doesn't appear to be an option

I notice in your example this "coordinates" feature is between the "advanced properties" and "advanced actions" sections of a marker but I simply don't have that. only th other two are available.

Also if you feel up to it ever an example of how to integrate leaflet routing, or open street maps routing system to do a map with functioning driving directions between markers would be amazing.


Hide this comment

Comment from Wolf1802 on 12 March 2015 at 18:32

A huge step forward for "normal" not Geo or IT people! Thank you.

My questions: - Where do I find the table editor? I didn´t found any explanation even in the french manual. - Can I add Text? - I would like to ad circle markers including a number with a link to a html file. Is that possible?

Hide this comment

Comment from ybon on 12 March 2015 at 20:30

Where do I find the table editor?


Can I add Text?

It depends ;) What do you have in mind? Also, have a look at the maps on to see what others have done.

I would like to ad circle markers including a number with a link to a html file. Is that possible?

Circle with number: not yet. Link to html file: where is this link supposed to be?

Hide this comment

Comment from OlafPattaya on 13 March 2015 at 19:58

Hello ybon, yes the maps are much better then "My Maps" from Google. I love it to work with this. I have a question, i look for a way to route direct from the waypoint to a target. On the desktop there is nothing. But on tablet when i click longtime on a waypoint in umap, opens a menue, "Route from here" But the site opens after this not really work, but looks like a router for navigation. Is this in developing???? :-)This with a possible offline Map and you can Kick Google Maps to the garbage.

Hide this comment

Comment from OlafPattaya on 13 March 2015 at 20:10

Ok, i can see. The menue leads to Very nice, But it not loads good in tablet or in Phone. Only the half screen, and i cannot change the size. But its better when the menue not offers the starting Point. It needs the target point. Is it possible to use this with gps? So many questions.

Hide this comment

Comment from slashme on 19 April 2016 at 07:40

I really love this project! I've used it to build a map of go clubs: , which I update from a database: .

What would be the best way to upload new map data? At the moment, I have a script which turns my database into a set of geojson files, and then I check which of them have changed, and then I go to the map, empty each of the changed layers and upload the updated geojson. Surely that's not the most efficient way to do it?

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

  • Image

    ![Alt text](URL)

Login to leave a comment