19th February 2014
Now most of the boring stuff is done, all validation works and the select location is ported to JavaScript, not all the a11y related stuff but it works. It will be quite inaccessible anyway because I don’t deal with all the auto focus that a JavaScript based UI would need.
The only problem I was running into was the cursor used by Leaflet, it uses the move cursor for all browsers except Opera, Chrome and Firefox, for those browsers it’s using grab/grabbing both grab and grabbing is not a part of the CSS standard and requires prefixes to be used. So when change the cursor during the select location function I can’t later change it back in Firefox/Opera/Chrome in a nice way. So I was forced to set the default cursor to move. Nothing bad in that but it doesn’t look just as smooth.
I should also add that all the marker/map/icons animations makes the UI a bit slow, no problem on most computers but I tested on a older one(6 years but upgraded) so adding a option to disable that is something I could consider in the future(The blue sky(Mozilla style)). ;-)
Responsive design is also in the blue sky :P
18th February 2014
Day two and to be honest, the only coding I have been doing was when I made lunch for me and my sister. The thing that I did write was a simple toggle function, to handle the interface, so the page does not haft to reload, when you want to register a new map location/event. Nothing advanced at all for short.
The only time the map(and all other front-end) will be reloading is when you save a new map location/event, I could probably avoid this by using AJAX but I wont look into it, maybe later on if I get time for it.
Tomorrow I will try to get all the inputs done so I can use the two last days to output the GeoJSON(P) in a working way and write some documentation needed for for publishing at github on friday :-)
17th February 2014
So first day with my new OMap Mapper project, and it has been great weather all day, for short I haven’t done so much on the application. Still some major things is done.
Here is the layout I’m aiming for, a <nav>, <aside> and some dark boring buttons, but they light up when you got focus or hover them :-P If you have seen some other CSS stuff that I have made to, you might know that I got my evil transitions there to.
* {
-webkit-transition: .4s;
-moz-transition: .4s;
transition: .4s;
}
I did also choose to use the Leaflet.markercluster plugin, and I decided that I wont use mustache.js right now, I did play with it and it will not be any problem adding it later if I feel for it.
I did also write the PDO class that I’m going to used, it’s based on the one that I’m using all the time(Gist).
I did get I question about how I would handle the location input needed using Leaflet, I will just do it the way I’m always doing it:
<label>Location: <input type="text" value="" class="hide" name="location" /><button>Choose Location</button></label>
I have a jQuery wrapper that I’m using all the time but this time I will rewrite it to pure JS. It’s quite easy to explain, the text input is hidden by CSS, when the button is clicked the user can click somewhere on the map, the location will be added to the text inputs value, and the state of the button will change.
Just some accessibility thing to think of when using this solution:
- Don’t hide the text input on screen readers(adds another input possibility)!
- When the button is clicked change focus to the map!
- Allow the user to change the location from the button!
- Don’t use the
application role on the map!
I might actually write a blog post about maps and web accessibility, it’s interesting subject :-)
That’s it right now.
13th February 2014
I got holidays next week and I have some work to do on some projects but I want to do something with maps so during the holidays I will work on a new project…
As you might know I’m an orienteer and I’m in love with maps. I got hundreds of maps, now(and I have a image below to prove it) they are from tons of places most of them here in Sweden but some from other parts of Europe.
So what I want to do is to visualize all places, on a map, I’m thinking on a heat map or a marker cluster system… Browsing through all my orienteering maps by a map??!! That would be so epic(I like maps…) :-D
So how will I build this and what techniques will I use?
I need to improve my PHP so PHP for the back-end, for the database will I use MariaDB because then I use MySQL without using MySQL ;-) I often use a heavy back-end and a light front-end this time I will do the opposite(because of all the map stuff). The PHP part will probably only handle database and user stuff.
The front-end is going to be a bit more advanced…
My choose of map
I won’t go through why I choosed Leaflet in this blog post, but I have tested all the major map services and libraries. There is also a great Marker Cluster plugin for Leaflet that I might use…
Mustache.js
Yep a template system, I’m planning to wrap “all” the text content in JSON, so it will be easy to translate it, not because I need it but because it can be useful when I publish it on Github.
The major idea is that I will use PHP to output GeoJSON(P) and JSONP, not totally different from a API-first approach. The map images will not be stored in the database, so exporting will be easier. Hopefully I got a this working by the end of next week :-)
