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

Adrià Mercader amercadero at gmail.com
Thu Oct 18 08:51:37 UTC 2012


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




More information about the okfn-labs mailing list