2014_03_11: it’s progress Jim, but not as we know it

So I spent most of yesterday trying to find what causes my work to crash Safari under iOS7: turns out it’s the gizmo that clusters the CC markers. Not going to cure that in a hurry!

Then I tried for several hours to add the info features from leaflet’s chloropleth/geoJSON example to my script. I got the LAs to highlight on mouseover, but not to de-highlight on mouseout. Nor could I get the data control to pick out data from the LA geoJSON file.

So I reasoned ‘if I can’t add their stuff to mine, can I add my stuff to theirs?’ That is, could I swap in my LA and CC data sets and use leaflet’s code to colour them and pick out data to be displayed in their external control? This seemed to go OK until I added in the geocoder (the bit for entering an address to zoom to that area of the map. This code failed, so everything that should have been processed after it wasn’t even reached.

I went back to trying to add leaflet’s functions to my otherwise functional code. Still no joy.

I refactored my code so it was in a more logical order:

  1. preparatory functions,
  2. drawing basic map
  3. adding scale, geocoder, reset and help controls to map
  4. adding LA data layer
  5. adding CC data layer
  6. adding layers on/off control

and made the reset control call a URL from a simple configuration file, so that when the client actually puts this work online, they only need to update the configuration file, not hack around in the reset script.

I still couldn’t get the mouseout bit to work. I knew this code was being called: if I replaced it with document.write(“rude word”); then rude words were written.

So this evening I revisited leaflet’s example, determined to get it to work. This example has all the functionality built into a script in the html file, not a separate ‘external’ script. Not really the way I want but I’m running out of time…

I realised that the geocoder was being called but just failing somewhere. I’m not sure how I worked it out but the fail point was that geocoder calls a function in my main external script to limit its searches to Scotland – the same bounds as are applied to my map. (Without this search-area limiting, searching for EH10 postcodes shows Walthamstow.) But this script is never invoked, so the function isn’t callable. So instead of calling that function, I’ve copied it into the geocoder. Now that works! And so do all the other bits. I can make the reset script call the configuration file, so long as they are in the right order in the html header (i.e. configuration before the reset function that depends on it – so perhaps the issue was that the geocoder was calling the main script before it was available.

There was another wrinkle adding in the CC marker code. Something doesn’t like a variable called location. Changing that to ccLocation worked.

So here is the whole lot working – but with the javascript embedded in the HTML.

My task for tomorrow is to get the javascript into a separate file, so that this works, cos right now it doesn’t. Then write some documentation, then write a talk for the OKFN meet-up tomorrow.

Advertisement

2014_02_18: progress and success

Remember the problem with geocoding? It may just be fixed.

My main script has a function to set the bounds of the displayed map. If you try to drag the map so that areas outside these bounds are displayed, the map will snap back to the area I want it to display.

I had a look through the geocoder script – it has an options object, one line of which sets bounds to null. So I made this line call the setScotlandBounds function from my main script. After a bit of futzing to understand how one script can call a function in another script (the secret is to make the web page call them in the right order!), it works. EH10 5DT is where it should be. Searching for London gets London in Orkney.

I am so relieved – hacking the geocoder script or playing with Nominatim looked fearsome.

Next step is to hack geocoder or my main script so it doesn’t zoom in ridiculously. And that’s quite simple – just set a maxZoom in the map options object.

And the final MUST do – adding a pin at the user’s entered location sort of works. Because the map will definitely zoom when displaying the desired location, adding an onzoom event to put a marker works. But if you zoom in again, another marker will be placed.

The solution to that will be to place the marker into a layer. The next zoom would remove that layer.