[okfn-labs] Help: How do I create mouse-over images on maps?

[Adrià Mercader]

Hi Nate,

Friedrich put you on the right track, your goal is transform the
administrative boundaries from a spatial format (probably a shapefile)
to a web friendly one.
I'll give more details on how to get the data and another option to display it.

Your best for administrative boundaries is the Global Administrative
Areas Database, you can download the ones from Nigeria here [1].
Extract the zip file, the ones you need are the files named NGA_adm2.*

* If I'm not mistaken, you only want the ones from the Ondo state. You
will need to filter these out from the rest of the country. I suggest
using Quantum GIS [2] for that.
 - Install QGIS depending on your platform
 - Open the shapefile (Layer > Add vector layer)
 - Right click on the layer name > Query... Select "Name_1" = 'Ondo'
and click OK. You will see only the regions on the Ondo state
 - At this point you need to save your selection: Right click on the
layer name Save as...

You have different options now depending on the way you want to go.
You can save it a shapefile and use kartograph as Friedrich suggested
to get an SVG, useful for javascript viz libraries like Raphael js.
Also you can export it to GeoJSON, which can be used with libraries
like Leaflet [3]. Here is a quick example that loads the resulting
layer and displays the region name when you click on it:

http://amercader.net/dev/sandbox/ondo.html

It should be easy to tweak it to display stuff when hovering on the
regions instead (see eg [4])


Let us know how it goes,

Adrià


[1] http://www.gadm.org/country
[2] http://www.qgis.org
[3] http://leaflet.cloudmade.com/
[4] http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/



On 17 October 2012 20:49, Friedrich Lindenberg
<friedrich.lindenberg at okfn.org> wrote:
> And: Gregor fixed it!
>
> https://github.com/pudo/newsapps/pull/1
>
> One boy scout badge for that guy, please!
>
> - Friedrich
>
> On Wed, Oct 17, 2012 at 9:26 PM, Friedrich Lindenberg
> <friedrich.lindenberg at okfn.org> wrote:
>> Hey Nate,
>>
>> ( I'm cc'ing okfn-labs so that others can chime in. )
>>
>> I think it'll be hard to make an interactive version out of the GIF
>> file you have listed. What you probably need it a Shapefile (or at
>> least an SVG). Once you have a shapefile of Nigeria (quick google
>> search turned up
>> http://www.maplibrary.org/stacks/africa/Nigeria/index.php but I don't
>> know which admin level you are looking at), you can convert it to a
>> web-compatible SVG with Kartograph (cf.
>> http://kartograph.org/docs/kartograph.py/) and then use the JS version
>> of Kartograph to make a Raphael-based map with hover events that you
>> can use to update the other panel.
>>
>> I used to have a simple example here, but it hot-linked Kartograph and
>> Gregor seems to have changed the API :(
>> http://newsapps.pudo.org/BosniaMedia/ - Still, most of the code should
>> be working.
>>
>> Cheers,
>>
>>  - Friedrich
>>
>> On Wed, Oct 17, 2012 at 9:15 PM, Nate Mamman <neightman at gmail.com> wrote:
>>> Friedrich:
>>>
>>> How do you do? Thanks for all the help you have been given us. I would
>>> be in touch with you very soon about the merged tables/treemaps
>>> visualization.
>>>
>>> In the mean time, I have a very urgent problem. I am wondering if you
>>> could help me with pointers. i am forwading a message I sent to OKFN
>>> geo-data mailing list.
>>>
>>> Thanks.
>>>
>>> Nate
>>>
>>>
>>>
>>> Hi
>>>
>>>
>>> I am working on an open data-project (State Governorship elections),
>>> and I am presently stumped. How do I create a map from this:
>>> http://speakersoffice.gov.ng/images/map.ondo1.gif
>>> so it can give me mouse-over effects like the map here:
>>> http://raphaeljs.com/australia.html.
>>>
>>> I am working on a very tight dealine, and so would appreciate any
>>> immediate help.
>>>
>>> Thank you.
>>>
>>> Nate Mamman
>>> Nigeria
>>>
>>> --
>>> NKM
>>>
>>>
>>> --
>>> NKM
>>
>>
>>
>> --
>> Friedrich Lindenberg | OpenSpending & OKFN Labs | @pudo
>> http://openspending.org | http://okfnlabs.org | http://pudo.org
>
>
>
> --
> Friedrich Lindenberg | OpenSpending & OKFN Labs | @pudo
> http://openspending.org | http://okfnlabs.org | http://pudo.org
>
> _______________________________________________
> okfn-labs mailing list
> okfn-labs at lists.okfn.org
> http://lists.okfn.org/mailman/listinfo/okfn-labs