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

[Gregor Aisch]

No problem :)



-
Gregor

Am 18.10.2012 um 10:51 schrieb Adrià Mercader <amercadero at gmail.com>:

> On 18 October 2012 08:49, Gregor Aisch <gregor.aisch at okfn.org> wrote:
>> 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:
> 
> Nice!
> 
> Just a quick note that this seems to be the Ogun state, not Ondo which
> was the one that Nate showed on the gif.
> We will learn Nigerian geography thanks to this thread! :)
> 
> 
> Adrià
> 
> 
>> 
>> 
>> 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/8524d44e/attachment-0004.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: NIR-28-Ondo.svg
Type: image/svg+xml
Size: 29744 bytes
Desc: not available
URL: <http://lists.okfn.org/pipermail/okfn-labs/attachments/20121018/8524d44e/attachment-0004.svg>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/okfn-labs/attachments/20121018/8524d44e/attachment-0005.html>