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

Thu Oct 18 07:49:22 UTC 2012

Am 18.10.2012 um 00:03 schrieb Adrià Mercader <amercadero at gmail.com>:

> 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:
> 

Unfortunately, the SVG export in QGIS doesn't include the metadata, which is exactly the reason why I created Kartograph.py. Using that library I created this SVG from the shapefile:

You can use Kartograph.js to do the rendering, it is built on top of RaphaelJs and jQuery and very easy to use. Of course, GeoJSON and Leaflet or d3js is another option. Depends on your preferences.

Best,
Gregor

> 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
> 
> _______________________________________________
> okfn-labs mailing list
> okfn-labs at lists.okfn.org
> http://lists.okfn.org/mailman/listinfo/okfn-labs

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/okfn-labs/attachments/20121018/98f1783d/attachment-0002.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: NIR.svg
Type: image/svg+xml
Size: 28790 bytes
Desc: not available
URL: <http://lists.okfn.org/pipermail/okfn-labs/attachments/20121018/98f1783d/attachment-0003.svg>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/okfn-labs/attachments/20121018/98f1783d/attachment-0003.html>