Discussion:
[Inkscape-user] Clickable SVG map
Steve Litt
2017-04-24 04:38:35 UTC
Permalink
Hi all,

I've read that, when making an HTML page with a clickable map (a map of
the states in America, for instance), it's very doable in SVG. Has
anybody done this? If so, did you need to copy and paste the svg code
into the HTML, or were you able to work from an image imported with the
<img src="mymap.svg"/> tag?

Did you need to do something to tell the CSS in your HTML doc's head
that you meant #rect1234 in the <css> tree? Does anyone know of a
document that unambiguously tells exactly how to do it?

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
Martin Owens
2017-04-24 04:58:27 UTC
Permalink
I did this many years ago if's an interesting example for you:

http://divajutta.com/doctormo/locomap/map.svg

But there are lots of svg maps these days. Leaflet does a fairly good
job of showing a map which can be constructed from svg paths, you can
choose to have open street map tiles or not.

Best Regards, Martin Owens
Post by Steve Litt
Hi all,
I've read that, when making an HTML page with a clickable map (a map of
the states in America, for instance), it's very doable in SVG. Has
anybody done this? If so, did you need to copy and paste the svg code
into the HTML, or were you able to work from an image imported with the
<img src="mymap.svg"/> tag?
Did you need to do something to tell the CSS in your HTML doc's head
that you meant #rect1234 in the <css> tree? Does anyone know of a
document that unambiguously tells exactly how to do it?
Thanks,
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Victor Westmann
2017-04-24 05:07:55 UTC
Permalink
Hi,

This is really cool. Do we have a map sample on inkscape website? I mean...
can we promote our tool as an app that does this?

Do you guys think more people would be interested?
Post by Martin Owens
http://divajutta.com/doctormo/locomap/map.svg
But there are lots of svg maps these days. Leaflet does a fairly good
job of showing a map which can be constructed from svg paths, you can
choose to have open street map tiles or not.
Best Regards, Martin Owens
Post by Steve Litt
Hi all,
I've read that, when making an HTML page with a clickable map (a map of
the states in America, for instance), it's very doable in SVG. Has
anybody done this? If so, did you need to copy and paste the svg code
into the HTML, or were you able to work from an image imported with the
<img src="mymap.svg"/> tag?
Did you need to do something to tell the CSS in your HTML doc's head
that you meant #rect1234 in the <css> tree? Does anyone know of a
document that unambiguously tells exactly how to do it?
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
------------------------------------------------------------
------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
C R
2017-04-24 06:19:56 UTC
Permalink
Hey Martin. :) I know you've got a ton to do, but everyone I show the
inkscape hackfest photo to loves the cool functionality you added to
it. Maybe a doctormo tutorial would be a good idea...

-C

On Mon, Apr 24, 2017 at 6:07 AM, Victor Westmann
Post by Victor Westmann
Hi,
This is really cool. Do we have a map sample on inkscape website? I mean...
can we promote our tool as an app that does this?
Do you guys think more people would be interested?
Post by Martin Owens
http://divajutta.com/doctormo/locomap/map.svg
But there are lots of svg maps these days. Leaflet does a fairly good
job of showing a map which can be constructed from svg paths, you can
choose to have open street map tiles or not.
Best Regards, Martin Owens
Post by Steve Litt
Hi all,
I've read that, when making an HTML page with a clickable map (a map of
the states in America, for instance), it's very doable in SVG. Has
anybody done this? If so, did you need to copy and paste the svg code
into the HTML, or were you able to work from an image imported with the
<img src="mymap.svg"/> tag?
Did you need to do something to tell the CSS in your HTML doc's head
that you meant #rect1234 in the <css> tree? Does anyone know of a
document that unambiguously tells exactly how to do it?
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Martin Owens
2017-04-24 18:15:48 UTC
Permalink
Post by C R
Hey Martin. :) I know you've got a ton to do, but everyone I show the
inkscape hackfest photo to loves the cool functionality you added to
it. Maybe a doctormo tutorial would be a good idea...
Here you go:

https://inkscape.org/en/~doctormo/%E2%98%85group-photo-web-css-popover

Best Regards, Martin Owens
C R
2017-04-24 20:22:29 UTC
Permalink
Post by Martin Owens
https://inkscape.org/en/~doctormo/%E2%98%85group-photo-web-css-popover
Wooo! Awe, and a dedication too. :D
Thanks doc!
Post by Martin Owens
Best Regards, Martin Owens
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Steve Litt
2017-04-24 05:58:20 UTC
Permalink
On Mon, 24 Apr 2017 00:58:27 -0400
Post by Martin Owens
http://divajutta.com/doctormo/locomap/map.svg
Wow, although that's exactly what I need the user to experience, that's
not at all how I figured it would be coded. Your <svg> element contains
exactly three paths: One for the back button, one for the entire map,
and one for something else (perhaps the ocean?). The map path consists
of several continues followed by a z (close the path?) and then a M
(Move to another point without writing?). I guess somehow you parse
that all apart with your three Javascript scripts.

I had always figured my map would consist of one path for each
clickable region, but that's not at all how your map appears to work.

I'll study yours more tomorrow. It's insanely cool.

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
C R
2017-04-24 06:23:38 UTC
Permalink
This one, for those who have not yet witnessed the awesome of Martin's
additions:
https://inkscape.org/nl/~doctormo/%E2%98%85inkscape-hackfest-2016-group-photo

Other projects I show that too have said they need to "up their
hackfest-photo game". :D

-C
Post by Steve Litt
On Mon, 24 Apr 2017 00:58:27 -0400
Post by Martin Owens
http://divajutta.com/doctormo/locomap/map.svg
Wow, although that's exactly what I need the user to experience, that's
not at all how I figured it would be coded. Your <svg> element contains
exactly three paths: One for the back button, one for the entire map,
and one for something else (perhaps the ocean?). The map path consists
of several continues followed by a z (close the path?) and then a M
(Move to another point without writing?). I guess somehow you parse
that all apart with your three Javascript scripts.
I had always figured my map would consist of one path for each
clickable region, but that's not at all how your map appears to work.
I'll study yours more tomorrow. It's insanely cool.
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Maren Hachmann
2017-04-24 11:45:24 UTC
Permalink
Post by Steve Litt
On Mon, 24 Apr 2017 00:58:27 -0400
Post by Martin Owens
http://divajutta.com/doctormo/locomap/map.svg
Wow, although that's exactly what I need the user to experience, that's
not at all how I figured it would be coded. Your <svg> element contains
exactly three paths: One for the back button, one for the entire map,
and one for something else (perhaps the ocean?). The map path consists
of several continues followed by a z (close the path?) and then a M
(Move to another point without writing?). I guess somehow you parse
that all apart with your three Javascript scripts.
- Somehow, the page source doesn't reveal everything. You need to use
the inspector, to get all the groups and countries (in reverse to how it
works in many other cases, where the active DOM is pruned, here it's
enhanced). It loads 'world.svg' in the js, instead of in the html source.

Maren
Post by Steve Litt
I had always figured my map would consist of one path for each
clickable region, but that's not at all how your map appears to work.
I'll study yours more tomorrow. It's insanely cool.
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Loading...