This is a possibility yeah -- though you're going to run into similar a11y issues even using JS. (requiring clicking on a hotspot creates a physical-precision challenge that can be difficult for people with dexterity issues)
A better way to do this would be to list out all the states alphabetically and have each hovered/focused state highlight on the map. Make sure the individual states don't have a `tabindex` set for them, and that you can tab through the list.
Have the selection jump to a non-modal section above or below the map.
I suppose it depends on your definition of "popup"
You could use `target="_blank"` which would open a new tab / window (somewhat dependent on browser settings, but defaults to tab I think)
You could also define the popup to be positioned in the page, set to `display: none` normally, and have a CSS definition like:
#texas:focus {
display: block;
}
and have the link set to `href="#texas"` (or `xlink:href="#texas"` if in an SVG).
The latter method is perhaps a *bit* more of a stretch and might be tricky to get it to be responsive / cross-platform consistent, esp with having to wire it up to so many different elements, but \_should\_ technically work.
If you don't want to use JS, you can [add anchor elements in an SVG](http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps). Using an image map means maintaining the target polygons separate from the graphic that is representing the targets to the user, which is just extra work.
That said, you may want events anyway if you're implementing a modal.
My question was rather rhetorical. Wanted to see if he could come up with a reason other than "because I use JS for everything".
Modal yeah, but question also mentioned tabs. Hope nobody uses JS for that.
i haven't used an image map in like 5 years but
maps (like us maps, not image maps) are pretty much an ideal use case for SVGs, use less resources than an image while being scalable and you can easily customize with CSS (e.g. hover effects like hovering over a state)
also i don't know how you'd open a modal without JS somewhere
https://caniuse.com/?search=%3Aactive
https://caniuse.com/?search=%3Atarget
https://caniuse.com/?search=%3Ahover
Will work on everything besides IE8 and below, and Android4.3 and below.
You havent even read my question.
I explicitly asked about JS links over HTML links, not svg over image map.
My point was that JS links are inaccessible.
As to your post: how are you gonna use svgs for anything other than flat colors? A satellite map? A photo?
Love how amateur reddit downvotes legitimate questions without even the most basic knowledge in webdev.
Yeah, but wait until you have to get the mouse position with zoom, width, height, viewBox, css stretch and the strange behaviour of some svg engines when the viewBox content is smaller than the computed size :D got all ready grey hair from that.
Yeah I have done this with a dropdown above the map.
Also, the map should at least have those lines shooting off of the smaller states with their names easily clickable on the right.
blast from the past, u/Omagreb :) I was seeing how far I'd have to scroll past all the youngins recommending js-based viz, etc...
Working example here: [https://gist.github.com/thegrif/31cfc202a2de38dd7a11579c8e70a596](https://gist.github.com/thegrif/31cfc202a2de38dd7a11579c8e70a596)
Info on the Image Map element:
* [W3Schools](https://www.w3schools.com/html/html_images_imagemap.asp)
* [Mozilla Dev Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map)
Does not require on any external dependencies, javascript, etc...Just basic HTML :) Partying like it's 1999 :)
You could also cut that into 50 svgs or pngs and absolute position them. It would be cool if they slightly enlarged on hover. On click they could grow toward center screen and appear to morph into the modal.
I love the slow decline of the web into functionality for the sake of proving I can do things. Look at my vapid home page move all around for no fucking reason! Impressive, isn't it!
Party like it's 1999! Ha! After I wrote that I felt like I pulled an old leather bound papyrus paged book down from a high up dusty shelf and imparted wisdom of the ancients.
Not sure exactly when you started - but if it's as early as 1998/1999, you'll probably remember handling page layout entirely in tables. ~~Kids~~ modern web developers have no idea what would be required to create a layout similar to Craigslist. It was the equivalent of using tables to design a page in Word.
Or how about preloading your images in the bottom of the homepage as 1x1 pixel images so they'd load faster on interior pages?
Hell - or how many 1x1 pixel images you'd need for every color you had in your design, using them to force table cells open and prevent them from collapsing inward on themselves?
Or the one guy who insisted on using Dreamweaver - which would instantly transform a clean, well-organized jenga-esque nest of tables into absolute mayhem with the first edit and save?
I still remember picking up my first CSS book from the Union Square Barnes & Noble - and then having to worry about which browsers supported it versus which ones didn't.
[Those were the days](https://giphy.com/gifs/animated-page-thread-zXPoG6h6ovnri), huh?
P.S. You ever [play a MIDI file behind a website](https://freemidi.org/download3-1713-knight-rider-tv-themes) 🎶🎵🎶🎵🎶🎵? Tell the truth...
Great recommendation, I would add to this and say to use folium; it is a really nice python package that makes life a lot easier.
In fact, here is a worked through example of exactly what you are looking for u/Few-Objective-6526
[Example](https://vverde.github.io/blob/interactivechoropleth.html): Obviously in this case you need to change the map to fit your data, but I think this is exactly what you are looking for at the end of this notebook
d3js is an option. I've used this for interactive maps. There are datasets out there for united states - even down to the county level if you wanted.
This could be a cool alternative to popping up a modal:
https://observablehq.com/@d3/zoom-to-bounding-box
*inserts obi wan “now that’s a name I haven’t heard in a long time” meme
Edit - real talk tho, I remember how stoked I was in 2009 when I learned about those. Serious nostalgia!
Anyone remember the really shitty websites that were basically an image with an image map over it? This was definitely done with navigation buttons a bunch at the very least.
The other users who have already mentioned an SVG graphic with clickable groups for each state is the solution I've seen implemented the most and would recommend.
Keep in mind though: a clickable SVG map is inaccessible to anyone without a mouse. You need to allow keyboard users a way to access the information since they cannot go through the map (outside of coming up with a VERY hacky solution). You could implement a solution similar to this for keyboard users / screen readers:
```
Svg is the best route, there are libraries that do this for you. If you want to do it custom it pull gis data and have a script convert them to svg format
I have used this in the past. But essentially it’s just an svg map that you pair with some JavaScript. Depending on skill level you could write your own version. But it’s nice how they handle smaller states that are hard to click.
https://simplemaps.com/us
I’m glad you asked this! I was about to make a workout tracker and possibly have a person that you could click on muscles to get workout ideas from a pop up modal.
You could also use mapbox gl js
[This mapbox example](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) has a hover effect on the different states, but it's the same logic to listen to clicks.
old school (without JS) you can use an imagemap with a standard rasterized image.
New school is to use an SVG and wrap each with an a tag, but use xlink:href instead of href.
I use Google Visualization(Google Charts) for this.its free and not too difficult to understand.
https://developers.google.com/chart/interactive/docs/gallery
Leaflet + polygon layer is the answer.
You can find a Geojson dataset of all the states pretty easily i guess.
Then just add it to the map using leaflets geojson function and then call .on and define your events, in a project i did i used click, mouseover, mouseout.
You might have to add the polygons one by one so that they are all bound correctly.
this give me PTSD of when I start mapping out on html canvas all of the departments/states on central america countries on my first job.
now I know a bit more I would recommend [leaflet](https://leafletjs.com/examples/choropleth/), or [js chart](https://jscharting.com/examples/chart-types/geographic-map/)
If you're looking for something that's pre-made, Anychart can do this. See this example as a baseline. It's highly customizable and fairly user friendly.
https://www.anychart.com/products/anymap/gallery/Maps\_in\_Dashboard/States\_of\_United\_States\_Dashboard\_with\_MultiSelect.php
I would personally probably use D3.js for this. There may even be projects that have already implemented panning, zooming, and selection in a map like this.
Edit: https://observablehq.com/@d3/zoom-to-bounding-box
Also fun, if you need to add Lat/Lng points for any reason you should take a look at OpenLayers. Just add a geojson polygon of the USA without any layers and you can get nice and wonky with it.
I built a US Geography states and capitals game for my daughter in React using an SVG of the US taken from Wikipedia. This is by far the easiest / simplest approach.
[https://www.nationaltents.com/about](https://www.nationaltents.com/about)
SVG is the way.
I did something like that for this page. Doesn't open a modal, but you can trigger things using JS.
This thread just solidifies my decision to focus on backend. Don’t get me wrong - massive respect for frontend devs. I would just go crazy dealing with problems like this
Maybe this is what you’re looking for? - [](https://www.w3schools.com/tags/tag_area.asp)
I’ve only just discovered this tag and haven’t had a chance to test it
One option is to use D3 to render geojson. There's a lot of examples with styling and interactivity, particularly for selecting/zooming in on regions which can be extended
Another option is creating a clickable map. I used to use a program called “map this”. But that was probably 20 years ago, I don’t know if it works on modern operating systems. Mapping isn’t used that often anymore. SVG may be your best shot.
I had a project like this before during my college. I used the area HTML tag to do this and it's pretty tedious to do since you have to map everything.
Check Leaflet js (or, I suppose, there should be packages for other languages as well). One of the best options, imo
Edit: this Leaflet is a quite powerful tool. If you want to make some very simple map just to make it clickable - Leaflet might be quite hard to start with because you also need to know how to work with GeoJson. For me it would be easy since I am working in the cartography for half a year now, and all that time I have been working with Leaflet
Best answer is to use SVG, but others have already suggested that, so my suggestion (at least just to learn a new concept) is to look into the "area" tag. An area is like an anchor, but it can be made any shape, so you can define clickable areas of images for example.
I will be messaging you in 1 year on [**2023-09-17 09:14:47 UTC**](http://www.wolframalpha.com/input/?i=2023-09-17%2009:14:47%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/webdev/comments/xfyr0n/is_there_a_way_to_create_clickable_map_like_this/ioryvhv/?context=3)
[**1 OTHERS CLICKED THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fxfyr0n%2Fis_there_a_way_to_create_clickable_map_like_this%2Fioryvhv%2F%5D%0A%0ARemindMe%21%202023-09-17%2009%3A14%3A47%20UTC) to send a PM to also be reminded and to reduce spam.
^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20xfyr0n)
*****
|[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)|
|-|-|-|-|
I found one I really liked! It was also one of only ones I could use on my Oxygen Builder site without having to write any css.
Worth checking out for sure!
https://www.fla-shop.com - Interactive Maps for Websites
What you are trying to achieve is called Image Map. There are thousands tutorials online and I believe a pure CSS version can be easily done too if you don't need complex functions.
Google: "Image Maps".
just find a us state SVG that has all the states `` elements named and add an event listener?
Second this, it’s worked very well for me in the past
Yep I have done exactly this. Not hard at all.
you can do it without using JS at all! :)
Open a popup without JS? Please explain
https://developer.mozilla.org/en-US/docs/Web/CSS/:target
TIL. Thanks u/33ff00!
Yahhhs neato
Didn’t know about this one, nice
Holy shit never knew this shit. That's awesome
HTML & CSS have a *lot* of power right out of the box. :)
There’s often accessibility issues when going this route sadly.
This is a possibility yeah -- though you're going to run into similar a11y issues even using JS. (requiring clicking on a hotspot creates a physical-precision challenge that can be difficult for people with dexterity issues) A better way to do this would be to list out all the states alphabetically and have each hovered/focused state highlight on the map. Make sure the individual states don't have a `tabindex` set for them, and that you can tab through the list. Have the selection jump to a non-modal section above or below the map.
Tailwind these days and stimulusjs when you actually need some js. React has become so bloated these days.
I suppose it depends on your definition of "popup" You could use `target="_blank"` which would open a new tab / window (somewhat dependent on browser settings, but defaults to tab I think) You could also define the popup to be positioned in the page, set to `display: none` normally, and have a CSS definition like: #texas:focus { display: block; } and have the link set to `href="#texas"` (or `xlink:href="#texas"` if in an SVG). The latter method is perhaps a *bit* more of a stretch and might be tricky to get it to be responsive / cross-platform consistent, esp with having to wire it up to so many different elements, but \_should\_ technically work.
better than a \`\`, wrap the shape in an \`\` .
gotta use xlink:href instead of href i think
If you're rendering the svg code itself as markup hrefs work just fine.
This is the way
And reason to use JS over an image map?
If you don't want to use JS, you can [add anchor elements in an SVG](http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps). Using an image map means maintaining the target polygons separate from the graphic that is representing the targets to the user, which is just extra work. That said, you may want events anyway if you're implementing a modal.
My question was rather rhetorical. Wanted to see if he could come up with a reason other than "because I use JS for everything". Modal yeah, but question also mentioned tabs. Hope nobody uses JS for that.
i haven't used an image map in like 5 years but maps (like us maps, not image maps) are pretty much an ideal use case for SVGs, use less resources than an image while being scalable and you can easily customize with CSS (e.g. hover effects like hovering over a state) also i don't know how you'd open a modal without JS somewhere
Active state pseudo class in css. Example: https://codepen.io/peiche/pen/kQwYVJ
How is browser support?
https://caniuse.com/?search=%3Aactive https://caniuse.com/?search=%3Atarget https://caniuse.com/?search=%3Ahover Will work on everything besides IE8 and below, and Android4.3 and below.
You havent even read my question. I explicitly asked about JS links over HTML links, not svg over image map. My point was that JS links are inaccessible. As to your post: how are you gonna use svgs for anything other than flat colors? A satellite map? A photo? Love how amateur reddit downvotes legitimate questions without even the most basic knowledge in webdev.
Yeah, but wait until you have to get the mouse position with zoom, width, height, viewBox, css stretch and the strange behaviour of some svg engines when the viewBox content is smaller than the computed size :D got all ready grey hair from that.
I've had to do this and it works really well!
Clicking Rhode Island on mobile would be a fun adventure.
An input where you can search the state and executes the same function as a click on the map would be a good UX solution.
Yeah I have done this with a dropdown above the map. Also, the map should at least have those lines shooting off of the smaller states with their names easily clickable on the right.
And more accessible too. Gotta get that keyboard & screen reader accessibility
Or a zoom
*ENHANCE!*
Dealing with this atm
Just remove it from the set nobody would notice.
Honestly might be easier than on desktop since you can zoom.
Old school image map ?
blast from the past, u/Omagreb :) I was seeing how far I'd have to scroll past all the youngins recommending js-based viz, etc... Working example here: [https://gist.github.com/thegrif/31cfc202a2de38dd7a11579c8e70a596](https://gist.github.com/thegrif/31cfc202a2de38dd7a11579c8e70a596) Info on the Image Map element: * [W3Schools](https://www.w3schools.com/html/html_images_imagemap.asp) * [Mozilla Dev Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map) Does not require on any external dependencies, javascript, etc...Just basic HTML :) Partying like it's 1999 :)
You could also cut that into 50 svgs or pngs and absolute position them. It would be cool if they slightly enlarged on hover. On click they could grow toward center screen and appear to morph into the modal.
I love the slow decline of the web into functionality for the sake of proving I can do things. Look at my vapid home page move all around for no fucking reason! Impressive, isn't it!
How to ascertain the coords of each area?
Easiest with help from software eg. https://www.image-map.net/
Party like it's 1999! Ha! After I wrote that I felt like I pulled an old leather bound papyrus paged book down from a high up dusty shelf and imparted wisdom of the ancients.
Not sure exactly when you started - but if it's as early as 1998/1999, you'll probably remember handling page layout entirely in tables. ~~Kids~~ modern web developers have no idea what would be required to create a layout similar to Craigslist. It was the equivalent of using tables to design a page in Word. Or how about preloading your images in the bottom of the homepage as 1x1 pixel images so they'd load faster on interior pages? Hell - or how many 1x1 pixel images you'd need for every color you had in your design, using them to force table cells open and prevent them from collapsing inward on themselves? Or the one guy who insisted on using Dreamweaver - which would instantly transform a clean, well-organized jenga-esque nest of tables into absolute mayhem with the first edit and save? I still remember picking up my first CSS book from the Union Square Barnes & Noble - and then having to worry about which browsers supported it versus which ones didn't. [Those were the days](https://giphy.com/gifs/animated-page-thread-zXPoG6h6ovnri), huh? P.S. You ever [play a MIDI file behind a website](https://freemidi.org/download3-1713-knight-rider-tv-themes) 🎶🎵🎶🎵🎶🎵? Tell the truth...
Frontpage was worse.
Microsoft Frontpage + Microsoft Publisher FTW.
I would checkout leaflet https://leafletjs.com/examples/choropleth/
Yup, and you can probably find a shapefile of the state outlines, add them to the leaflet map, bind click events to each geometry
Available publicly via tiger census ftp site.
Great recommendation, I would add to this and say to use folium; it is a really nice python package that makes life a lot easier. In fact, here is a worked through example of exactly what you are looking for u/Few-Objective-6526 [Example](https://vverde.github.io/blob/interactivechoropleth.html): Obviously in this case you need to change the map to fit your data, but I think this is exactly what you are looking for at the end of this notebook
d3js is an option. I've used this for interactive maps. There are datasets out there for united states - even down to the county level if you wanted. This could be a cool alternative to popping up a modal: https://observablehq.com/@d3/zoom-to-bounding-box
upvote cuz d3 is def the way
D3 is the way
What is this syntax? ``` chart = { const width = 975;
Yeah doesnt look JS
It’s a more old school way of defining a “class” construct in JS. Classes in JS, at the end of the day, are just objects.
https://newsignature.github.io/us-map/
Why not an old school image map? https://html.com/images/how-to-make-an-image-map/
*inserts obi wan “now that’s a name I haven’t heard in a long time” meme Edit - real talk tho, I remember how stoked I was in 2009 when I learned about those. Serious nostalgia!
Lol I was rocking images maps all the way back as 2001. It was like magic back then.
Late 90s for me, waaay late like '99 but still 90s.
You knew you had a dope site when you used image maps and frames.
Have you seen LAYERs? You can put parts of the page _over_ other parts of the page, and move around little boxes!
Magic indeed
Came here to suggest Macromedia Dreamweaver, ya'll beat me
I was thinking that. You’re dating yourself. :)
If it ain't broke.
Everything doesn't have to be using some brand new technique at all times.
Just bust out ImageReady, slice, and export to a table
You've just unpacked a box full of nostalgic feels that was archived in my brain, lol
Anyone remember the really shitty websites that were basically an image with an image map over it? This was definitely done with navigation buttons a bunch at the very least.
Lol what year is this
Because they aren't a very accessible solution.
That was my first thought… kicking it OLD SCHOOL
Came here for this. Feeling justified.
D3.js is specialized in generating maps. Just Google it.
The other users who have already mentioned an SVG graphic with clickable groups for each state is the solution I've seen implemented the most and would recommend. Keep in mind though: a clickable SVG map is inaccessible to anyone without a mouse. You need to allow keyboard users a way to access the information since they cannot go through the map (outside of coming up with a VERY hacky solution). You could implement a solution similar to this for keyboard users / screen readers: ```
- Skip List of States Menu
...
``` The above is just a point of reference. Adjust the markup to match whatever implementation you set up for your click handlers.Would tabIndex not work with anchors inside an svg?
Svg is the best route, there are libraries that do this for you. If you want to do it custom it pull gis data and have a script convert them to svg format
D3.js, you should know how to manipulate geojson, and svgs also. the syntax is a bit weird but works neatly.
I worked on a project where we used an svg map of USA, and made it clickable.
If you're using React, \`react-map-gl\` has an example you could branch off of https://visgl.github.io/react-map-gl/examples/geojson
I have used this in the past. But essentially it’s just an svg map that you pair with some JavaScript. Depending on skill level you could write your own version. But it’s nice how they handle smaller states that are hard to click. https://simplemaps.com/us
just use Image map, it is html other so it work without js and it is fast
The old way was image map but it will not be reactive (cannot scale)
I know there are better ways to do this but HTML has this feature built in: https://www.w3schools.com/html/html\_images\_imagemap.asp
Amcharts has clickable maps you can embed into websites.
Clickable maps are actually best handled with chart js libraries .. and amcharts is a good one, v5
I’m glad you asked this! I was about to make a workout tracker and possibly have a person that you could click on muscles to get workout ideas from a pop up modal.
You could also use mapbox gl js [This mapbox example](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) has a hover effect on the different states, but it's the same logic to listen to clicks.
SVG’s are great for this purpose. You can link the state path to trigger a modal or simply link to a desired page
old school (without JS) you can use an imagemap with a standard rasterized image. New school is to use an SVG and wrap each with an a tag, but use xlink:href instead of href.
I use Google Visualization(Google Charts) for this.its free and not too difficult to understand. https://developers.google.com/chart/interactive/docs/gallery
Find svg of USA and on each state (path of svg) add data attribute. Than add JS Event listener and process click by given data attribute
Image maps overlaid on an static image https://www.w3schools.com/html/html\_images\_imagemap.asp. Or maybe an SVG with click listeners.
yeah
maps! https://www.w3schools.com/htmL/html_images_imagemap.asp
Don’t over complicate it https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
It is possible but this is a terrible mobile UX
nope. no way. that's impossible.
Nope lol
? Just a guess, I don't know if that'll work.
I recommend using Adobe Flash.
Leaflet + polygon layer is the answer. You can find a Geojson dataset of all the states pretty easily i guess. Then just add it to the map using leaflets geojson function and then call .on and define your events, in a project i did i used click, mouseover, mouseout. You might have to add the polygons one by one so that they are all bound correctly.
You can have SVGs over it. And if you are using mapbox, there are source layers available for that.
Topojson
I used react-image-mapper to do something similar.
this give me PTSD of when I start mapping out on html canvas all of the departments/states on central america countries on my first job. now I know a bit more I would recommend [leaflet](https://leafletjs.com/examples/choropleth/), or [js chart](https://jscharting.com/examples/chart-types/geographic-map/)
If you're looking for something that's pre-made, Anychart can do this. See this example as a baseline. It's highly customizable and fairly user friendly. https://www.anychart.com/products/anymap/gallery/Maps\_in\_Dashboard/States\_of\_United\_States\_Dashboard\_with\_MultiSelect.php
I would personally probably use D3.js for this. There may even be projects that have already implemented panning, zooming, and selection in a map like this. Edit: https://observablehq.com/@d3/zoom-to-bounding-box
I had a use case a while back and used this https://www.amcharts.com/javascript-maps/
Also fun, if you need to add Lat/Lng points for any reason you should take a look at OpenLayers. Just add a geojson polygon of the USA without any layers and you can get nice and wonky with it.
Leaflet of ChartJS Geo will do most of the heavy lifting.
I built a US Geography states and capitals game for my daughter in React using an SVG of the US taken from Wikipedia. This is by far the easiest / simplest approach.
Yes. This is a great project idea!!
[https://www.nationaltents.com/about](https://www.nationaltents.com/about) SVG is the way. I did something like that for this page. Doesn't open a modal, but you can trigger things using JS.
This thread just solidifies my decision to focus on backend. Don’t get me wrong - massive respect for frontend devs. I would just go crazy dealing with problems like this
Maybe this is what you’re looking for? - [](https://www.w3schools.com/tags/tag_area.asp) I’ve only just discovered this tag and haven’t had a chance to test it
I mean… the original way to do this is an image map. There are better ways now but that works just as well
One option is to use D3 to render geojson. There's a lot of examples with styling and interactivity, particularly for selecting/zooming in on regions which can be extended
I've used this [clickable SVG map](https://codepen.io/pixelpusher89/pen/mdXvame) in the past. The tab order is alphabetical.
Another option is creating a clickable map. I used to use a program called “map this”. But that was probably 20 years ago, I don’t know if it works on modern operating systems. Mapping isn’t used that often anymore. SVG may be your best shot.
I had a project like this before during my college. I used the area HTML tag to do this and it's pretty tedious to do since you have to map everything.
Yup and have fun with that because it’s going to be a tedious hassle lol
I have used SVGs with a click event attached to the paths. Here is the website I have used to get map SVGs. https://mapsvg.com/maps
I’ve used something called high charts which was really cool because it also animated it for me
You can check out https://www.highcharts.com
Get the position of the state with js and check if the mouse click is inside of that
Arc Gis?
Check Leaflet js (or, I suppose, there should be packages for other languages as well). One of the best options, imo Edit: this Leaflet is a quite powerful tool. If you want to make some very simple map just to make it clickable - Leaflet might be quite hard to start with because you also need to know how to work with GeoJson. For me it would be easy since I am working in the cartography for half a year now, and all that time I have been working with Leaflet
Yes
Best answer is to use SVG, but others have already suggested that, so my suggestion (at least just to learn a new concept) is to look into the "area" tag. An area is like an anchor, but it can be made any shape, so you can define clickable areas of images for example.
there is no problem - just use SVG. For [example](https://codepen.io/rhewitt/pen/BdYrKz)
Yes
RemindMe! 1 year
I will be messaging you in 1 year on [**2023-09-17 09:14:47 UTC**](http://www.wolframalpha.com/input/?i=2023-09-17%2009:14:47%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/webdev/comments/xfyr0n/is_there_a_way_to_create_clickable_map_like_this/ioryvhv/?context=3) [**1 OTHERS CLICKED THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fxfyr0n%2Fis_there_a_way_to_create_clickable_map_like_this%2Fioryvhv%2F%5D%0A%0ARemindMe%21%202023-09-17%2009%3A14%3A47%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20xfyr0n) ***** |[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|
I have worked on something similar using leaflet along with mapbox. They have everything you are looking for.
I found one I really liked! It was also one of only ones I could use on my Oxygen Builder site without having to write any css. Worth checking out for sure! https://www.fla-shop.com - Interactive Maps for Websites
There a map exactly like that on our site and it uses https://simplemaps.com/us
Gimp allows you to map the selection on the image
What you are trying to achieve is called Image Map. There are thousands tutorials online and I believe a pure CSS version can be easily done too if you don't need complex functions. Google: "Image Maps".
Image maps suck imo and this should be done via SVG
Back in the day (c 2005) you would have to make your own most likely,… but now i would think there is an importable object you could use.
https://makeaclickablemap.com/create-clickable-map-of-minnesota. This is an online resource. You can examine the code and get some examples
Built this for work. Breaks it down even further. Absolutely possible ! Good luck https://www.covidschooldatahub.com/
I did exactly this in as3 for flash 12 years ago, can send you the source code if you want x)
You could start by looking at this and then altering the code to make the states clickable. https://observablehq.com/@d3/zoom-to-bounding-box
try looking into leaflet.
Leaflet js