Skip to content
Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
screenshot
src
.gitignore
Gruntfile.js
LICENSE.txt
README.md
favicon.png
index.html
package.json
sonar-project.properties

README.md

Interactive Map of Catalunya

Interactive vectorial map of Catalunya based on a SVG/VML and the library RaphaëlJs.

screen-shot

Current versions

  • Raphaël JS - 2.2.1
  • ScaleRaphael - 0.8
  • jQuery - 3.1.1
  • Bootstrap - 3.3.7

Demo

How to create a Map using a SVG file

  1. Given a SVG file you can rename it to xml XML file
  2. Inside the xml file you will see a d="..." like this one
	d="M 97.21875 15.40625 L 94.84375 L 100.03125 16.34375 L 98.625 15.65625 L 98.15625 15.65625 L 97.21875 15.40625 z "
  1. Create a mappath array with all the values seen in the last point like this path file
  2. Use RaphaëlJs to draw the map like this path file

How to use this map (last version)

  1. Add this code in the head and footer

1.1 header

<header>
...
<meta name="viewport" content="width=device-width">
<!-- Jquery & Raphaeljs -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/scale.raphael.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- custom styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/catalunya-map-v2.css">
...
</header>

Explanation: catalunya-map-v2.css : custom css theme (v1/v2)

1.2 footer

<footer>
...
<script type="text/javascript" src="js/catalunya-map-path.js"></script>
<script type="text/javascript" src="js/catalunya-map.js"></script>
<script type="text/javascript" src="js/catalunya-map-options-v2.js"></script>
<script type="text/javascript" src="js/catalunya-map-init.js"></script>
...
</footer>

Explanation :

catalunya-map-path.js       : js file that have the javascript array with all the data
catalunya-map.js            : js file that have the object to create maps
catalunya-map-options-vX.js : js file that have the custom options for each theme (v1/v2/v3)
catalunya-map-init.js       : js file that create an object map and print it in the screen
  1. Add this code in the body

     		<div id="container row">
    
     			<div class="map-wrapper">
     				<div id="text" class="col-md-4">
     					<div id="comarcaName">
     						<h1>Catalunya Medieval</h1></div>
     					<div id="contentText">Seleccionar una comarca del mapa i fer clic per veure el seu contingut</div>
     				</div>
     				<div id="map" class="col-md-8"></div>
     			</div>
    
     			<div class="llistaComarques col-md-12">
     				<ul class="list list-group"></ul>
     			</div>
    
     		</div>
    
  2. Reload the page and all you should be able to see the map

Sources

Inspiration Links

Versions

V1.0

  • Just the map

V2.0

V2.1

  • Debug information and better resize example

v3.0

  • Add comarca and capital names

v3.1

  • New catalunya-map-path.js
  • Add colors on mouse hover

V4.0

  • Add Comarca Info box on mouse click

V4.1

  • add touchStart for tablets (ipad)

v5.0

  • Add Comarca del Moianes : Source image Mapa_comarcal_de_Catalunya_v2.svg (Thanks for your Contribution Hector)

v5.1

  • reposition of all the names
  • new screenshot

v5.2

  • add property onClick and newWindow (requested functionality by Hector)

v6.0

  • add Droid Sans Font
  • change colors
  • update Raphael JS and jQuery versions
  • add bootstrap
  • add all buildings

v6.1

  • Fix responsive design

v6.2

  • Object Oriented implementation (refactor)

v7.0

  • update readme
  • create diferent configuration option files (v1,v2)
  • beautifyed all code
  • Documentation of the code

v7.1

v7.2

  • Fix styles

v7.3

  • Grunt
  • nodejs
  • refactor
  • sonar fixes

v7.4

  • configuracion text mes gran.

v7.5

  • bloqueix de color de fons quan comarca esta seleccionada.
  • configuration option v3
  • Add text, and effects

Webs using this map:

License

You can’t perform that action at this time.