Dynamic maps

Of course, in the general, you may exercise your search
skills to look at other versions.
I would humbly suggest, though, that your time would be
better spent learning the basics of SVG methodology. :biggrin:



Please see my update to my last post as you were responding.

Well, I am busy reading up on Flexbox right now, so that will come later. But it is exciting to know that I can learn the basics of SVG on MDN too!

I am very interested in learning how to do maps and infographics for my website.

A quick search came up with this site…

Blank SVG maps of individual states of the United States


Yes, I saw something similar yesterday.

I guess you have to have expensive map making software to create the original SVG’s?

This probably relates to GIS…

If you just want the outline of an individual state, then
that is easy to do; just extract it from the full map. :winky:

Do yo need a code example?
Then name a state.

Or you could try to do it yourself. :biggrin:

That would be very good practise.


I appreciate all of your help, but you sure like to evade certain questions.

Yes, I see how you could take a particular state out of the U.S.

I was asking about what a person would do if they needed a given map split up by some other variable (e.g. city, neighborhood, voting precinct, police precinct, school district, etc.)

And my guess is that you’d need not only mapping software to create the more specific SVG, but of course you’d need data telling you the boundaries of say a school district.

Lots of people go out of their way to public such thngs for the common good, so maybe if I search enough, I can find some of those things already online?

For others, I guess I’d have to buy a pre-made map or pay someone to create one for me.

Like maybe I am doing an article on the nesting habits of old crotchety COOTS in my state… :wink:

That person would need to see a specific image
of it’s boundaries .

I made a simple SVG path creator for personal use.

Here is an example that I made with it…


…from this basic image…

…and the creator code…

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<style media="screen">
#path {
    justify-content: center;
    align-items: center;
    height: 48px;
    background-color: #000;
    cursor: pointer;


<div id="path"></div>

<div id="container">
 <img src="star.jpg" width="600" height="620">

( function(  d ) {
   var coords = [];
   d.getElementById( 'container' ).addEventListener( 'click',
         coords.push( e.pageX );
         coords.push( e.pageY - d.getElementById( 'path' ).offsetHeight );
         d.getElementById( 'path' ).textContent = 
		 '\<path d="M' + coords + 'z" fill="transparent" stroke="#000"/\>';
      }, false );
} ( document ) );



You can apply unique IDs to each of the elements, such as each of the states. They will be in the code, perhaps as vars. ( var NY = “New York”; )

In your code, you would specify the IDs that you are referring to and color them to distinguish them from the rest of the map. If you conclude that NY has the highest population, then you specify a color for the CSS change for that element. ( NY.style.backgroundColor = ‘#000099’; )

This is a theoretical implementation.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.